.birthday-page{
    min-height:100vh;
    padding:clamp(88px, 11vh, 132px) var(--page-gutter) 72px;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 18%, rgba(75,163,255,.2), transparent 42%),
        linear-gradient(155deg, #03101f 0%, #092c51 52%, #041525 100%);
}

.birthday-page-content{
    width:min(980px, 100%);
    display:grid;
    justify-items:center;
    gap:clamp(18px, 3vw, 32px);
}

.birthday-page-image{
    width:100%;
    max-height:72vh;
    object-fit:contain;
    border:1px solid rgba(139,233,255,.42);
    border-radius:var(--radius-large);
    box-shadow:0 24px 70px rgba(0,0,0,.48), 0 0 38px rgba(75,163,255,.2);
}

.birthday-page-answer{
    color:var(--secondary);
    font-family:"Cinzel Decorative", "Cinzel", serif;
    font-size:clamp(2.1rem, 6vw, 4.5rem);
    letter-spacing:.18em;
    text-shadow:0 0 24px rgba(139,233,255,.48);
}

.birthday-page--no .birthday-page-content{
    min-height:70vh;
    align-content:center;
    gap:clamp(8px, 1.5vw, 14px);
}

.birthday-page-answer--no{
    font-size:clamp(9rem, 32vw, 22rem);
    line-height:.85;
    letter-spacing:.04em;
    background:linear-gradient(180deg, #fff 5%, var(--secondary) 62%, var(--primary) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 24px rgba(75,163,255,.32));
}

.birthday-page-countdown-label{
    color:var(--text-muted);
    font-family:"Cinzel", serif;
    font-size:clamp(1rem, 2.2vw, 1.35rem);
    letter-spacing:.08em;
}

.birthday-page-countdown{
    color:var(--text);
    font-family:"Cinzel", serif;
    font-size:clamp(1.45rem, 4vw, 2.6rem);
    font-variant-numeric:tabular-nums;
    letter-spacing:.05em;
    text-shadow:0 0 18px rgba(139,233,255,.28);
}

.birthday-cinematic{
    position:fixed;
    inset:0;
    z-index:10000;
    overflow:hidden;
    isolation:isolate;
    background:#000;
    opacity:1;
}

.birthday-cinematic-image-stage,
.birthday-calendar-scene{
    position:absolute;
    inset:0;
}

.birthday-cinematic-image-stage{
    z-index:1;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#000;
}

.birthday-cinematic-image{
    width:100vw;
    height:100vh;
    max-width:none;
    object-fit:contain;
    opacity:0;
    transform-origin:center;
    will-change:transform, opacity;
}

.birthday-calendar-scene{
    z-index:3;
    display:grid;
    place-items:center;
    padding:24px;
    background:#000;
    opacity:1;
    transition:opacity 700ms ease;
}

.birthday-calendar-scene--leaving{
    opacity:0;
    pointer-events:none;
}

.birthday-calendar-panel{
    position:relative;
    width:min(72vw, 430px);
    aspect-ratio:1;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:1px solid rgba(139,233,255,.72);
    border-radius:clamp(18px, 4vw, 32px);
    background:
        linear-gradient(145deg, rgba(16,50,83,.9), rgba(3,17,34,.82)),
        rgba(8,26,44,.88);
    box-shadow:
        inset 0 0 44px rgba(75,163,255,.12),
        0 0 42px rgba(75,163,255,.3);
    backdrop-filter:blur(16px);
}

.birthday-calendar-panel::before{
    content:"";
    position:absolute;
    inset:10%;
    border:1px solid rgba(129,197,255,.16);
    border-radius:50%;
    box-shadow:0 0 30px rgba(75,163,255,.12);
}

.birthday-calendar-number{
    position:absolute;
    color:var(--text);
    font-family:"Cinzel Decorative", "Cinzel", serif;
    font-size:clamp(8rem, 33vw, 15rem);
    line-height:1;
    text-shadow:0 0 32px rgba(139,233,255,.45);
    will-change:transform;
}

.birthday-calendar-one{
    transform:translateY(0);
}

.birthday-calendar-zero{
    transform:translateY(-135%);
}

.birthday-calendar-one--leaving,
.birthday-calendar-zero--arriving{
    transition:transform 700ms cubic-bezier(.65, 0, .35, 1);
}

.birthday-calendar-one--leaving{
    transform:translateY(135%);
}

.birthday-calendar-zero--arriving{
    transform:translateY(0);
}

.birthday-start-button{
    position:absolute;
    z-index:6;
    left:50%;
    bottom:clamp(28px, 8vh, 72px);
    transform:translateX(-50%);
    min-width:190px;
    padding:14px 22px;
    border:1px solid var(--secondary);
    border-radius:999px;
    background:rgba(8,26,44,.9);
    color:var(--text);
    font:700 .95rem/1 "Cinzel", serif;
    letter-spacing:.06em;
    box-shadow:var(--shadow-button);
    cursor:pointer;
}

.birthday-start-button[hidden]{
    display:none;
}

.birthday-confetti{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}

.birthday-cinematic--leaving{
    opacity:0;
    transition:opacity 1100ms cubic-bezier(.4, 0, .2, 1);
    pointer-events:none;
}

html.birthday-cinematic-active,
body.birthday-cinematic-active{
    overflow:hidden;
    overscroll-behavior:none;
}

@media (max-width:600px){
    .birthday-page{
        min-height:100vh;
        padding-top:96px;
    }

    .birthday-calendar-panel{
        width:min(78vw, 350px);
    }
}

@media (prefers-reduced-motion:reduce){
    .birthday-calendar-one--leaving,
    .birthday-calendar-zero--arriving{
        transition-duration:420ms;
    }

    .birthday-cinematic-image{
        will-change:opacity;
    }
}