/* ==========================================================
   Birthday Website
   Sections CSS
   Author : Huy + ChatGPT
   ========================================================== */

/* ==========================================================
   LOADING
   ========================================================== */

#loading{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-bg);

    overflow:hidden;

}

.loading-container{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.loading-logo{

    width:120px;

    height:120px;

    margin-bottom:var(--space-6);

}

.loading-logo img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.loading-title{

    margin-bottom:var(--space-3);

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    font-weight:700;

    color:var(--color-text);

}

.loading-subtitle{

    margin-bottom:var(--space-6);

    font-size:var(--font-size-base);

    color:var(--color-text-muted);

    letter-spacing:2px;

}

.loading-progress{

    width:320px;

    max-width:100%;

    height:6px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.12);

}

.loading-progress-bar{

    width:0;

    height:100%;

    border-radius:inherit;

    background:var(--color-accent);

}

.loading-percent{

    margin-top:var(--space-4);

    font-size:var(--font-size-sm);

    font-weight:600;

    color:var(--color-text-muted);

    letter-spacing:1px;

}

/* ==========================================================
   WELCOME
   ========================================================== */

#welcome{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

    text-align:center;

}

.welcome-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-5);

}

.welcome-overline{

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.welcome-title{

    max-width:900px;

    font-family:var(--font-heading);

    font-size:var(--font-size-4xl);

    font-weight:700;

    line-height:1.1;

    color:var(--color-text);

}

.welcome-description{

    max-width:700px;

    color:var(--color-text-muted);

    font-size:var(--font-size-lg);

    line-height:1.8;

}

.welcome-action{

    margin-top:var(--space-3);

}

/* ==========================================================
   GALLERY
   ========================================================== */

#gallery{

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

}

.gallery-container{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.gallery-overline{

    text-align:center;

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.gallery-title{

    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-5);

}

.gallery-item{

    overflow:hidden;

    border-radius:var(--radius-lg);

    cursor:pointer;

    background:var(--color-surface);

}

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

    transition:transform .4s ease;

}

.gallery-item:hover img{

    transform:scale(1.05);

}

.gallery-item.active{

    outline:2px solid var(--color-accent);

}

/* ==========================================================
   STORY
   ========================================================== */

#story{

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

}

.story-container{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.story-overline{

    text-align:center;

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.story-title{

    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.story-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:var(--space-8);

    align-items:center;

}

.story-image{

    overflow:hidden;

    border-radius:var(--radius-lg);

}

.story-image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

}

.story-text{

    display:flex;

    flex-direction:column;

    gap:var(--space-5);

    color:var(--color-text-muted);

    font-size:var(--font-size-lg);

    line-height:1.8;

}

/* ==========================================================
   MEMORY
   ========================================================== */

#memory{

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

}

.memory-container{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.memory-overline{

    text-align:center;

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.memory-title{

    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.memory-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-6);

}

.memory-card{

    padding:var(--space-7);

    border:1px solid rgba(255,255,255,.08);

    border-radius:var(--radius-lg);

    background:var(--color-surface);

    transition:
        transform .35s ease,
        border-color .35s ease;

}

.memory-card:hover{

    transform:translateY(-8px);

    border-color:var(--color-accent);

}

.memory-number{

    margin-bottom:var(--space-4);

    font-family:var(--font-heading);

    font-size:var(--font-size-2xl);

    color:var(--color-accent);

}

.memory-card-title{

    margin-bottom:var(--space-3);

    font-size:var(--font-size-xl);

    color:var(--color-text);

}

.memory-card-text{

    color:var(--color-text-muted);

    line-height:1.8;

}

/* ==========================================================
   HIGHLIGHT
   ========================================================== */

#highlight{

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

}

.highlight-container{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.highlight-overline{

    text-align:center;

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.highlight-title{

    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.highlight-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:var(--space-8);

    align-items:center;

}

.highlight-image{

    overflow:hidden;

    border-radius:var(--radius-lg);

}

.highlight-image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

}

.highlight-text{

    display:flex;

    flex-direction:column;

    gap:var(--space-5);

    color:var(--color-text-muted);

    font-size:var(--font-size-lg);

    line-height:1.8;

}

/* ==========================================================
   FIREWORK
   ========================================================== */

#firework{

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

}

.firework-container{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.firework-overline{

    text-align:center;

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.firework-title{

    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.firework-canvas{

    position:relative;

    width:100%;

    height:700px;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:linear-gradient(
        180deg,
        #020617 0%,
        #081224 100%
    );

}

.particles{

    position:absolute;

    inset:0;

}

.firework{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--color-accent);

    animation:firework-burst .8s ease-out forwards;

}

@keyframes firework-burst{

    from{

        transform:scale(0);

        opacity:1;

    }

    to{

        transform:scale(8);

        opacity:0;

    }

}

/* ==========================================================
   CAKE
   ========================================================== */

#cake{

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:var(--space-10) 0;

}

.cake-container{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

    text-align:center;

}

.cake-overline{

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.cake-title{

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.cake-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-6);

}

.cake-illustration{

    width:320px;

    max-width:100%;

}

.cake-illustration img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

}

.cake-message{

    max-width:720px;

    color:var(--color-text-muted);

    font-size:var(--font-size-lg);

    line-height:1.8;

}

/* ==========================================================
   ENDING
   ========================================================== */

#ending{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    padding:var(--space-10) 0;

    text-align:center;

}

.ending-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-6);

}

.ending-overline{

    color:var(--color-accent);

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.ending-title{

    max-width:900px;

    font-family:var(--font-heading);

    font-size:var(--font-size-3xl);

    color:var(--color-text);

}

.ending-message{

    max-width:760px;

    color:var(--color-text-muted);

    font-size:var(--font-size-lg);

    line-height:1.8;

}

.ending-signature{

    margin-top:var(--space-3);

    font-family:var(--font-heading);

    font-size:var(--font-size-2xl);

    color:var(--color-accent);

}

/* ==========================================================
   Welcome Section
   ========================================================== */

#welcome{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    text-align:center;

    padding:120px 24px;

}

.welcome-container{

    width:min(900px,100%);

    margin:0 auto;

    z-index:2;

}

.welcome-title{

    font-size:clamp(3rem,8vw,6rem);

    font-weight:800;

    letter-spacing:.08em;

    line-height:1.1;

    margin-bottom:24px;

    color:#ffffff;

    text-shadow:
        0 6px 24px rgba(0,0,0,.35);

}

.welcome-description{

    max-width:700px;

    margin:0 auto 48px;

    font-size:1.2rem;

    line-height:1.9;

    color:rgba(255,255,255,.85);

}

.welcome-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 48px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.08em;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #ff6b9d,
        #ff9a8b
    );

    box-shadow:
        0 16px 40px rgba(255,107,157,.35);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

.welcome-button:hover{

    transform:
        translateY(-4px)
        scale(1.03);

    filter:brightness(1.08);

    box-shadow:
        0 22px 50px rgba(255,107,157,.45);

}

.welcome-button:active{

    transform:scale(.97);

}

.welcome-button:focus-visible{

    outline:3px solid rgba(255,255,255,.5);

    outline-offset:4px;

}

.welcome-background{

    position:absolute;

    inset:0;

    z-index:0;

}

.welcome-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.08),
            rgba(0,0,0,.55)
        );

    pointer-events:none;

}

/* ==========================================================
   Story Section
   ========================================================== */

.story-section{

    position:relative;

    padding:140px 0;

}

.story-content{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}

.story-text{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.story-title{

    font-size:clamp(2.5rem,5vw,4rem);

    line-height:1.15;

    font-weight:800;

    color:#ffffff;

}

.story-text p{

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

}

.story-text h3{

    margin-top:12px;

    color:#ffffff;

    font-size:1.5rem;

    font-weight:700;

}

.story-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.story-image img{

    width:100%;

    max-width:480px;

    display:block;

    border-radius:28px;

    object-fit:cover;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}

.story-image:hover img{

    transform:scale(1.03);

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);

}

/* ==========================================================
   Gallery Section
   ========================================================== */

.gallery-section{

    position:relative;

    padding:140px 0;

}

.gallery-title{

    margin-top:20px;

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

}

.gallery-description{

    max-width:720px;

    margin:24px 0 70px;

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    background:rgba(255,255,255,.05);

    box-shadow:
        0 20px 50px rgba(0,0,0,.28);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}

.gallery-item img{

    width:100%;

    height:100%;

    display:block;

    aspect-ratio:4/5;

    object-fit:cover;

    transition:
        transform .7s ease,
        filter .45s ease;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.45),

        transparent 45%

    );

    opacity:.7;

    transition:opacity .4s ease;

}

.gallery-item:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 35px 80px rgba(0,0,0,.38);

}

.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(1.08);

}

.gallery-item:hover::after{

    opacity:.35;

}

.gallery-item.active{

    outline:3px solid var(--color-primary);

    outline-offset:6px;

}

/* ==========================================================
   Memory Section
   ========================================================== */

.memory-section{

    position:relative;

    padding:140px 0;

}

.memory-title{

    margin-top:20px;

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

}

.memory-description{

    max-width:760px;

    margin:24px 0 70px;

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

}

.memory-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.memory-card{

    position:relative;

    padding:42px;

    overflow:hidden;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.25);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}

.memory-card:hover{

    transform:
        translateY(-10px);

    border-color:rgba(255,255,255,.18);

    box-shadow:
        0 35px 80px rgba(0,0,0,.38);

}

.memory-date{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:24px;

    border-radius:999px;

    background:var(--color-primary);

    color:#ffffff;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.08em;

}

.memory-card h3{

    margin-bottom:18px;

    font-size:1.8rem;

    font-weight:700;

    color:#ffffff;

}

.memory-card p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

    font-size:1.05rem;

}

.memory-card::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,255,255,.18),

        transparent 70%

    );

    pointer-events:none;

}

/* ==========================================================
   Highlight Section
   ========================================================== */

.highlight-section{

    position:relative;

    padding:140px 0;

}

.highlight-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.highlight-text{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.highlight-title{

    margin-top:20px;

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

}

.highlight-text p{

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

}

.highlight-quote{

    position:relative;

    margin-top:20px;

    padding:28px 34px;

    border-left:4px solid var(--color-primary);

    border-radius:20px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    color:#ffffff;

    font-size:1.3rem;

    font-style:italic;

    line-height:1.8;

}

.highlight-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.highlight-image img{

    width:100%;

    max-width:520px;

    display:block;

    border-radius:28px;

    object-fit:cover;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.highlight-image:hover img{

    transform:scale(1.03);

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);

}

/* ==========================================================
   Birthday Cake Section
   ========================================================== */

.cake-section{

    position:relative;

    padding:140px 0;

    text-align:center;

}

.cake-title{

    margin-top:20px;

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

}

.cake-message{

    max-width:720px;

    margin:24px auto 70px;

    color:rgba(255,255,255,.82);

    font-size:1.08rem;

    line-height:1.9;

}

.cake-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:40px;

}

.cake-illustration{

    position: relative;

    width: min(420px,100%);

    aspect-ratio: 1 / 1;

}

.candle-flame{

    position:absolute;

    width:16px;

    height:24px;

}

.candle-flame{

    position:absolute;

    width:19px;

    height:31px;

    transform-origin:center bottom;

    animation:flameFlicker .18s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:5;

}

.candle-flame.extinguished{

    opacity:0;

    transform:scale(.15);

    transition:

        opacity .45s ease,

        transform .45s ease;

}

.candle-smoke{

    position:absolute;

    width:10px;

    height:10px;

    opacity:0;

    pointer-events:none;

    z-index:6;

}

.candle-smoke::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:8px;

    height:8px;

    transform:translateX(-50%);

    border-radius:50%;

    background:rgba(220,220,220,.85);

    box-shadow:

        0 -8px 0 3px rgba(210,210,210,.65),

        -4px -16px 0 5px rgba(200,200,200,.45),

        5px -24px 0 6px rgba(190,190,190,.28);

    filter:blur(2px);

    animation:smokeRise 2.2s linear infinite;

}

.candle-flame::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 50% 70%,

            #ffd34d 0%,

            #ffae00 45%,

            #ff6b00 100%

        );

    clip-path:polygon(

        50% 0%,

        70% 15%,

        90% 45%,

        75% 75%,

        50% 100%,

        25% 75%,

        10% 45%,

        30% 15%

    );

    filter:

        drop-shadow(0 0 6px rgba(255,180,0,.9))

        drop-shadow(0 0 14px rgba(255,120,0,.55));

}

.candle-flame::after{

    content:"";

    position:absolute;

    left:50%;

    top:28%;

    width:42%;

    height:48%;

    transform:translateX(-50%);

    background:

        radial-gradient(circle,

            #ffffff 0%,

            #fff7bf 45%,

            rgba(255,255,255,0) 100%

        );

    border-radius:50% 50% 55% 55%;

    filter:blur(.4px);

}

.flame-1{

    left:35.8%;

    top:1.6%;

}

.flame-2{

    left:47%;

    top:1.6%;

}

.flame-3{

    left:60%;

    top:1.6%;

}

.smoke-1{

    left: 35.8%;

    top: 1.6%;

}

.smoke-2{

    left: 47%;

    top: 1.6%;

}

.smoke-3{

    left: 60%;

    top: 1.6%;

}

.cake-image{

    display:block;

    width:100%;

    max-width:420px;

    height:auto;

    margin:auto;

    user-select:none;

    pointer-events:none;

    filter:drop-shadow(0 25px 40px rgba(0,0,0,.35));

}

.cake-illustration:hover{

    transform:translateY(-8px);

}

.cake-illustration img{

    width:100%;

    display:block;

    user-select:none;

    pointer-events:none;

}

.cake-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 42px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:700;

    color:#ffffff;

    background:linear-gradient(

        135deg,

        #ff6b9d,

        #ff9a8b

    );

    box-shadow:
        0 18px 45px rgba(255,107,157,.35);

    transition:
        transform .35s ease,
        filter .35s ease,
        box-shadow .35s ease;

}

.cake-button:hover{

    transform:
        translateY(-4px)
        scale(1.04);

    filter:brightness(1.08);

    box-shadow:
        0 28px 60px rgba(255,107,157,.45);

}

.cake-button:active{

    transform:scale(.96);

}

.cake-button:focus-visible{

    outline:3px solid rgba(255,255,255,.45);

    outline-offset:5px;

}

.cake-button::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    opacity:0;

    transition:opacity .35s ease;

}

.cake-button:hover::before{

    opacity:1;

}

/* ==========================================================
   Ending Section
   ========================================================== */

.ending-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:140px 0;

}

.ending-content{

    width:min(820px,100%);

    margin:0 auto;

}

.ending-title{

    margin-top:20px;

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

    line-height:1.1;

    color:#ffffff;

    text-shadow:
        0 8px 30px rgba(0,0,0,.35);

}

.ending-message{

    max-width:700px;

    margin:36px auto 60px;

    color:rgba(255,255,255,.85);

    font-size:1.15rem;

    line-height:2;

}

.ending-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 48px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:999px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.08em;

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.ending-button:hover{

    transform:
        translateY(-4px)
        scale(1.03);

    background:rgba(255,255,255,.14);

    border-color:rgba(255,255,255,.32);

    box-shadow:
        0 24px 60px rgba(0,0,0,.30);

}

.ending-button:active{

    transform:scale(.97);

}

.ending-button:focus-visible{

    outline:3px solid rgba(255,255,255,.45);

    outline-offset:5px;

}