/* =========================
   BASIC RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================
   INTRO
========================= */

.intro {
    width: 100%;
    height: 100vh;

    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle at 50% 70%,
            #171b50 0%,
            #0c1030 38%,
            #050718 75%,
            #02030c 100%
        );

    color: white;
}


/* =========================
   BACKGROUND GLOW
========================= */

.background-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.18;

    pointer-events: none;
}

.glow-one {
    background: #6054ff;

    left: -150px;
    top: 20%;
}

.glow-two {
    background: #ff4e9b;

    right: -180px;
    bottom: -100px;
}


/* =========================
   HUGE AGE
========================= */

.age-background {
    position: absolute;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    font-size: clamp(16rem, 40vw, 38rem);
    font-weight: 900;

    line-height: 1;

    color: rgba(255, 255, 255, 0.08);

    letter-spacing: -25px;

    user-select: none;

    animation: ageEntrance 2.2s ease forwards;
}


@keyframes ageEntrance {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.5);

        filter: blur(25px);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter: blur(0);
    }

}


/* =========================
   BIRTHDAY CONTENT
========================= */

.birthday-content {
    position: relative;

    z-index: 10;

    text-align: center;

    transform: translateY(70px);
}


.little-text {
    margin-bottom: 12px;

    font-size: clamp(
        0.7rem,
        1.2vw,
        0.95rem
    );

    letter-spacing: 5px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        fadeUp 1s ease 0.6s forwards;
}


/* HAPPY BIRTHDAY */

.birthday-content h1 {
    display: flex;
    flex-direction: column;

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

    line-height: 0.82;

    font-weight: 900;

    letter-spacing: -4px;

    text-shadow:
        0 5px 20px rgba(255,255,255,0.15),
        0 0 45px rgba(255,255,255,0.08);
}


.birthday-content h1 span:first-child {

    opacity: 0;

    transform:
        translateX(-120px)
        scale(0.7);

    animation:
        birthdayLeft 1.2s
        cubic-bezier(.18,.89,.32,1.28)
        1.1s forwards;
}


.birthday-content h1 span:last-child {

    opacity: 0;

    transform:
        translateX(120px)
        scale(0.7);

    animation:
        birthdayRight 1.2s
        cubic-bezier(.18,.89,.32,1.28)
        1.3s forwards;
}


@keyframes birthdayLeft {

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


@keyframes birthdayRight {

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


/* =========================
   INTRO DESCRIPTION
========================= */

.intro-description {
    max-width: 580px;
    margin: 18px auto 8px;
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 300;
    letter-spacing: 0.5px;
    opacity: 0;
    animation: fadeUp 1.2s ease 1.5s forwards;
    padding: 0 16px;
    text-align: center;
}


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

.cake {

    margin-top: 25px;

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

    opacity: 0;

    transform:
        translateY(70px)
        scale(0.3);

    animation:
        cakeEntrance 1s
        cubic-bezier(.34,1.56,.64,1)
        2.2s forwards;
}


@keyframes cakeEntrance {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================
   BESTIE TEXT
========================= */

.bestie-text {

    margin-top: 13px;

    letter-spacing: 8px;

    font-size: clamp(
        0.8rem,
        1.7vw,
        1.3rem
    );

    opacity: 0;

    animation:
        fadeUp 1s ease
        2.7s forwards;
}


/* =========================
   BALLOONS
========================= */

.balloon {

    position: absolute;

    bottom: -250px;

    z-index: 5;

    animation:
        balloonRise linear forwards;

    pointer-events: none;
}


.balloon-body {

    width: clamp(
        65px,
        8vw,
        120px
    );

    height: clamp(
        85px,
        10vw,
        150px
    );

    border-radius:
        50% 50%
        48% 48%;

    position: relative;

    box-shadow:

        inset -18px -15px 25px
        rgba(0,0,0,0.2),

        inset 12px 8px 20px
        rgba(255,255,255,0.25),

        0 15px 30px
        rgba(0,0,0,0.25);

    animation:
        balloonSway 3s ease-in-out
        infinite alternate;
}


/* Balloon shine */

.balloon-body::before {

    content: "";

    position: absolute;

    width: 18%;
    height: 25%;

    left: 22%;
    top: 15%;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.4);

    filter: blur(3px);
}


/* Balloon knot */

.balloon-body::after {

    content: "";

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 0;
    height: 0;

    border-left:
        7px solid transparent;

    border-right:
        7px solid transparent;

    border-top:
        13px solid currentColor;
}


/* String */

.balloon-string {

    width: 1px;

    height: 130px;

    margin: 8px auto 0;

    background:
        rgba(255,255,255,0.5);
}


/* BALLOON COLORS */

.balloon-1 {

    left: 7%;

    animation-duration: 7.3s;
    animation-delay: 0.3s;

    color: #ff69b4;
}

.balloon-1 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #ff9acb,
            #d83f8b
        );
}


.balloon-2 {

    left: 22%;

    animation-duration: 8.5s;
    animation-delay: 1.3s;

    color: #60e68d;
}

.balloon-2 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #91ffa8,
            #24b85c
        );
}


.balloon-3 {

    left: 38%;

    animation-duration: 7.8s;
    animation-delay: 0.8s;

    color: #ffd659;
}

.balloon-3 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #fff08c,
            #e6a922
        );
}


.balloon-4 {

    left: 53%;

    animation-duration: 9s;
    animation-delay: 2s;

    color: #ff6e63;
}

.balloon-4 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #ff9a89,
            #e8483d
        );
}


.balloon-5 {

    left: 68%;

    animation-duration: 7.6s;
    animation-delay: 0.4s;

    color: #42d4ff;
}

.balloon-5 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #72e7ff,
            #168bc4
        );
}


.balloon-6 {

    left: 82%;

    animation-duration: 8.3s;
    animation-delay: 1.6s;

    color: #ffcc4d;
}

.balloon-6 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #ffe587,
            #eeaa18
        );
}


.balloon-7 {

    left: 91%;

    animation-duration: 9.4s;
    animation-delay: 2.3s;

    color: #a77cff;
}

.balloon-7 .balloon-body {
    background:
        linear-gradient(
            135deg,
            #cba9ff,
            #7545d2
        );
}


/* Rising animation */

@keyframes balloonRise {

    0% {
        bottom: -250px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    100% {
        bottom: 115vh;
        opacity: 1;
    }

}


/* Side movement */

@keyframes balloonSway {

    0% {
        transform:
            translateX(-15px)
            rotate(-4deg);
    }

    100% {
        transform:
            translateX(15px)
            rotate(4deg);
    }

}


/* =========================
   SMALL STAR PARTICLES
========================= */

.star {

    position: absolute;

    width: 3px;
    height: 3px;

    background: white;

    border-radius: 50%;

    opacity: 0.6;

    animation:
        starTwinkle
        2.5s infinite alternate;
}


@keyframes starTwinkle {

    0% {
        opacity: 0.15;
        transform: scale(0.5);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.5);
    }

}


/* =========================
   BOTTOM TEXT
========================= */

.intro-hint {

    position: absolute;

    bottom: 28px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 12;

    font-size: 0.75rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0;

    white-space: nowrap;

    animation:
        fadeUp
        1.5s ease
        3.4s forwards;
}


/* GENERIC FADE */

@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 0.65;

        transform:
            translateY(0);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .age-background {

        font-size: 65vw;

        letter-spacing: -15px;
    }


    .birthday-content {

        transform:
            translateY(30px);
    }


    .birthday-content h1 {

        font-size: clamp(
            3.2rem,
            18vw,
            5rem
        );

        letter-spacing: -3px;
    }


    .little-text {

        letter-spacing: 3px;

        font-size: 0.6rem;
    }


    .bestie-text {

        letter-spacing: 5px;
    }


    .balloon-string {

        height: 90px;
    }


    .balloon-7 {
        display: none;
    }


    .intro-hint {

        font-size: 0.55rem;

        letter-spacing: 2px;
    }

}


/* =========================
   REDUCED MOTION SUPPORT
========================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* =====================================================
   PART 2 - COUNTING THE YEARS
===================================================== */


/* -------------------------
   FADE FIRST INTRO
------------------------- */

.birthday-content,
.balloon,
.intro-hint,
.age-background {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        filter 0.8s ease;
}


.intro.celebration-out .birthday-content {
    opacity: 0;

    transform:
        translateY(50px)
        scale(0.92);

    filter: blur(10px);
}


.intro.celebration-out .balloon {
    opacity: 0 !important;
}


.intro.celebration-out .intro-hint {
    opacity: 0 !important;
}


.intro.celebration-out .age-background {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(1.3);

    filter: blur(25px);
}


/* =====================================================
   COUNTER SCREEN
===================================================== */

.counter-screen {

    position: absolute;

    inset: 0;

    z-index: 40;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}


.counter-screen.active {

    opacity: 1;

    visibility: visible;
}


/* =====================================================
   BIG NUMBER
===================================================== */

.counter-number {

    position: relative;

    font-size: clamp(
        15rem,
        36vw,
        36rem
    );

    line-height: 0.8;

    font-weight: 900;

    letter-spacing: -25px;

    color:
        rgba(255,255,255,0.82);

    text-shadow:

        0 0 25px
        rgba(255,255,255,0.08),

        0 0 80px
        rgba(100,110,255,0.12);

    user-select: none;

    will-change:
        transform,
        opacity,
        filter;
}


/* Every number changes with this */

.counter-number.tick {

    animation:
        numberTick
        0.16s ease-out;
}


@keyframes numberTick {

    0% {

        opacity: 0;

        transform:
            scale(1.35);

        filter:
            blur(25px);
    }


    45% {

        opacity: 1;

        filter:
            blur(3px);
    }


    100% {

        opacity: 1;

        transform:
            scale(1);

        filter:
            blur(0);
    }

}


/* =====================================================
   COUNTING THE YEARS TEXT
===================================================== */

.counter-label {

    position: absolute;

    top: 76%;

    font-size: clamp(
        0.55rem,
        1vw,
        0.85rem
    );

    font-weight: 600;

    letter-spacing: 8px;

    color:
        rgba(255,255,255,0.65);

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


/* =====================================================
   FINAL GOLDEN AGE
===================================================== */

.counter-number.final-glow {

    color: transparent;

    background:

        linear-gradient(
            180deg,

            #fffce0 0%,

            #fff0a8 17%,

            #ffc94d 39%,

            #ff922b 63%,

            #ff5b18 82%,

            #ffc843 100%
        );

    background-size:
        100% 220%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    animation:

        goldenMove
        1.2s ease-in-out
        infinite alternate,

        finalPulse
        1.6s ease-in-out
        infinite;

    filter:

        drop-shadow(
            0 0 15px
            rgba(255,201,77,0.7)
        )

        drop-shadow(
            0 0 45px
            rgba(255,110,20,0.55)
        )

        drop-shadow(
            0 0 100px
            rgba(255,100,20,0.35)
        );
}


@keyframes goldenMove {

    from {

        background-position:
            50% 0%;
    }

    to {

        background-position:
            50% 100%;
    }

}


@keyframes finalPulse {

    0%,
    100% {

        transform:
            scale(1);
    }


    50% {

        transform:
            scale(1.035);
    }

}


/* =====================================================
   FINAL LABEL
===================================================== */

.counter-label.final-label {

    color:
        rgba(255,224,150,0.85);

    letter-spacing:
        10px;

    transform:
        translateY(10px);
}


/* =====================================================
   ZOOM TRANSITION
===================================================== */

.counter-screen.zoom-away
.counter-number {

    animation:
        ageZoomAway
        1.25s
        cubic-bezier(.65,.02,.9,.45)
        forwards;
}


@keyframes ageZoomAway {

    0% {

        opacity: 1;

        transform:
            scale(1);

        filter:
            blur(0);
    }


    45% {

        opacity: 1;

        transform:
            scale(2.2);

        filter:
            blur(4px);
    }


    100% {

        opacity: 0;

        transform:
            scale(9);

        filter:
            blur(35px);
    }

}


.counter-screen.zoom-away
.counter-label {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        0.4s ease;
}


/* =====================================================
   SPARK PARTICLES
===================================================== */

.spark-layer {

    position: absolute;

    inset: 0;

    z-index: 45;

    overflow: hidden;

    pointer-events: none;
}


.spark {

    position: absolute;

    left: 50%;

    top: 50%;

    width:
        var(--size);

    height:
        var(--size);

    border-radius: 50%;

    background:
        #ffd76a;

    box-shadow:

        0 0 8px
        #ffd76a,

        0 0 18px
        #ff9f32,

        0 0 30px
        rgba(255,100,30,0.7);

    opacity: 0;

    animation:

        sparkBurst
        var(--duration)
        cubic-bezier(.12,.5,.3,1)
        var(--delay)
        forwards;
}


@keyframes sparkBurst {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(0,0)
            scale(0);
    }


    15% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            translate(
                calc(var(--x) * 0.15),
                calc(var(--y) * 0.15)
            )
            scale(1.7);
    }


    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(
                var(--x),
                var(--y)
            )
            scale(0.15);
    }

}


/* =====================================================
   WHITE/GOLD FLASH DURING ZOOM
===================================================== */

.transition-flash {

    position: absolute;

    inset: 0;

    z-index: 42;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(

            circle at center,

            rgba(
                255,
                229,
                170,
                0.85
            )
            0%,

            rgba(
                255,
                167,
                70,
                0.22
            )
            22%,

            transparent
            60%

        );
}


.transition-flash.active {

    animation:
        transitionFlash
        1.2s ease-out
        forwards;
}


@keyframes transitionFlash {

    0% {

        opacity: 0;
    }


    35% {

        opacity: 0.7;
    }


    100% {

        opacity: 0;
    }

}


/* =====================================================
   AFTER THE NUMBER DISAPPEARS
===================================================== */

.intro.particle-phase {

    background:

        radial-gradient(
            circle at center,
            #171b48 0%,
            #080c28 45%,
            #02030d 100%
        );
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .counter-number {

        font-size:
            clamp(
                12rem,
                65vw,
                20rem
            );

        letter-spacing:
            -15px;
    }


    .counter-label {

        top: 72%;

        letter-spacing:
            5px;

        font-size:
            0.55rem;
    }

}
/* =====================================================
   PART 3
   BIRTHDAY MEMORY PAGE
===================================================== */

.memory-page {

    position: fixed;

    inset: 0;

    z-index: 100;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,255,255,0.9),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f3efe4,
            #ebe6d9
        );

    color: #171717;

    transform:
        translateY(100%);

    visibility: hidden;

    transition:

        transform
        1.45s
        cubic-bezier(.76,0,.24,1),

        visibility 0s
        1.45s;
}


/* page slides upward */

.memory-page.show {

    visibility: visible;

    transform:
        translateY(0);

    transition:

        transform
        1.45s
        cubic-bezier(.76,0,.24,1),

        visibility 0s;
}


/* =====================================================
   PAPER TEXTURE
===================================================== */

.paper-noise {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.025) 0px,
            rgba(0,0,0,0.025) 1px,
            transparent 1px,
            transparent 4px
        );

}


/* =====================================================
   HEADING
===================================================== */

.memory-heading {

    position: absolute;

    left: clamp(
        40px,
        6vw,
        110px
    );

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 20;

    width: min(
        440px,
        38vw
    );
}


/* small top text */

.memory-date {

    margin-bottom: 28px;

    font-size:
        clamp(
            0.55rem,
            0.8vw,
            0.8rem
        );

    font-weight: 600;

    letter-spacing: 5px;

    opacity: 0;

    transform:
        translateY(20px);
}


/* main birthday text */

.memory-heading h2 {

    display: flex;

    flex-direction: column;

    line-height: 0.84;

    font-size:
        clamp(
            4rem,
            7.8vw,
            9rem
        );

    letter-spacing: -7px;

    font-weight: 800;
}


.memory-heading h2 span {

    opacity: 0;

    transform:
        translateY(50px);
}


/* name */

.memory-heading
.bestie-name {

    color: #e79a12;

    font-weight: 800;
}


/* small line */

.heading-line {

    width: 0;

    height: 2px;

    margin-top: 30px;

    background:
        rgba(0,0,0,0.25);
}


/* birthday message */

.memory-message {

    max-width: 380px;

    margin-top: 22px;

    font-size:
        clamp(
            0.75rem,
            1vw,
            1rem
        );

    line-height: 1.7;

    opacity: 0;

    transform:
        translateY(20px);

    color:
        rgba(20,20,20,0.65);
}


/* cursor hint */

.cursor-instruction {

    margin-top: 32px;

    font-size:
        0.68rem;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0;

    color:
        rgba(0,0,0,0.45);
}


/* =====================================================
   HEADING ANIMATIONS
===================================================== */

.memory-page.show
.memory-date {

    animation:

        memoryTextUp
        0.8s ease
        1s forwards;
}


.memory-page.show
.memory-heading h2
span:nth-child(1) {

    animation:

        memoryTextUp
        0.9s
        cubic-bezier(.22,1,.36,1)
        1.15s forwards;
}


.memory-page.show
.memory-heading h2
span:nth-child(2) {

    animation:

        memoryTextUp
        0.9s
        cubic-bezier(.22,1,.36,1)
        1.28s forwards;
}


.memory-page.show
.memory-heading h2
span:nth-child(3) {

    animation:

        memoryTextUp
        0.9s
        cubic-bezier(.22,1,.36,1)
        1.41s forwards;
}


.memory-page.show
.heading-line {

    animation:

        lineGrow
        1s ease
        1.7s forwards;
}


.memory-page.show
.memory-message {

    animation:

        memoryTextUp
        0.8s ease
        1.85s forwards;
}


.memory-page.show
.cursor-instruction {

    animation:

        memoryTextUp
        0.8s ease
        2.15s forwards;
}


@keyframes memoryTextUp {

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes lineGrow {

    to {

        width: 100%;
    }

}


/* =====================================================
   CURSOR PHOTO TRAIL
===================================================== */

.photo-trail-layer {

    position: absolute;

    inset: 0;

    z-index: 15;

    pointer-events: none;

    overflow: hidden;
}


.trail-photo {

    position: absolute;

    left: 0;
    top: 0;

    width:
        clamp(
            110px,
            10vw,
            175px
        );

    aspect-ratio: 4 / 5;

    padding:
        7px 7px 22px;

    background:
        #fdfbf4;

    border:
        1px solid
        rgba(0,0,0,0.08);

    box-shadow:

        0 15px 35px
        rgba(30,25,15,0.18);

    transform:

        translate(
            -50%,
            -50%
        )

        rotate(
            var(--rotation)
        )

        scale(0.35);

    opacity: 0;

    animation:

        trailPhotoLife
        2.2s
        cubic-bezier(.2,.8,.2,1)
        forwards;

    will-change:
        transform,
        opacity;
}


.trail-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    pointer-events: none;

    user-select: none;
}


/* =====================================================
   TRAIL FLOATING MESSAGE BADGE
===================================================== */

.trail-floating-badge {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(14, 18, 45, 0.88);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #fff4cf;
    padding: 5px 12px;
    border-radius: 20px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: clamp(0.68rem, 0.95vw, 0.82rem);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}


@keyframes trailPhotoLife {

    0% {

        opacity: 0;

        transform:

            translate(
                -50%,
                -50%
            )

            rotate(
                var(--rotation)
            )

            scale(0.25);
    }


    15% {

        opacity: 1;

        transform:

            translate(
                -50%,
                -50%
            )

            rotate(
                var(--rotation)
            )

            scale(1);
    }


    72% {

        opacity: 1;
    }


    100% {

        opacity: 0;

        transform:

            translate(
                -50%,
                calc(-50% - 35px)
            )

            rotate(
                var(--rotation)
            )

            scale(0.88);
    }

}


/* =====================================================
   STATIC CURVED MEMORY STRIP
===================================================== */

.memory-strip {

    position: absolute;

    right: 4%;
    bottom: 4%;

    width: 58%;
    height: 44%;

    z-index: 5;

    pointer-events: none;
}


.strip-photo {

    position: absolute;

    width:
        clamp(
            70px,
            7vw,
            120px
        );

    aspect-ratio: 1;

    padding: 5px;

    background:
        #f8f4e9;

    box-shadow:

        0 8px 18px
        rgba(20,20,20,0.15);

    opacity: 0;

    transform:
        translateY(80px)
        rotate(
            var(--angle)
        );
}


.strip-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.strip-1 {

    left: 0%;
    bottom: 2%;

    --angle: -8deg;
}


.strip-2 {

    left: 17%;
    bottom: 5%;

    --angle: 4deg;
}


.strip-3 {

    left: 34%;
    bottom: 10%;

    --angle: -5deg;
}


.strip-4 {

    left: 51%;
    bottom: 20%;

    --angle: 7deg;
}


.strip-5 {

    left: 67%;
    bottom: 33%;

    --angle: -6deg;
}


.strip-6 {

    left: 82%;
    bottom: 50%;

    --angle: 5deg;
}


/* strip entrance */

.memory-page.show
.strip-photo {

    animation:

        stripPhotoIn
        0.9s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


.memory-page.show
.strip-1 {

    animation-delay: 1.3s;
}


.memory-page.show
.strip-2 {

    animation-delay: 1.42s;
}


.memory-page.show
.strip-3 {

    animation-delay: 1.54s;
}


.memory-page.show
.strip-4 {

    animation-delay: 1.66s;
}


.memory-page.show
.strip-5 {

    animation-delay: 1.78s;
}


.memory-page.show
.strip-6 {

    animation-delay: 1.9s;
}


@keyframes stripPhotoIn {

    to {

        opacity: 0.88;

        transform:

            translateY(0)

            rotate(
                var(--angle)
            );
    }

}


/* =====================================================
   BOTTOM HINT
===================================================== */

.memory-bottom-hint {

    position: absolute;

    bottom: 24px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 30;

    font-size: 0.6rem;

    font-weight: 600;

    letter-spacing: 4px;

    white-space: nowrap;

    opacity: 0;

    color:
        rgba(0,0,0,0.35);
}


.memory-page.show
.memory-bottom-hint {

    animation:

        bottomHintIn
        1s ease
        2.5s forwards;
}


@keyframes bottomHintIn {

    to {

        opacity: 1;
    }

}


/* =====================================================
   MOBILE VERSION
===================================================== */

@media (
    max-width: 700px
) {

    .memory-heading {

        left: 24px;

        top: 17%;

        transform: none;

        width:
            calc(100% - 48px);
    }


    .memory-date {

        margin-bottom: 17px;
    }


    .memory-heading h2 {

        font-size:
            clamp(
                3.2rem,
                16vw,
                5.3rem
            );

        line-height: 0.88;

        letter-spacing:
            -4px;
    }


    .heading-line {

        margin-top: 22px;
    }


    .memory-message {

        width: 85%;

        font-size:
            0.75rem;
    }


    .cursor-instruction {

        margin-top: 18px;

        font-size: 0.55rem;
    }


    .cursor-instruction::after {

        content:
            " / DRAG YOUR FINGER";
    }


    .memory-strip {

        width: 100%;

        height: 35%;

        right: 0;

        bottom: 2%;
    }


    .strip-photo {

        width:
            clamp(
                60px,
                19vw,
                88px
            );
    }


    .strip-1 {

        left: 4%;

        bottom: 2%;
    }


    .strip-2 {

        left: 20%;

        bottom: 12%;
    }


    .strip-3 {

        left: 37%;

        bottom: 3%;
    }


    .strip-4 {

        left: 53%;

        bottom: 17%;
    }


    .strip-5 {

        left: 69%;

        bottom: 7%;
    }


    .strip-6 {

        left: 83%;

        bottom: 27%;
    }


    .trail-photo {

        width:
            clamp(
                90px,
                28vw,
                125px
            );
    }


    .memory-bottom-hint {

        display: none;
    }

}
/* =====================================================
   PART 4
   DRAGGABLE POLAROID PAGE
===================================================== */


/* =====================================================
   PART 3 LEAVES UPWARD
===================================================== */

.memory-page.slide-up-out {

    transform:
        translateY(-100%);

    transition:

        transform
        1.35s
        cubic-bezier(.76,0,.24,1);
}


/* =====================================================
   MAIN POLAROID PAGE
===================================================== */

.polaroid-page {

    position: fixed;

    inset: 0;

    z-index: 200;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,0.8),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #f3eee2,
            #e8e0d1
        );

    color: #181818;

    visibility: hidden;

    transform:
        translateY(100%);

    transition:

        transform
        1.35s
        cubic-bezier(.76,0,.24,1),

        visibility 0s
        1.35s;

    touch-action: none;
}


/* Page appears */

.polaroid-page.show {

    visibility: visible;

    transform:
        translateY(0);

    transition:

        transform
        1.35s
        cubic-bezier(.76,0,.24,1),

        visibility 0s;
}


/* =====================================================
   PAPER TEXTURE
===================================================== */

.polaroid-paper-texture {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.17;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(60,45,20,0.025) 0px,
            rgba(60,45,20,0.025) 1px,
            transparent 1px,
            transparent 5px
        );
}


/* =====================================================
   HEADING
===================================================== */

.polaroid-heading {

    position: absolute;

    left: 50%;

    top: 8%;

    transform:
        translateX(-50%);

    z-index: 220;

    text-align: center;

    width: 90%;

    pointer-events: none;
}


.polaroid-small-title {

    font-size:
        clamp(
            0.5rem,
            0.75vw,
            0.75rem
        );

    font-weight: 600;

    letter-spacing: 5px;

    opacity: 0;
}


.polaroid-heading h2 {

    margin-top: 10px;

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

    line-height: 1;

    letter-spacing: -3px;

    opacity: 0;

    transform:
        translateY(30px);
}


.polaroid-heading > p:last-child {

    margin-top: 14px;

    font-size:
        clamp(
            0.7rem,
            1vw,
            0.95rem
        );

    color:
        rgba(20,20,20,0.55);

    opacity: 0;
}


/* Heading animation */

.polaroid-page.show
.polaroid-small-title {

    animation:
        polaroidHeadingIn
        0.8s ease
        0.8s forwards;
}


.polaroid-page.show
.polaroid-heading h2 {

    animation:
        polaroidHeadingIn
        0.9s
        cubic-bezier(.22,1,.36,1)
        0.95s forwards;
}


.polaroid-page.show
.polaroid-heading > p:last-child {

    animation:
        polaroidHeadingIn
        0.8s ease
        1.15s forwards;
}


@keyframes polaroidHeadingIn {

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =====================================================
   POLAROID CARDS
===================================================== */

.draggable-polaroid {

    position: absolute;

    z-index: 210;

    width:
        clamp(
            130px,
            14vw,
            210px
        );

    padding:

        10px
        10px
        38px;

    background:
        #fbf8ef;

    border:

        1px solid
        rgba(40,30,15,0.08);

    box-shadow:

        0 15px 30px
        rgba(35,27,15,0.17),

        0 3px 8px
        rgba(35,27,15,0.1);

    cursor: grab;

    user-select: none;

    touch-action: none;

    opacity: 0;

    transform:

        rotate(
            calc(
                var(--rotation)
                * 1deg
            )
        )

        scale(0.7);

    transition:

        box-shadow
        0.25s ease,

        filter
        0.25s ease;

    will-change:
        left,
        top,
        transform;
}


/* photo */

.draggable-polaroid img {

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    display: block;

    pointer-events: none;

    user-select: none;

    filter:

        saturate(0.92)
        contrast(0.97);
}


/* handwritten style caption */

.draggable-polaroid p {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 10px;

    text-align: center;

    font-family:

        "Comic Sans MS",
        "Segoe Print",
        cursive;

    font-size:
        clamp(
            0.75rem,
            1.2vw,
            1rem
        );

    transform:
        rotate(-2deg);

    color:
        #26201b;

    pointer-events: none;
}


/* decoration */

.polaroid-pin {

    position: absolute;

    right: -9px;

    top: -13px;

    z-index: 5;

    font-size:
        1.5rem;

    color:
        #d16b79;

    transform:
        rotate(14deg);

    pointer-events: none;
}


/* =====================================================
   POLAROID ENTRANCE
===================================================== */

.polaroid-page.show
.draggable-polaroid {

    animation:

        polaroidDropIn
        0.85s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


@keyframes polaroidDropIn {

    0% {

        opacity: 0;

        transform:

            translateY(80px)

            rotate(
                calc(
                    var(--rotation)
                    * 1deg
                )
            )

            scale(0.65);
    }


    100% {

        opacity: 1;

        transform:

            translateY(0)

            rotate(
                calc(
                    var(--rotation)
                    * 1deg
                )
            )

            scale(1);
    }
}


/* Different entrance times */

.polaroid-card-1 {
    --rotation: -8;
    animation-delay: 1s !important;
}

.polaroid-card-2 {
    --rotation: 7;
    animation-delay: 1.12s !important;
}

.polaroid-card-3 {
    --rotation: -4;
    animation-delay: 1.24s !important;
}

.polaroid-card-4 {
    --rotation: 9;
    animation-delay: 1.36s !important;
}

.polaroid-card-5 {
    --rotation: -6;
    animation-delay: 1.48s !important;
}

.polaroid-card-6 {
    --rotation: 5;
    animation-delay: 1.6s !important;
}


/* =====================================================
   STARTING POSITIONS
===================================================== */

.polaroid-card-1 {

    left: 8%;
    top: 31%;
}


.polaroid-card-2 {

    left: 29%;
    top: 44%;
}


.polaroid-card-3 {

    left: 46%;
    top: 26%;
}


.polaroid-card-4 {

    right: 8%;
    top: 39%;
}


.polaroid-card-5 {

    left: 17%;
    top: 65%;
}


.polaroid-card-6 {

    right: 24%;
    top: 66%;
}


/* =====================================================
   WHEN USER GRABS PHOTO
===================================================== */

.draggable-polaroid.dragging {

    cursor: grabbing;

    box-shadow:

        0 32px 60px
        rgba(20,15,10,0.27),

        0 8px 18px
        rgba(20,15,10,0.15);

    filter:
        brightness(1.04);

    transform:

        rotate(
            calc(
                var(--rotation)
                * 0.4deg
            )
        )

        scale(1.07) !important;

    transition:

        transform
        0.16s ease,

        box-shadow
        0.16s ease;
}


/* =====================================================
   DRAG INSTRUCTION
===================================================== */

.polaroid-instruction {

    position: absolute;

    left: 50%;

    bottom: 10%;

    transform:
        translateX(-50%);

    z-index: 205;

    text-align: center;

    font-size: 0.6rem;

    font-weight: 600;

    letter-spacing: 4px;

    color:
        rgba(20,20,20,0.38);

    pointer-events: none;

    opacity: 0;
}


.polaroid-page.show
.polaroid-instruction {

    animation:

        instructionAppear
        1s ease
        2s forwards;
}


@keyframes instructionAppear {

    to {
        opacity: 1;
    }
}


.drag-hand {

    margin-top: 8px;

    font-size: 1.4rem;

    animation:
        handMove
        1.3s ease-in-out
        infinite alternate;
}


@keyframes handMove {

    from {

        transform:
            translateX(-12px);
    }

    to {

        transform:
            translateX(12px);
    }
}


.mobile-polaroid-text {

    display: none;
}


/* =====================================================
   NEXT PAGE HINT
===================================================== */

.polaroid-next-hint {

    position: absolute;

    right: 30px;

    bottom: 24px;

    z-index: 205;

    font-size:
        0.55rem;

    font-weight: 600;

    letter-spacing: 3px;

    color:
        rgba(20,20,20,0.35);

    pointer-events: none;

    opacity: 0;
}


.polaroid-next-hint span {

    margin-left: 8px;

    font-size: 1rem;
}


.polaroid-page.show
.polaroid-next-hint {

    animation:

        instructionAppear
        1s ease
        2.5s forwards;
}


/* =====================================================
   MOBILE
===================================================== */

@media (
    max-width: 700px
) {

    .polaroid-heading {

        top: 6%;
    }


    .polaroid-small-title {

        letter-spacing: 3px;
    }


    .polaroid-heading h2 {

        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );
    }


    .polaroid-heading > p:last-child {

        font-size: 0.65rem;
    }


    .draggable-polaroid {

        width:
            clamp(
                105px,
                30vw,
                140px
            );

        padding:

            7px
            7px
            30px;
    }


    .polaroid-card-1 {

        left: 5%;
        top: 28%;
    }


    .polaroid-card-2 {

        left: 57%;
        top: 29%;
    }


    .polaroid-card-3 {

        left: 29%;
        top: 46%;
    }


    .polaroid-card-4 {

        right: 4%;
        top: 58%;
    }


    .polaroid-card-5 {

        left: 5%;
        top: 66%;
    }


    .polaroid-card-6 {

        right: 32%;
        top: 72%;
    }


    .desktop-polaroid-text {

        display: none;
    }


    .mobile-polaroid-text {

        display: inline;
    }


    .polaroid-instruction {

        bottom: 4%;

        letter-spacing: 2px;

        font-size: 0.48rem;
    }


    .polaroid-next-hint {

        display: none;
    }

}
/* =====================================================
   PART 5
   INTERACTIVE SCRAPBOOK
===================================================== */


/* =====================================================
   POLAROID PAGE LEAVES
===================================================== */

.polaroid-page.slide-up-out {

    transform:
        translateY(-100%);

    transition:

        transform
        1.4s
        cubic-bezier(.76,0,.24,1);
}


/* =====================================================
   SCRAPBOOK PAGE
===================================================== */

.scrapbook-page {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 300;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 50%,
            #171c4b 0%,
            #090d2b 45%,
            #030511 100%
        );

    color: white;

    visibility: hidden;

    transform:
        translateY(100%);

    transition:

        transform
        1.4s
        cubic-bezier(.76,0,.24,1),

        visibility 0s 1.4s;

}


.scrapbook-page.show {

    visibility: visible;

    transform:
        translateY(0);

    transition:

        transform
        1.4s
        cubic-bezier(.76,0,.24,1),

        visibility 0s;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.scrapbook-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(140px);

    opacity: 0.12;

    pointer-events: none;
}


.scrapbook-glow-one {

    left: -160px;

    top: 30%;

    background: #764cff;
}


.scrapbook-glow-two {

    right: -170px;

    bottom: -120px;

    background: #e64c95;
}


/* =====================================================
   SCRAPBOOK STARS
===================================================== */

.scrapbook-stars {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.scrapbook-star {

    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: white;

    opacity: 0.4;

    animation:

        scrapbookStarTwinkle
        var(--star-speed)
        ease-in-out
        infinite alternate;
}


@keyframes scrapbookStarTwinkle {

    from {

        opacity: 0.12;

        transform:
            scale(0.5);
    }

    to {

        opacity: 0.85;

        transform:
            scale(1.5);
    }
}


/* =====================================================
   HEADING
===================================================== */

.scrapbook-heading {

    position: absolute;

    top: 5%;

    left: 50%;

    transform:
        translateX(-50%);

    width: 90%;

    text-align: center;

    z-index: 330;

    pointer-events: none;
}


.scrapbook-heading p {

    font-size:
        clamp(
            0.48rem,
            0.7vw,
            0.7rem
        );

    letter-spacing: 5px;

    opacity: 0;

    transform:
        translateY(15px);
}


.scrapbook-heading h2 {

    margin-top: 8px;

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

    line-height: 1;

    opacity: 0;

    transform:
        translateY(20px);
}


.scrapbook-heading span {

    display: block;

    margin-top: 8px;

    font-size:
        clamp(
            0.65rem,
            0.9vw,
            0.9rem
        );

    opacity: 0;

    color:
        rgba(255,255,255,0.55);
}


/* entrance */

.scrapbook-page.show
.scrapbook-heading p {

    animation:

        scrapbookHeadingIn
        0.8s ease
        0.8s forwards;
}


.scrapbook-page.show
.scrapbook-heading h2 {

    animation:

        scrapbookHeadingIn
        0.8s ease
        0.95s forwards;
}


.scrapbook-page.show
.scrapbook-heading span {

    animation:

        scrapbookHeadingIn
        0.8s ease
        1.1s forwards;
}


@keyframes scrapbookHeadingIn {

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =====================================================
   BOOK AREA
===================================================== */

.book-area {

    position: absolute;

    left: 50%;

    top: 55%;

    transform:
        translate(-50%, -50%);

    width:
        min(
            88vw,
            900px
        );

    perspective:
        1800px;

    z-index: 320;
}


/* =====================================================
   BOOK
===================================================== */

.scrapbook-book {

    position: relative;

    width: 100%;

    aspect-ratio:
        1.75 / 1;

    transform-style:
        preserve-3d;

    transform:

        scaleX(0.51)
        scale(0.86);

    transition:

        transform
        1.25s
        cubic-bezier(.22,1,.36,1);

    filter:

        drop-shadow(
            0 40px 40px
            rgba(0,0,0,0.42)
        );

    cursor: pointer;
}


/* Book entrance */

.scrapbook-page.show
.scrapbook-book {

    animation:

        closedBookEntrance
        1.2s
        cubic-bezier(.22,1,.36,1)
        1.15s both;
}


@keyframes closedBookEntrance {

    from {

        opacity: 0;

        transform:

            translateY(90px)

            scaleX(0.51)

            scale(0.72);
    }

    to {

        opacity: 1;

        transform:

            translateY(0)

            scaleX(0.51)

            scale(0.86);
    }
}


/* Book opened */

.scrapbook-book.open {

    cursor: default;

    transform:

        scaleX(1)

        scale(1);
}


/* =====================================================
   PAGES
===================================================== */

.book-pages {

    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    transform-style:
        preserve-3d;

    opacity: 0;

    transition:
        opacity 0.65s ease 0.35s;
}


.scrapbook-book.open
.book-pages {

    opacity: 1;
}


.book-page {

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            #efe4cb,
            #f8efd9
        );

    color:
        #332d25;
}


.book-left-page {

    border-radius:
        12px 2px 2px 12px;

    box-shadow:

        inset -18px 0 25px
        rgba(75,55,30,0.12);
}


.book-right-page {

    border-radius:
        2px 12px 12px 2px;

    box-shadow:

        inset 18px 0 25px
        rgba(75,55,30,0.12);

    transform-origin:
        left center;

    transform-style:
        preserve-3d;
}


/* paper lines */

.page-paper-lines {

    position: absolute;

    inset: 0;

    opacity: 0.11;

    background-image:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 25px,
            rgba(60,45,25,0.2) 26px
        );

    pointer-events: none;
}


/* =====================================================
   CENTER BOOK SPINE
===================================================== */

.book-spine {

    position: absolute;

    left: 50%;

    top: 0;

    width: 24px;
    height: 100%;

    transform:
        translateX(-50%);

    z-index: 30;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(55,38,20,0.23),
            transparent
        );
}


/* =====================================================
   COVER
===================================================== */

.book-cover {

    position: absolute;

    left: 50%;

    top: 0;

    width: 50%;
    height: 100%;

    z-index: 80;

    transform-origin:
        left center;

    transform:
        translateX(-50%)
        rotateY(0deg);

    transform-style:
        preserve-3d;

    background:

        linear-gradient(
            135deg,
            #263165,
            #131b4a
        );

    border-radius:
        12px;

    border:

        3px solid
        rgba(230,195,125,0.55);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    transition:

        transform
        1.25s
        cubic-bezier(.22,1,.36,1),

        opacity
        0.3s ease 0.85s;

    backface-visibility:
        hidden;

    box-shadow:

        inset 0 0 35px
        rgba(255,255,255,0.05),

        0 25px 50px
        rgba(0,0,0,0.32);
}


.scrapbook-book.open
.book-cover {

    transform:

        translateX(-50%)
        rotateY(-175deg);

    opacity: 0;
}


/* cover border */

.cover-border {

    position: absolute;

    inset: 18px;

    border:

        1px solid
        rgba(236,201,133,0.55);

    border-radius: 7px;
}


.cover-decoration {

    font-size: 1.5rem;

    margin-bottom: 18px;

    color: #e7c784;
}


.cover-small-text {

    letter-spacing: 5px;

    font-size:
        clamp(
            0.45rem,
            0.6vw,
            0.65rem
        );

    color:
        rgba(255,255,255,0.55);
}


.book-cover h2 {

    margin-top: 10px;

    font-family: Georgia, serif;

    font-size:
        clamp(
            2.1rem,
            4vw,
            4.2rem
        );

    line-height: 0.95;
}


.book-cover h2 span {

    display: block;

    color: #e7c784;

    font-style: italic;
}


.cover-heart {

    margin-top: 20px;

    font-size: 1.8rem;

    color: #e7c784;
}


.cover-open-text {

    position: absolute;

    bottom: 35px;

    letter-spacing: 4px;

    font-size: 0.55rem;

    opacity: 0.55;

    animation:
        coverOpenPulse
        1.5s
        infinite alternate;
}


@keyframes coverOpenPulse {

    from {
        opacity: 0.25;
    }

    to {
        opacity: 0.8;
    }
}


/* =====================================================
   SCRAPBOOK PHOTOS
===================================================== */

.scrapbook-photo {

    position: absolute;

    width: 42%;

    padding:

        7px
        7px
        20px;

    background: #fffaf0;

    box-shadow:

        0 13px 20px
        rgba(60,45,25,0.2);
}


.scrapbook-photo img {

    width: 100%;

    aspect-ratio:
        4 / 5;

    object-fit: cover;

    display: block;
}


.left-photo {

    left: 10%;

    top: 12%;

    transform:
        rotate(-7deg);
}


.right-photo {

    right: 10%;

    top: 11%;

    transform:
        rotate(6deg);
}


/* =====================================================
   TAPE
===================================================== */

.photo-tape {

    position: absolute;

    width: 55px;
    height: 17px;

    left: 50%;
    top: -10px;

    transform:

        translateX(-50%)
        rotate(-4deg);

    background:

        rgba(
            226,
            210,
            165,
            0.73
        );

    z-index: 4;
}


.pink-tape {

    background:

        rgba(
            232,
            175,
            183,
            0.72
        );

    transform:

        translateX(-50%)
        rotate(5deg);
}


/* =====================================================
   NOTES
===================================================== */

.scrapbook-note {

    position: absolute;

    right: 9%;

    top: 21%;

    width: 32%;

    padding: 14px;

    text-align: center;

    background:
        #f3d9a2;

    box-shadow:

        0 8px 15px
        rgba(70,50,20,0.12);

    font-family:

        "Comic Sans MS",
        "Segoe Print",
        cursive;

    font-size:
        clamp(
            0.65rem,
            1.1vw,
            1rem
        );

    transform:
        rotate(5deg);
}


.right-note {

    left: 8%;

    right: auto;

    top: 13%;

    width: 44%;

    padding: 10px 12px;

    transform:
        rotate(-4deg);

    background:
        #e7c7d2;
}


/* =====================================================
   WRITING
===================================================== */

.scrapbook-writing {

    position: absolute;

    left: 8%;

    bottom: 7%;

    width: 84%;

    max-height: 54%;

    overflow-y: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;

    line-height: 1.6;

    font-family:

        "Comic Sans MS",
        "Segoe Print",
        cursive;

    font-size:
        clamp(
            0.64rem,
            0.92vw,
            0.88rem
        );

    color:
        rgba(45,35,25,0.88);

    transform:
        rotate(-0.5deg);
}

.scrapbook-writing::-webkit-scrollbar {
    display: none;
}


.right-writing {

    left: 8%;

    bottom: 7%;

    width: 84%;

    transform:
        rotate(0.5deg);
}


/* =====================================================
   DECORATIONS
===================================================== */

.page-doodle,
.flower-decoration,
.butterfly-decoration {

    position: absolute;

    pointer-events: none;
}


.doodle-heart {

    right: 10%;

    bottom: 19%;

    font-size: 2rem;

    color: #b77078;

    transform:
        rotate(15deg);
}


.doodle-star {

    right: 17%;

    bottom: 9%;

    font-size: 1.5rem;

    color: #c99b48;
}


.flower-decoration {

    left: 7%;

    bottom: 8%;

    font-size: 2rem;

    color: #b87a91;

    transform:
        rotate(-20deg);
}


.butterfly-decoration {

    right: 11%;

    bottom: 10%;

    font-size: 2rem;

    color: #916b9e;

    transform:
        rotate(13deg);
}


/* =====================================================
   PAGE TURN EFFECT
===================================================== */

.turning-page {

    position: absolute;

    left: 50%;

    top: 0;

    width: 50%;
    height: 100%;

    z-index: 70;

    background:

        linear-gradient(
            90deg,
            #f4ead3,
            #fff8e6
        );

    transform-origin:
        left center;

    transform:

        rotateY(0deg);

    opacity: 0;

    pointer-events: none;

    border-radius:
        2px 12px 12px 2px;
}


.turning-page.turn {

    opacity: 1;

    animation:

        scrapbookPageTurn
        0.9s
        cubic-bezier(.65,.05,.36,1)
        forwards;
}


@keyframes scrapbookPageTurn {

    0% {

        transform:
            rotateY(0deg);

        box-shadow:
            -3px 0 12px
            rgba(0,0,0,0.1);
    }


    45% {

        box-shadow:
            -30px 0 35px
            rgba(0,0,0,0.23);
    }


    100% {

        transform:
            rotateY(-178deg);

        box-shadow:
            none;
    }
}


/* reverse */

.turning-page.turn-back {

    left: 0;

    transform-origin:
        right center;

    border-radius:
        12px 2px 2px 12px;

    opacity: 1;

    animation:

        scrapbookPageTurnBack
        0.9s
        cubic-bezier(.65,.05,.36,1)
        forwards;
}


@keyframes scrapbookPageTurnBack {

    from {

        transform:
            rotateY(0deg);
    }

    to {

        transform:
            rotateY(178deg);
    }
}


/* =====================================================
   CONTROLS
===================================================== */

.book-controls {

    position: absolute;

    left: 50%;

    bottom: 3.5%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap:
        clamp(
            15px,
            3vw,
            45px
        );

    z-index: 350;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.5s ease;
}


.book-controls.show {

    opacity: 1;

    visibility: visible;
}


.book-button {

    appearance: none;

    border:

        1px solid
        rgba(255,255,255,0.25);

    background:

        rgba(255,255,255,0.06);

    color: white;

    padding:

        11px
        18px;

    border-radius: 100px;

    font-size:
        0.6rem;

    letter-spacing: 2px;

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    transition:
        0.25s ease;
}


.book-button:hover {

    background:
        rgba(255,255,255,0.15);

    transform:
        translateY(-2px);
}


.book-button:disabled {

    opacity: 0.25;

    cursor: default;

    transform: none;
}


.page-counter {

    font-size: 0.7rem;

    letter-spacing: 3px;

    opacity: 0.6;
}


/* =====================================================
   INSTRUCTIONS
===================================================== */

.scrapbook-instruction {

    position: absolute;

    left: 50%;

    bottom: 4%;

    transform:
        translateX(-50%);

    z-index: 340;

    font-size: 0.55rem;

    letter-spacing: 4px;

    opacity: 0;

    white-space: nowrap;

    color:
        rgba(255,255,255,0.55);
}


.scrapbook-page.show
.scrapbook-instruction {

    animation:

        scrapbookInstructionIn
        1s ease
        2.2s forwards;
}


@keyframes scrapbookInstructionIn {

    to {

        opacity: 1;
    }
}


.scrapbook-next-hint {

    position: absolute;

    right: 25px;

    bottom: 20px;

    z-index: 330;

    font-size: 0.5rem;

    letter-spacing: 3px;

    opacity: 0;

    color:
        rgba(255,255,255,0.35);

    pointer-events: none;
}


.scrapbook-next-hint span {

    margin-left: 7px;

    font-size: 0.9rem;
}


.scrapbook-book.open
~ * {
    /* intentionally empty */
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .scrapbook-heading {

        top: 4%;
    }


    .scrapbook-heading h2 {

        font-size:
            2.7rem;
    }


    .scrapbook-heading p {

        letter-spacing: 3px;

        font-size: 0.42rem;
    }


    .scrapbook-heading span {

        font-size: 0.58rem;
    }


    .book-area {

        top: 52%;

        width: 96vw;
    }


    .scrapbook-book {

        aspect-ratio:
            1.55 / 1;

        transform:

            scaleX(0.51)

            scale(0.9);
    }


    .scrapbook-book.open {

        transform:

            scaleX(1)

            scale(1);
    }


    .book-page {

        font-size:
            0.65rem;
    }


    .scrapbook-photo {

        width: 38%;

        padding:

            4px
            4px
            11px;
    }


    .left-photo {

        left: 5%;
        top: 6%;
    }


    .right-photo {

        right: 5%;
        top: 6%;
    }


    .scrapbook-note {

        right: 4%;

        top: 8%;

        width: 48%;

        padding: 6px 8px;

        font-size: clamp(0.52rem, 2.2vw, 0.68rem);
    }


    .right-note {

        left: 4%;

        top: 8%;
    }


    .scrapbook-writing {

        left: 5%;

        bottom: 5%;

        width: 90%;

        max-height: 56%;

        overflow-y: auto;

        scrollbar-width: none;

        -ms-overflow-style: none;

        font-size:
            clamp(
                0.5rem,
                2.2vw,
                0.68rem
            );

        line-height: 1.42;
    }


    .book-cover {

        border-width: 2px;
    }


    .cover-border {

        inset: 10px;
    }


    .cover-small-text {

        letter-spacing: 3px;

        font-size: 0.36rem;
    }


    .book-cover h2 {

        font-size:
            clamp(
                1.5rem,
                8vw,
                2.7rem
            );
    }


    .cover-heart {

        font-size: 1.2rem;

        margin-top: 12px;
    }


    .cover-open-text {

        bottom: 18px;

        font-size: 0.38rem;

        letter-spacing: 2px;
    }


    .book-controls {

        bottom: 3%;

        gap: 10px;
    }


    .book-button {

        padding:
            8px 10px;

        font-size: 0.42rem;

        letter-spacing: 1px;
    }


    .page-counter {

        font-size: 0.5rem;
    }


    .scrapbook-instruction {

        bottom: 2%;

        font-size: 0.4rem;

        letter-spacing: 2px;
    }


    .scrapbook-next-hint {

        display: none;
    }

}
/* =====================================================
   PART 6
   3D MEMORY UNIVERSE
===================================================== */


/* Scrapbook moves upward */

.scrapbook-page.slide-up-out {

    transform: translateY(-100%);

    transition:
        transform
        1.5s
        cubic-bezier(.76,0,.24,1);
}


/* =====================================================
   MAIN UNIVERSE
===================================================== */

.universe-page {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 400;

    overflow: hidden;

    visibility: hidden;

    transform: translateY(100%);

    background:
        radial-gradient(
            circle at 50% 45%,
            #161d51 0%,
            #080d2c 42%,
            #02040f 100%
        );

    color: white;

    transition:
        transform
        1.5s
        cubic-bezier(.76,0,.24,1),
        visibility 0s 1.5s;
}


.universe-page.show {

    visibility: visible;

    transform: translateY(0);

    transition:
        transform
        1.5s
        cubic-bezier(.76,0,.24,1),
        visibility 0s;
}


/* =====================================================
   GLOW
===================================================== */

.universe-glow {

    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    filter: blur(160px);

    opacity: 0.12;

    pointer-events: none;
}


.universe-glow-1 {

    left: -200px;

    top: 30%;

    background: #735cff;
}


.universe-glow-2 {

    right: -220px;

    bottom: -180px;

    background: #e94d97;
}


/* =====================================================
   STAR FIELD
===================================================== */

.universe-stars {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.universe-star {

    position: absolute;

    border-radius: 50%;

    background: white;

    opacity: 0.45;

    box-shadow:
        0 0 6px
        rgba(255,255,255,0.6);

    animation:
        universeStarTwinkle
        var(--speed)
        ease-in-out
        infinite alternate;
}


@keyframes universeStarTwinkle {

    from {

        opacity: 0.12;

        transform:
            scale(0.5);
    }

    to {

        opacity: 0.9;

        transform:
            scale(1.5);
    }

}


/* =====================================================
   HEADING
===================================================== */

.universe-heading {

    position: absolute;

    top: 4%;

    left: 50%;

    transform:
        translateX(-50%);

    width: 92%;

    max-width: 850px;

    text-align: center;

    z-index: 600;

    pointer-events: none;
}


.universe-heading p {

    font-size:
        clamp(
            0.52rem,
            0.75vw,
            0.75rem
        );

    letter-spacing: 5px;

    color: rgba(255, 215, 0, 0.85);

    text-shadow: 0 0 14px rgba(255, 215, 0, 0.4);

    opacity: 0;
}


.universe-heading h2 {

    margin-top: 8px;

    font-family: Georgia, serif;

    font-size:
        clamp(
            2rem,
            3.8vw,
            4.2rem
        );

    line-height: 1.1;

    letter-spacing: -0.5px;

    background: linear-gradient(135deg, #ffffff 0%, #ffd700 60%, #ffb6c1 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 35px rgba(255, 215, 0, 0.45);

    opacity: 0;

    transform:
        translateY(20px);
}


.universe-heading span {

    display: block;

    margin-top: 10px;

    font-size:
        clamp(
            0.72rem,
            1vw,
            0.95rem
        );

    color:
        rgba(255,255,255,0.78);

    font-weight: 300;

    font-style: italic;

    opacity: 0;
}


.universe-page.show
.universe-heading p {

    animation:
        universeTextIn
        0.8s ease
        1s forwards;
}


.universe-page.show
.universe-heading h2 {

    animation:
        universeTextIn
        0.9s ease
        1.15s forwards;
}


.universe-page.show
.universe-heading span {

    animation:
        universeTextIn
        0.8s ease
        1.35s forwards;
}


@keyframes universeTextIn {

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   3D SCENE
===================================================== */

.universe-scene {

    position: absolute;

    inset: 0;

    perspective: 1200px;

    perspective-origin:
        50% 50%;

    overflow: hidden;

    z-index: 20;
}


.universe-world {

    position: absolute;

    left: 50%;
    top: 56%;

    width: 100%;
    height: 100%;

    transform:

        translate(-50%, -50%)

        rotateX(
            var(--world-x, 0deg)
        )

        rotateY(
            var(--world-y, 0deg)
        );

    transform-style:
        preserve-3d;

    transition:
        transform 0.18s ease-out;

}


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

.space-memory {

    position: absolute;

    left: 50%;
    top: 50%;

    width:
        clamp(
            105px,
            10vw,
            170px
        );

    transform-style:
        preserve-3d;

    transform:

        translate3d(
            calc(-50% + var(--x)),
            calc(-50% + var(--y)),
            var(--z)
        )

        rotateY(
            var(--rotate-y)
        )

        rotateZ(
            var(--rotate-z)
        );

    transition:
        filter 0.3s ease;

    cursor: pointer;

    will-change:
        transform;
}


/* actual floating card */

.space-memory-inner {

    position: relative;

    padding:
        6px
        6px
        24px;

    background:
        #f8f3e7;

    border:

        1px solid
        rgba(255,255,255,0.25);

    box-shadow:

        0 20px 40px
        rgba(0,0,0,0.38),

        0 0 25px
        rgba(120,150,255,0.09);

    color: #1f1b18;

    animation:

        universeFloat
        var(--float-speed)
        ease-in-out
        infinite alternate;

    transition:

        transform 0.35s
        cubic-bezier(.22,1,.36,1),

        box-shadow 0.35s ease,

        filter 0.35s ease;

    backface-visibility: hidden;
}


.space-memory img {

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    display: block;

    pointer-events: none;
}


.space-memory-caption {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 6px;

    text-align: center;

    font-family:
        "Comic Sans MS",
        "Segoe Print",
        cursive;

    font-size:
        clamp(
            0.55rem,
            0.7vw,
            0.75rem
        );

    opacity: 0.75;
}


/* floating motion */

@keyframes universeFloat {

    from {

        transform:
            translateY(-8px)
            rotateX(-2deg);
    }

    to {

        transform:
            translateY(10px)
            rotateX(3deg);
    }

}


/* hover */

.space-memory:hover
.space-memory-inner {

    transform:
        translateZ(80px)
        scale(1.18);

    box-shadow:

        0 35px 65px
        rgba(0,0,0,0.48),

        0 0 45px
        rgba(180,195,255,0.24);

    filter:
        brightness(1.08);
}


/* selected with click/tap */

.space-memory.focused {

    z-index: 999;
}


.space-memory.focused
.space-memory-inner {

    transform:
        translateZ(150px)
        scale(1.35);

    box-shadow:

        0 45px 85px
        rgba(0,0,0,0.55),

        0 0 60px
        rgba(180,195,255,0.32);
}


/* =====================================================
   INSTRUCTION
===================================================== */

.universe-instruction {

    position: absolute;

    left: 50%;

    bottom: 82px;

    transform:
        translateX(-50%);

    z-index: 460;

    font-size: 0.52rem;

    font-weight: 600;

    letter-spacing: 4px;

    white-space: nowrap;

    color:
        rgba(255,255,255,0.48);

    opacity: 0;
}


.universe-page.show
.universe-instruction {

    animation:
        universeInstructionIn
        1s ease
        2s forwards;
}


@keyframes universeInstructionIn {

    to {
        opacity: 1;
    }

}


.mobile-universe-hint {

    display: none;
}


/* =====================================================
   FINAL WISH
===================================================== */

.final-wish {

    position: absolute;

    inset: 0;

    z-index: 600;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 30px;

    background:

        radial-gradient(
            circle at center,
            rgba(10,15,45,0.94),
            rgba(2,4,15,0.98)
        );

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.08);

    transition:

        opacity 1.3s ease,

        transform 1.3s ease,

        visibility 0s 1.3s;
}


.final-wish.show {

    opacity: 1;

    visibility: visible;

    transform:
        scale(1);

    transition:

        opacity 1.3s ease,

        transform 1.3s ease,

        visibility 0s;
}


.final-small {

    font-size:
        clamp(
            0.5rem,
            0.7vw,
            0.7rem
        );

    letter-spacing: 5px;

    color:
        rgba(255,255,255,0.5);
}


.final-wish h2 {

    margin-top: 15px;

    margin-bottom: 10px;

    font-family: Georgia, serif;

    font-size:
        clamp(
            1.8rem,
            3.6vw,
            3.2rem
        );

    line-height: 1.15;

    letter-spacing: -0.5px;

    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ff8fb1 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}


/* =====================================================
   FINAL HEARTFELT MESSAGE CONTAINER & LETTER
===================================================== */

.final-message-container {

    max-width: 680px;

    width: 92%;

    max-height: 52vh;

    overflow-y: auto;

    margin: 12px auto;

    padding: 20px 28px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 215, 0, 0.25);

    border-radius: 20px;

    backdrop-filter: blur(14px);

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

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.35),
        inset 0 0 25px rgba(255, 215, 0, 0.05);

    text-align: center;

    scrollbar-width: thin;

    scrollbar-color: rgba(255, 215, 0, 0.4) transparent;
}

.final-message-container::-webkit-scrollbar {
    width: 6px;
}

.final-message-container::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.35);
    border-radius: 10px;
}

.final-paragraph {

    margin: 0 0 14px 0;

    font-size:
        clamp(
            0.88rem,
            1.3vw,
            1.05rem
        );

    line-height: 1.75;

    color: rgba(255, 255, 255, 0.88);

    font-weight: 300;
}

.final-paragraph:last-child {
    margin-bottom: 0;
}

.final-paragraph.highlight-text {

    color: #ffe082;

    font-style: italic;

    background: rgba(255, 215, 0, 0.08);

    padding: 10px 16px;

    border-radius: 12px;

    border-left: 2px solid rgba(255, 215, 0, 0.65);

    border-right: 2px solid rgba(255, 215, 0, 0.65);
}

.final-paragraph.closing-wish {

    color: #fff2c6;

    font-size:
        clamp(
            0.95rem,
            1.4vw,
            1.15rem
        );

    font-weight: 600;

    margin-top: 16px;

    text-shadow: 0 0 15px rgba(255, 215, 0, 0.35);
}

.final-signature {

    margin-top: 10px;

    margin-bottom: 8px;

    text-align: center;
}

.final-signature .sig-name {

    font-family: Georgia, serif;

    font-style: italic;

    font-size:
        clamp(
            1.3rem,
            2.2vw,
            1.8rem
        );

    font-weight: 700;

    color: #ffd700;

    letter-spacing: 1px;

    text-shadow: 0 0 18px rgba(255, 215, 0, 0.45);

    margin: 0;
}

.final-signature .sig-title {

    font-size:
        clamp(
            0.72rem,
            1vw,
            0.85rem
        );

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.65);

    margin: 4px 0 0 0;
}


.replay-button {

    margin-top: 40px;

    padding:
        13px
        24px;

    border:

        1px solid
        rgba(255,255,255,0.25);

    border-radius: 100px;

    background:
        rgba(255,255,255,0.06);

    color: white;

    letter-spacing: 3px;

    font-size: 0.6rem;

    cursor: pointer;

    transition: 0.25s ease;
}


.replay-button:hover {

    background:
        rgba(255,255,255,0.14);

    transform:
        translateY(-3px);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .universe-heading {

        top: 3%;
    }


    .universe-heading h2 {

        font-size:
            clamp(
                1.5rem,
                6.5vw,
                2.3rem
            );
    }


    .universe-heading p {

        letter-spacing: 3px;

        font-size: 0.42rem;
    }


    .universe-heading span {

        font-size: 0.65rem;
    }


    .universe-scene {

        perspective: 850px;
    }


    .space-memory {

        width:
            clamp(
                75px,
                22vw,
                110px
            );
    }


    .desktop-universe-hint {

        display: none;
    }


    .mobile-universe-hint {

        display: inline;
    }


    .universe-instruction {

        bottom: 70px !important;

        font-size: 0.42rem;
    }


    .final-wish h2 {

        font-size:
            clamp(
                1.5rem,
                5.5vw,
                2.2rem
            );

        margin-top: 10px;

        margin-bottom: 6px;
    }


    .final-message-container {

        max-height: 48vh;

        padding: 14px 16px;

        margin: 8px auto;
    }


    .final-paragraph {

        font-size: 0.82rem;

        line-height: 1.55;

        margin-bottom: 10px;
    }


    .final-small {

        font-size: 0.42rem;

        letter-spacing: 3px;
    }

}


/* =====================================================
   HIGH-POLISH ENHANCEMENTS & BUG FIXES
===================================================== */

/* Global Typography & Font Overrides */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2 {
    font-family: 'Playfair Display', 'Cinzel', Georgia, serif !important;
}

.draggable-polaroid p,
.scrapbook-note,
.scrapbook-writing,
.space-memory-caption {
    font-family: 'Caveat', 'Dancing Script', 'Segoe Print', cursive !important;
}

/* Confetti Canvas */
.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* =====================================================
   HEADER & MUSIC CONTROLS (Removed for clean, pure immersion)
===================================================== */
.top-nav-header,
.music-toggle-btn,
.music-toast,
.story-nav {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* =====================================================
   INTERACTIVE CAKE & FLICKERING CANDLE
===================================================== */
.interactive-cake-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 8px;
    z-index: 15;
    position: relative;
}

.interactive-cake {
    position: relative;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
}

.interactive-cake:hover {
    transform: scale(1.12);
}

.candle-flame {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 18px;
    background: radial-gradient(ellipse at bottom, #ffffff 0%, #ffe600 35%, #ff4500 85%);
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    box-shadow: 0 0 15px #ff8c00, 0 0 30px #ffd700, 0 0 45px #ff4500;
    animation: flameFlicker 1.2s infinite ease-in-out alternate;
    pointer-events: none;
    z-index: 2;
}

.candle-flame.extinguished {
    animation: flameOut 0.5s forwards ease-out;
}

@keyframes flameFlicker {
    0% { transform: translateX(-50%) rotate(-2deg) scale(1); filter: brightness(1); }
    50% { transform: translateX(-52%) rotate(2deg) scale(1.08, 0.94); filter: brightness(1.2); }
    100% { transform: translateX(-48%) rotate(-1deg) scale(0.96, 1.05); filter: brightness(1.1); }
}

@keyframes flameOut {
    0% { opacity: 1; transform: translateX(-50%) scale(1); }
    40% { opacity: 0.8; transform: translateX(-50%) scale(1.3, 0.4); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-15px) scale(0); filter: blur(4px); }
}

.blow-candle-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.75), rgba(255, 215, 0, 0.7));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 9px 20px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.35), 0 0 15px rgba(255, 215, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: btnGlowPulse 2.4s infinite ease-in-out;
}

.blow-candle-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.5), 0 0 25px rgba(255, 215, 0, 0.4);
}

.blow-candle-btn.blown {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.8), rgba(0, 191, 255, 0.8));
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.5);
    pointer-events: none;
}

@keyframes btnGlowPulse {
    0% { box-shadow: 0 6px 20px rgba(255, 105, 180, 0.3), 0 0 12px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 8px 28px rgba(255, 105, 180, 0.6), 0 0 24px rgba(255, 215, 0, 0.4); }
    100% { box-shadow: 0 6px 20px rgba(255, 105, 180, 0.3), 0 0 12px rgba(255, 215, 0, 0.2); }
}

/* =====================================================
   DOCTOR JI ✨ STYLING FIX
===================================================== */
.bestie-text.doctor-text,
.doctor-text {
    font-family: 'Cinzel', 'Playfair Display', serif !important;
    font-size: clamp(1.1rem, 2.8vw, 1.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: 9px !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 45%, #ff69b4 85%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 105, 180, 0.3) !important;
    display: inline-block !important;
    margin-top: 14px !important;
    opacity: 0;
    animation: fadeUp 1s ease 2.7s forwards, doctorSparkle 3s ease-in-out infinite 3.7s alternate !important;
}

@keyframes doctorSparkle {
    0% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); }
    100% { filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 105, 180, 0.6)); }
}

/* =====================================================
   CLICKABLE INTERACTIVE NEXT / HINT BUTTONS
===================================================== */
.intro-hint,
.memory-bottom-hint,
.polaroid-next-hint,
.scrapbook-next-hint {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(18, 22, 54, 0.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 10px 22px !important;
    border-radius: 40px !important;
    font-size: clamp(0.68rem, 1.2vw, 0.85rem) !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 15px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    outline: none;
    z-index: 100 !important;
}

.intro-hint:hover,
.memory-bottom-hint:hover,
.polaroid-next-hint:hover,
.scrapbook-next-hint:hover {
    transform: translateY(-3px) scale(1.03) !important;
    background: rgba(30, 38, 90, 0.85) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    color: #ffd700 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 215, 0, 0.4) !important;
}

.hint-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.intro-hint:hover .hint-arrow,
.memory-bottom-hint:hover .hint-arrow,
.polaroid-next-hint:hover .hint-arrow,
.scrapbook-next-hint:hover .hint-arrow {
    transform: scale(1.2);
}

/* Ensure hints are VISIBLE on Mobile */
@media (max-width: 700px) {
    .memory-bottom-hint,
    .polaroid-next-hint,
    .scrapbook-next-hint {
        display: inline-flex !important;
        bottom: 18px !important;
        font-size: 0.62rem !important;
        padding: 8px 16px !important;
        letter-spacing: 1px !important;
    }
}

/* =====================================================
   POLAROID TOOLBAR & PHOTO ENHANCEMENTS
===================================================== */
.polaroid-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.polaroid-tool-btn {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #4a3b32;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.polaroid-tool-btn:hover {
    background: #ffffff;
    color: #d16b79;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.draggable-polaroid {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.draggable-polaroid img {
    border-radius: 2px;
}

/* =====================================================
   SCRAPBOOK RESPONSIVENESS & READABILITY
===================================================== */
.scrapbook-writing {
    font-size: clamp(0.72rem, 1.1vw, 1rem) !important;
    line-height: 1.6 !important;
    color: #2c2523 !important;
}

.scrapbook-note {
    font-size: clamp(0.8rem, 1.25vw, 1.15rem) !important;
    font-weight: 700 !important;
}

.book-button.enter-universe-btn {
    background: linear-gradient(135deg, #ffd700, #ff69b4) !important;
    color: #0b0f2a !important;
    font-weight: 800 !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6) !important;
    animation: universeBtnPulse 1.8s infinite alternate !important;
}

@keyframes universeBtnPulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
    100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 35px rgba(255, 105, 180, 0.6); }
}

@media (max-width: 700px) {
    .scrapbook-writing {
        font-size: 0.68rem !important;
        line-height: 1.45 !important;
        bottom: 6% !important;
    }
    .scrapbook-note {
        font-size: 0.65rem !important;
        padding: 5px 7px !important;
    }
}

/* =====================================================
   3D UNIVERSE & FLOATING CARDS
===================================================== */
.open-wish-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 550;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 105, 180, 0.85));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #0c0f2b;
    padding: 12px 28px;
    border-radius: 40px;
    font-size: clamp(0.78rem, 1.3vw, 0.95rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 105, 180, 0.35);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: openWishPulse 2s infinite alternate;
}

.open-wish-btn:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.06);
    box-shadow: 0 12px 36px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 105, 180, 0.6);
}

@keyframes openWishPulse {
    0% { box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3), 0 0 15px rgba(255, 105, 180, 0.25); }
    100% { box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 105, 180, 0.5); }
}

.space-memory.focused .space-memory-inner {
    border: 2px solid #ffd700;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.8), 0 15px 40px rgba(0, 0, 0, 0.6);
    transform: scale(1.22);
}

/* =====================================================
   FINAL BIRTHDAY WISH SCREEN & ACTIONS
===================================================== */
.final-wish {
    background: radial-gradient(circle at center, rgba(16, 20, 56, 0.92) 0%, rgba(6, 8, 24, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 30px;
}

.final-wish h2 span {
    background: linear-gradient(135deg, #fff 0%, #ffd700 50%, #ff69b4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    display: inline-block;
}

.final-actions-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
    z-index: 10;
}

.wish-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 40px;
    font-size: clamp(0.72rem, 1.2vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
}

.confetti-btn {
    background: linear-gradient(135deg, #ff1493, #ffd700);
    border: none;
    color: #fff;
    box-shadow: 0 8px 25px rgba(255, 20, 147, 0.4), 0 0 18px rgba(255, 215, 0, 0.3);
}

.confetti-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(255, 20, 147, 0.6), 0 0 28px rgba(255, 215, 0, 0.5);
}

.universe-back-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.universe-back-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #ffd700;
    color: #ffd700;
    transform: translateY(-3px);
}

.final-actions-group .replay-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.final-actions-group .replay-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    transform: translateY(-3px);
}

/* =====================================================
   PHOTO LIGHTBOX MODAL
===================================================== */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.photo-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 24, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.lightbox-content {
    position: relative;
    z-index: 10;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.photo-lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close-btn {
    position: absolute;
    top: -45px;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.lightbox-close-btn:hover {
    background: #ff1493;
    border-color: #ff1493;
    transform: rotate(90deg);
}

.lightbox-img-wrapper {
    background: #ffffff;
    padding: 12px 12px 18px;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.2);
}

.lightbox-img-wrapper img {
    max-width: min(80vw, 550px);
    max-height: 65vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.lightbox-caption {
    margin-top: 14px;
    font-family: 'Caveat', 'Playfair Display', cursive;
    color: #ffffff;
    font-size: 1.35rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS FOR HEADER & MOBILE
===================================================== */
@media (max-width: 768px) {
    .top-nav-header {
        padding: 0 12px;
        top: 10px;
    }
    .story-nav {
        padding: 4px 6px;
        gap: 3px;
    }
    .final-actions-group {
        flex-direction: column;
        width: 80%;
    }
    .wish-action-btn {
        width: 100%;
    }
}


/* =====================================================
   PART 5 SCRAPBOOK PROPORTIONS & MOBILE/DESKTOP FIXES
===================================================== */

/* 1. Prevent closedBookEntrance animation from locking the book into scaleX(0.51) */
.scrapbook-page.show .scrapbook-book.open {
    animation: none !important;
    transform: translateY(0) scaleX(1) scale(1) !important;
    cursor: default !important;
}

/* 2. Desktop Book Dimensions & Landscape Proportions */
.book-area {
    width: min(88vw, 920px) !important;
    max-height: 72vh !important;
    top: 55% !important;
    z-index: 320 !important;
}

.scrapbook-book {
    aspect-ratio: 1.62 / 1 !important;
    transform-style: preserve-3d !important;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 35px rgba(230, 195, 125, 0.15)) !important;
}

/* 3. Heading positioning to NEVER collide with top navigation */
.scrapbook-heading,
.polaroid-heading,
.universe-heading {
    top: clamp(75px, 11vh, 95px) !important;
    z-index: 330 !important;
}

.scrapbook-heading p {
    font-size: clamp(0.58rem, 0.85vw, 0.85rem) !important;
    letter-spacing: 4px !important;
    color: #e7bd67 !important;
    text-shadow: 0 0 12px rgba(231, 189, 103, 0.5) !important;
}

.scrapbook-heading h2 {
    font-size: clamp(2.2rem, 5vw, 4.2rem) !important;
    margin-top: 5px !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffe39f 50%, #ffd700 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.35) !important;
}

.scrapbook-heading span {
    font-size: clamp(0.72rem, 1.2vw, 1rem) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 6px !important;
}

/* 4. Completely eliminate bottom collision: Hide instruction when book is open */
.scrapbook-book.open ~ .scrapbook-instruction,
.scrapbook-page.book-is-open .scrapbook-instruction,
.scrapbook-book.open ~ #scrapbookInstruction {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* When book is closed, instruction is centered and pulses */
.scrapbook-instruction {
    bottom: 50px !important;
    font-size: 0.72rem !important;
    letter-spacing: 3px !important;
    color: #ffd700 !important;
    background: rgba(18, 22, 54, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25) !important;
}

/* 5. Beautiful Book Controls */
.book-controls {
    bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: rgba(15, 18, 48, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    padding: 7px 20px !important;
    border-radius: 40px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2) !important;
    z-index: 350 !important;
}

.book-controls.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.book-button {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    letter-spacing: 1.5px !important;
    padding: 9px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 30px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.book-button:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.3) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

.book-button:disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
}

.page-counter {
    font-family: 'Cinzel', 'Playfair Display', serif !important;
    color: #ffd700 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    opacity: 1 !important;
    padding: 0 10px !important;
}

/* 6. Scrapbook Page Interior Aesthetics (Photo Frames, Washi Tape, Ink Writing) */
.book-page {
    background: linear-gradient(135deg, #fbf7ee 0%, #f4ecdc 50%, #eee2cb 100%) !important;
    box-shadow: inset 0 0 35px rgba(60, 45, 25, 0.12) !important;
}

.book-left-page {
    border-right: 1px solid rgba(60, 45, 25, 0.15) !important;
}

.book-right-page {
    border-left: 1px solid rgba(60, 45, 25, 0.15) !important;
}

.scrapbook-photo {
    width: 44% !important;
    padding: 7px 7px 22px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 28px rgba(45, 30, 15, 0.22), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.scrapbook-photo:hover {
    transform: scale(1.04) rotate(0deg) !important;
    box-shadow: 0 18px 36px rgba(45, 30, 15, 0.3), 0 0 20px rgba(255, 215, 0, 0.25) !important;
    z-index: 10 !important;
}

.scrapbook-photo img {
    border-radius: 3px !important;
}

.scrapbook-note {
    font-family: 'Caveat', cursive !important;
    font-size: clamp(0.9rem, 1.4vw, 1.3rem) !important;
    font-weight: 700 !important;
    color: #2c211b !important;
    box-shadow: 0 6px 16px rgba(50, 35, 15, 0.15) !important;
    border-radius: 4px !important;
}

.scrapbook-writing {
    font-family: 'Caveat', cursive !important;
    font-size: clamp(0.88rem, 1.25vw, 1.2rem) !important;
    line-height: 1.65 !important;
    color: #2b221c !important;
    letter-spacing: 0.5px !important;
}

/* Closed Book Cover Aesthetics */
.book-cover {
    background: linear-gradient(135deg, #1b2354 0%, #0d1338 60%, #151e4d 100%) !important;
    border: 3px solid #e7bd67 !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(231, 189, 103, 0.2) !important;
}

.cover-border {
    border: 1px solid rgba(231, 189, 103, 0.6) !important;
}

.book-cover h2 {
    font-family: 'Cinzel', 'Playfair Display', serif !important;
    color: #ffffff !important;
}

.book-cover h2 span {
    background: linear-gradient(135deg, #ffd700, #ff8da1) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.cover-open-text {
    background: rgba(231, 189, 103, 0.25) !important;
    border: 1px solid rgba(231, 189, 103, 0.5) !important;
    color: #ffd700 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    letter-spacing: 2px !important;
}

/* =====================================================
   COMPREHENSIVE MOBILE PHONE OPTIMIZATION (max-width: 768px)
===================================================== */
@media (max-width: 768px) {
    /* 0. Remove heavy dark vignette on mobile for bright, clean aesthetic */
    body::after {
        display: none !important;
    }

    /* Headings on mobile */
    .scrapbook-heading,
    .polaroid-heading,
    .universe-heading {
        top: clamp(56px, 7.5vh, 66px) !important;
        padding: 0 15px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .scrapbook-heading h2,
    .polaroid-heading h2,
    .universe-heading h2 {
        font-size: clamp(1.75rem, 7.8vw, 2.5rem) !important;
        letter-spacing: -1px !important;
    }

    /* 2. Scrapbook on mobile: generous, beautiful touch notebook */
    .book-area {
        width: 95vw !important;
        top: 53% !important;
        max-height: 60vh !important;
    }

    .scrapbook-book {
        aspect-ratio: 1.3 / 1 !important;
    }

    .scrapbook-photo {
        width: 50% !important;
        padding: 4px 4px 14px !important;
    }

    .scrapbook-note {
        font-size: 0.75rem !important;
        padding: 3px 6px !important;
        right: 4% !important;
    }

    .right-note {
        left: 4% !important;
    }

    .scrapbook-writing {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        bottom: 5% !important;
        width: 90% !important;
        left: 5% !important;
    }

    .flower-decoration,
    .butterfly-decoration,
    .doodle-heart,
    .doodle-star {
        font-size: 0.9rem !important;
    }

    .book-controls {
        bottom: 14px !important;
        gap: 10px !important;
        padding: 5px 12px !important;
    }

    .book-button {
        font-size: 0.65rem !important;
        padding: 7px 12px !important;
        letter-spacing: 1px !important;
    }

    .page-counter {
        font-size: 0.78rem !important;
        letter-spacing: 2px !important;
    }

    /* Hide next-hint when book is open to avoid colliding with book-controls */
    .scrapbook-book.open ~ .scrapbook-next-hint,
    .scrapbook-page.book-is-open .scrapbook-next-hint {
        display: none !important;
    }

    .intro-hint,
    .scrapbook-next-hint {
        bottom: clamp(16px, 2.5vh, 22px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 0.72rem !important;
        padding: 9px 20px !important;
        border-radius: 25px !important;
        white-space: nowrap !important;
    }

    /* 3. Draggable Polaroids on mobile */
    .polaroid-heading {
        top: clamp(52px, 7vh, 62px) !important;
        padding: 0 14px !important;
        width: 100% !important;
    }

    .polaroid-small-title {
        font-size: 0.62rem !important;
        letter-spacing: 2.5px !important;
        margin-bottom: 2px !important;
    }

    .polaroid-heading p {
        font-size: 0.72rem !important;
        margin-bottom: 5px !important;
    }

    .polaroid-toolbar {
        margin-top: 4px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .polaroid-tool-btn {
        padding: 4px 11px !important;
        font-size: 0.68rem !important;
        border-radius: 16px !important;
    }

    .draggable-polaroid {
        width: clamp(118px, 34vw, 142px) !important;
        padding: 6px 6px 22px !important;
        border-radius: 6px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    }

    .draggable-polaroid p {
        font-size: 0.8rem !important;
        bottom: 4px !important;
    }

    .polaroid-card-1 { left: 6% !important; top: 24.5% !important; transform: rotate(-5deg) !important; }
    .polaroid-card-2 { left: 51% !important; top: 25% !important; transform: rotate(4deg) !important; }
    .polaroid-card-3 { left: 7% !important; top: 43.5% !important; transform: rotate(3deg) !important; }
    .polaroid-card-4 { left: 52% !important; top: 44% !important; transform: rotate(-4deg) !important; }
    .polaroid-card-5 { left: 6% !important; top: 62.5% !important; transform: rotate(-3deg) !important; }
    .polaroid-card-6 { left: 51% !important; top: 63% !important; transform: rotate(5deg) !important; }

    .polaroid-instruction {
        bottom: clamp(54px, 7.5vh, 62px) !important;
        font-size: 0.58rem !important;
        letter-spacing: 1.5px !important;
        color: rgba(60, 45, 30, 0.75) !important;
    }

    .polaroid-next-hint {
        bottom: clamp(16px, 2.5vh, 22px) !important;
        font-size: 0.72rem !important;
        padding: 9px 20px !important;
        border-radius: 25px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(255, 105, 180, 0.45) !important;
        color: #d1477a !important;
        box-shadow: 0 6px 20px rgba(255, 105, 180, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        z-index: 30 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
    }

    /* 4. Memory Page on Mobile */
    .memory-heading {
        top: clamp(60px, 8.5vh, 74px) !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding: 0 16px !important;
        text-align: center !important;
    }

    .memory-heading .memory-date {
        font-size: 0.65rem !important;
        letter-spacing: 3px !important;
        margin-bottom: 3px !important;
    }

    .memory-heading h2 {
        font-size: clamp(1.95rem, 8.2vw, 2.65rem) !important;
        letter-spacing: -1.5px !important;
        line-height: 1.05 !important;
        margin: 4px 0 6px !important;
    }

    .memory-heading .heading-line {
        margin: 6px auto !important;
        width: 50px !important;
    }

    .memory-message {
        font-size: clamp(0.78rem, 2.7vw, 0.86rem) !important;
        line-height: 1.45 !important;
        max-width: 92% !important;
        margin: 0 auto !important;
    }

    .cursor-instruction {
        font-size: 0 !important;
        margin-top: 8px !important;
    }

    .cursor-instruction::before {
        content: "Tap or swipe to scatter smiles ✨";
        font-size: 0.68rem !important;
        letter-spacing: 1px !important;
        color: #8b7355 !important;
        font-weight: 500 !important;
    }

    .cursor-instruction::after {
        display: none !important;
    }

    .memory-strip {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: clamp(120px, 18vh, 150px) !important;
        bottom: clamp(64px, 9vh, 78px) !important;
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px !important;
        padding: 8px 18px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        pointer-events: auto !important;
        z-index: 20 !important;
    }

    .memory-strip::-webkit-scrollbar {
        display: none !important;
    }

    .strip-photo {
        position: static !important;
        flex: 0 0 clamp(82px, 24vw, 102px) !important;
        width: clamp(82px, 24vw, 102px) !important;
        height: clamp(82px, 24vw, 102px) !important;
        aspect-ratio: 1 !important;
        opacity: 1 !important;
        transform: rotate(calc((var(--i, 0) - 2.5) * 2deg)) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        border-radius: 6px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
    }

    .memory-bottom-hint {
        bottom: clamp(16px, 2.5vh, 22px) !important;
        font-size: 0.72rem !important;
        padding: 9px 20px !important;
        border-radius: 25px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(255, 105, 180, 0.45) !important;
        color: #d1477a !important;
        box-shadow: 0 6px 20px rgba(255, 105, 180, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        z-index: 30 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
    }

    /* 5. Universe of You on Mobile */
    .universe-heading {
        top: clamp(58px, 8vh, 68px) !important;
        padding: 0 16px !important;
        width: 100% !important;
    }

    .universe-heading p {
        font-size: 0.62rem !important;
        letter-spacing: 3px !important;
        margin-bottom: 2px !important;
    }

    .universe-heading h2 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        letter-spacing: -1px !important;
        margin: 2px 0 4px !important;
    }

    .universe-heading span {
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
        max-width: 90% !important;
        display: inline-block !important;
    }

    .universe-scene {
        perspective: 850px !important;
    }

    .universe-world {
        top: 52% !important;
    }

    .space-memory {
        width: clamp(78px, 23vw, 100px) !important;
    }

    .space-memory-inner {
        padding: 5px 5px 22px !important;
        border-radius: 6px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 20px rgba(180, 195, 255, 0.2) !important;
    }

    .space-memory-caption {
        font-size: 0.68rem !important;
        bottom: 4px !important;
    }

    .universe-instruction {
        bottom: clamp(66px, 9vh, 76px) !important;
        font-size: 0.62rem !important;
        letter-spacing: 2px !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .open-wish-btn {
        bottom: clamp(18px, 3vh, 26px) !important;
        padding: 10px 22px !important;
        font-size: 0.78rem !important;
        border-radius: 30px !important;
        background: linear-gradient(135deg, rgba(255, 182, 193, 0.95), rgba(255, 105, 180, 0.95)) !important;
        color: #fff !important;
        box-shadow: 0 8px 25px rgba(255, 105, 180, 0.45) !important;
        z-index: 100 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
    }

    /* 6. Final Wish Letter on Mobile */
    .final-wish {
        padding: 16px 12px !important;
    }

    .final-wish h2 {
        font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
        margin-top: 8px !important;
        margin-bottom: 6px !important;
    }

    .final-message-container {
        max-height: 46vh !important;
        padding: 12px 14px !important;
        margin: 6px auto !important;
        border-radius: 14px !important;
    }

    .final-paragraph {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }

    .final-signature .sig-name {
        font-size: 1.25rem !important;
    }

    .final-actions-group {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .wish-action-btn {
        flex: 1 1 45% !important;
        padding: 9px 12px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.5px !important;
    }

    .wish-action-btn.replay-button {
        flex: 1 1 100% !important;
    }
}

/* =====================================================
   PART 8: PRIVATE GIFT REQUEST SECTION
===================================================== */
.gift-page {
    position: fixed;
    inset: 0;
    z-index: 550;
    background: radial-gradient(circle at 50% 15%, #181d4a 0%, #0c102c 50%, #060818 100%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0.6s;
    overflow: hidden;
}

.gift-page.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.gift-page.slide-up-out {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

/* Background Atmospheric Glows */
.gift-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}

.gift-glow-1 {
    width: 480px;
    height: 480px;
    top: -100px;
    left: 20%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 105, 180, 0.1) 60%, transparent 80%);
}

.gift-glow-2 {
    width: 420px;
    height: 420px;
    bottom: -60px;
    right: 15%;
    background: radial-gradient(circle, rgba(147, 112, 219, 0.18) 0%, rgba(0, 255, 255, 0.08) 60%, transparent 80%);
}

.gift-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.gift-star {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    pointer-events: none;
    animation: giftStarTwinkle var(--duration, 3s) ease-in-out infinite alternate;
}

@keyframes giftStarTwinkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 0.9; transform: scale(1.3); }
}

/* Scroll Wrapper to ensure all fields are accessible on any screen height */
.gift-scroll-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(80px, 11vh, 100px) 20px 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) rgba(15, 20, 50, 0.5);
}

.gift-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}
.gift-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 20, 50, 0.4);
    border-radius: 10px;
}
.gift-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.35);
    border-radius: 10px;
}

/* Card Container */
.gift-card {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: rgba(15, 19, 48, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(231, 189, 103, 0.35);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 45px rgba(231, 189, 103, 0.18);
    padding: clamp(28px, 4vw, 42px);
    margin-bottom: 20px;
}

/* Floating Badge */
.gift-badge {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #ff69b4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.45);
    border: 2px solid #ffffff;
    animation: giftBadgeFloat 3s ease-in-out infinite;
}

.gift-badge-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.gift-badge-sparkle {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.8rem;
    color: #ffd700;
    text-shadow: 0 0 6px #fff;
    animation: sparkleSpin 4s linear infinite;
}

@keyframes giftBadgeFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes sparkleSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Header */
.gift-header {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

.gift-category {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.55rem, 0.85vw, 0.72rem);
    letter-spacing: 4px;
    color: #e7bd67;
    text-shadow: 0 0 10px rgba(231, 189, 103, 0.4);
    margin-bottom: 8px;
    font-weight: 600;
}

.gift-header h2 {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 4.2vw, 2.6rem);
    background: linear-gradient(135deg, #ffffff 0%, #ffe39f 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
    margin-bottom: 12px;
    line-height: 1.15;
}

.gift-subheading {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    color: #ffffff;
    line-height: 1.45;
    margin-bottom: 8px;
    opacity: 0.95;
}

.gift-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto;
}

/* Form Groups & Controls */
.gift-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.form-row {
    display: flex;
    gap: 14px;
}

.col-half {
    flex: 1;
}

.form-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.76rem, 1vw, 0.84rem);
    font-weight: 600;
    color: #e7bd67;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.required-star {
    color: #ff69b4;
    font-weight: 700;
}

.form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(231, 189, 103, 0.28);
    border-radius: 14px;
    padding: 12px 16px;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    transition: all 0.25s ease;
    outline: none;
    resize: vertical;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.84rem;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.25);
}

.form-control.has-error {
    border-color: #ff5277;
    box-shadow: 0 0 12px rgba(255, 82, 119, 0.25);
}

.field-error {
    font-size: 0.74rem;
    color: #ff6b8b;
    margin-top: 2px;
    min-height: 16px;
    line-height: 1.3;
    display: block;
    transition: opacity 0.2s ease;
}

/* Delivery Toggle Box */
.delivery-toggle-box {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 18px;
    padding: 14px 18px;
    transition: all 0.3s ease;
}

.delivery-toggle-box:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 215, 0, 0.4);
}

.delivery-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    transition: background 0.3s ease;
    margin-top: 2px;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease;
}

.toggle-checkbox:checked + .toggle-switch {
    background: linear-gradient(135deg, #ffd700, #ff69b4);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}

.toggle-checkbox:checked + .toggle-switch::after {
    transform: translateX(20px);
    background: #0d102e;
}

.toggle-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.toggle-title {
    font-size: clamp(0.82rem, 1.1vw, 0.92rem);
    font-weight: 600;
    color: #ffffff;
}

.toggle-subtitle {
    font-size: clamp(0.7rem, 0.95vw, 0.78rem);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* Collapsible Delivery Fields */
.delivery-fields-collapse {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin 0.35s ease;
    margin-top: 0;
}

.delivery-fields-collapse.expanded {
    max-height: 900px;
    opacity: 1;
    margin-top: 8px;
}

.delivery-fields-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 215, 0, 0.025);
    border: 1px dashed rgba(231, 189, 103, 0.3);
    border-radius: 18px;
}

/* Custom Checkbox */
.custom-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.custom-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.custom-checkbox-box {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(231, 189, 103, 0.5);
    background: rgba(255, 255, 255, 0.05);
    margin-top: 2px;
    transition: all 0.25s ease;
}

.custom-checkbox-input:checked + .custom-checkbox-box {
    background: linear-gradient(135deg, #ffd700, #ff69b4);
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.custom-checkbox-input:checked + .custom-checkbox-box::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0d102e;
}

.checkbox-caption {
    font-size: clamp(0.74rem, 1vw, 0.82rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}

/* Privacy Notice */
.gift-privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(18, 24, 60, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 12px 14px;
    text-align: left;
}

.privacy-lock-icon {
    font-size: 1rem;
    color: #ffd700;
    flex-shrink: 0;
    margin-top: 1px;
}

.gift-privacy-notice p {
    font-size: clamp(0.7rem, 0.95vw, 0.78rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    margin: 0;
}

/* Form Status Message */
.form-status-msg {
    display: none;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}

.form-status-msg.error {
    display: block;
    background: rgba(255, 82, 119, 0.15);
    border: 1px solid rgba(255, 82, 119, 0.5);
    color: #ff9cb2;
}

.form-status-msg.warning {
    display: block;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.5);
    color: #ffe082;
}

/* Actions */
.gift-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.submit-gift-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ff8da1 50%, #ff1493 100%);
    border: none;
    color: #0b0e2b;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35);
    padding: 13px 28px;
    font-size: 0.85rem;
}

.submit-gift-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 215, 0, 0.5);
    color: #0b0e2b;
}

.submit-gift-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.maybe-later-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding: 12px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: not-allowed !important;
    text-decoration: line-through;
    opacity: 0.55 !important;
    filter: grayscale(0.8);
    transition: all 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
}

.maybe-later-btn:hover {
    background: rgba(255, 82, 119, 0.1) !important;
    border-color: rgba(255, 82, 119, 0.45) !important;
    color: #ff9cb2 !important;
    transform: none !important;
    box-shadow: none !important;
}

.maybe-later-btn .unworkable-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    color: #ff6b8b;
    text-decoration: none;
    font-weight: 700;
}

.maybe-later-btn.shake-btn {
    animation: playfulShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes playfulShake {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Success Screen */
.gift-success-screen {
    text-align: center;
    padding: clamp(32px, 5vh, 48px) 16px 20px;
    animation: successFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes successFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.success-icon-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 2.3rem;
    margin: 0 auto 18px;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.65));
    animation: successBadgeFloat 3s ease-in-out infinite;
}

@keyframes successBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.success-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.65rem, 4.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ff8da1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
    line-height: 1.28;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
}

.success-message {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.92rem, 1.35vw, 1.05rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    max-width: 440px;
    margin: 0 auto 28px;
}

.back-universe-btn {
    background: linear-gradient(135deg, #00ffff, #9370db);
    border: none;
    color: #0b0e2b;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0, 255, 255, 0.35);
    padding: 13px 28px;
    font-size: 0.85rem;
}

.back-universe-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 255, 255, 0.55);
}

/* Gift Button in Final Wish card */
.wish-action-btn.gift-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ff8da1 50%, #ff1493 100%);
    color: #0b0e2b;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(255, 215, 0, 0.4);
    border: none;
}

.wish-action-btn.gift-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 105, 180, 0.5);
    color: #0b0e2b;
}

/* Mobile Responsive for Gift Page */
@media (max-width: 768px) {
    .gift-scroll-wrapper {
        padding: 68px 12px 30px;
    }

    .gift-card {
        padding: 24px 16px;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    .gift-badge {
        width: 46px;
        height: 46px;
        top: -22px;
    }

    .gift-badge-icon {
        font-size: 1.3rem;
    }

    .form-row {
        flex-direction: column;
        gap: 14px;
    }

    .gift-form-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .submit-gift-btn,
    .maybe-later-btn,
    .back-universe-btn {
        width: 100%;
        padding: 12px 18px;
    }
}

/* =====================================================
   CINEMATIC SUSPENSE & MYSTERY ENHANCEMENTS
===================================================== */
/* 1. Cinematic Vignette Frame */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    box-shadow: inset 0 0 clamp(60px, 10vw, 130px) rgba(0, 0, 0, 0.82),
                inset 0 0 40px rgba(10, 14, 40, 0.6);
    pointer-events: none;
    z-index: 950;
}

@media (max-width: 768px) {
    body::after {
        display: none !important;
    }
}

/* 2. Pulsing Glow on Mystery Discovery Buttons */
.intro-hint,
.memory-bottom-hint,
.polaroid-next-hint,
.scrapbook-next-hint,
.open-wish-btn,
.wish-action-btn.gift-btn {
    animation: suspenseGlowPulse 2.8s ease-in-out infinite alternate !important;
}

@keyframes suspenseGlowPulse {
    0% {
        box-shadow: 0 0 16px rgba(255, 215, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 215, 0, 0.45);
        transform: translateY(0);
    }
    100% {
        box-shadow: 0 0 38px rgba(255, 215, 0, 0.65), 0 0 20px rgba(255, 105, 180, 0.45), 0 10px 32px rgba(0, 0, 0, 0.7);
        border-color: #ffd700;
        transform: translateY(-3px);
    }
}