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

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

html {
    scroll-behavior: smooth;
}

body {
    background: #05050c;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    overflow-x: hidden;
}


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

.intro {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 650px;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(79, 65, 130, 0.20),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(117, 60, 130, 0.12),
            transparent 30%
        ),
        #05050c;
}


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

.stars,
.stars-two,
.stars-three {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1.5px);

    background-size:
        140px 140px,
        190px 190px,
        260px 260px;

    background-position:
        10px 20px,
        70px 110px,
        130px 40px;

    animation: starsMove 35s linear infinite;
}

.stars-two {
    opacity: 0.45;

    transform: scale(1.2);

    animation-duration: 55s;
    animation-direction: reverse;
}

.stars-three {
    opacity: 0.25;

    transform: scale(1.4);

    animation-duration: 80s;
}


/* =========================================
   STAR MOVEMENT
========================================= */

@keyframes starsMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-140px);
    }

}

@keyframes moonFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


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

.intro-content {

    position: relative;

    z-index: 10;

    width: min(90%, 850px);

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px;

}


/* =========================================
   SMALL INTRO TEXT
========================================= */

.intro-small {

    font-size: clamp(18px, 2vw, 24px);

    letter-spacing: 4px;

    color: #e8d9c5;

    margin-bottom: 28px;

    opacity: 0;

    animation: fadeUp 1.5s ease forwards;

}


/* =========================================
   MAIN TITLE
========================================= */

.intro h1 {

    font-size: clamp(42px, 7vw, 82px);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: 2px;

    color: #fffaf2;

    text-shadow:
        0 0 20px rgba(255,255,255,0.08);

    opacity: 0;

    animation: fadeUp 1.5s ease 0.7s forwards;

}


/* =========================================
   MESSAGE
========================================= */

.intro-message {

    margin-top: 30px;

    font-size: clamp(17px, 2vw, 22px);

    line-height: 1.8;

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

    letter-spacing: 0.5px;

    opacity: 0;

    animation: fadeUp 1.5s ease 1.4s forwards;

}


/* =========================================
   ENTER BUTTON
========================================= */

.enter-button {

    margin-top: 48px;

    padding: 16px 30px;

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

    border-radius: 50px;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 16px;

    letter-spacing: 1.5px;

    cursor: pointer;

    backdrop-filter: blur(10px);

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

    opacity: 0;

    animation: fadeUp 1.5s ease 2.2s forwards;
}

.enter-button span:first-child {
    margin-right: 8px;
}

.enter-button span:last-child {
    margin-left: 8px;
}

.enter-button:hover {

    transform: translateY(-4px);

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

    border-color: rgba(255,255,255,0.5);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.35);
}


/* =========================================
   DATE
========================================= */

.intro-date {

    position: absolute;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 13px;

    letter-spacing: 5px;

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

    z-index: 10;
}


/* =========================================
   FADE UP ANIMATION
========================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================
   EXIT ANIMATION
========================================= */

.intro.hide {

    animation: introExit 1.5s ease forwards;

}

@keyframes introExit {

    from {

        opacity: 1;

        transform: scale(1);

    }

    to {

        opacity: 0;

        transform: scale(1.08);

    }

}


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

@media (max-width: 600px) {

    .moon {

        width: 110px;
        height: 110px;

        top: 10%;
        right: 8%;

    }

    .intro-content {

        padding: 20px;

    }

    .intro-small {

        letter-spacing: 2px;

    }

    .intro-message {

        line-height: 1.6;

    }

    .enter-button {

        margin-top: 35px;

        padding: 14px 24px;

    }

}

/* =========================================
   STEP 2
   BEFORE I KNEW YOU AS DHARSHU
========================================= */

.memory-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(100, 75, 130, 0.13),
            transparent 30%
        ),
        #070710;

    color: #fffaf2;
}


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

.memory-glow {

    position: absolute;

    width: 700px;

    height: 700px;

    left: 50%;

    top: 35%;

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

    background:
        radial-gradient(
            circle,
            rgba(255, 215, 170, 0.06),
            transparent 65%
        );

    filter: blur(30px);

    pointer-events: none;

}


/* =========================================
   PART 1
   PERSONAL MESSAGE
========================================= */

.memory-opening {

    position: relative;

    min-height: 100vh;

    width: min(900px, 100%);

    margin: 0 auto;

    padding:
        150px 30px 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    box-sizing: border-box;
}


/* Small PRIYA */

.memory-small-title {

    font-size: 12px;

    letter-spacing: 6px;

    color:
        rgba(232, 217, 197, 0.55);

    margin-bottom: 50px;

}


/* =========================================
   MESSAGE
========================================= */

.opening-message {

    max-width: 720px;

    font-size:
        clamp(20px, 2.5vw, 28px);

    line-height: 1.8;

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

}


.opening-message p {

    margin-bottom: 22px;

}


.opening-message p:last-child {

    margin-bottom: 0;

}


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

.transition-line {

    margin-top: 75px;

    margin-bottom: 25px;

    font-size:
        clamp(18px, 2vw, 23px);

    color:
        rgba(232,217,197,0.65);

}


/* =========================================
   MAIN EMOTIONAL LINE
========================================= */

.memory-opening h2 {

    margin: 0;

    font-size:
        clamp(38px, 5vw, 65px);

    line-height: 1.25;

    font-weight: 400;

    color: #fffaf2;

}


/* =========================================
   SCROLL HINT
========================================= */

.scroll-hint {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

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

    font-size: 10px;

    letter-spacing: 2px;

}


.scroll-arrow {

    font-size: 20px;

    animation:
        gentleArrow 2s ease-in-out infinite;

}


/* =========================================
   PART 2
   CHILDHOOD PHOTO
========================================= */

.childhood-memory {

    position: relative;

    min-height: 120vh;

    width: 100%;

    padding:
        120px 25px 150px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


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

.photo-intro {

    font-size:
        clamp(22px, 3vw, 32px);

    line-height: 1.5;

    color:
        #e8d9c5;

    margin-bottom: 55px;

}


/* =========================================
   PHOTO
========================================= */

.childhood-photo {

    position: relative;

    display: inline-block;

    max-width: min(850px, 92vw);

    padding: 14px;

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

    border:
        1px solid
        rgba(255,255,255,0.17);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.55);

    transform:
        rotate(-1deg);

}


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

.childhood-photo .photo-glow {

    position: absolute;

    width: 80%;

    height: 70%;

    left: 10%;

    top: 15%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,220,175,0.15),
            transparent 65%
        );

    filter: blur(40px);

    z-index: -1;

}


/* =========================================
   IMPORTANT:
   COMPLETE PHOTO
========================================= */

.childhood-photo img {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 70vh;

    object-fit: contain;

}


/* =========================================
   PHOTO CAPTION
========================================= */

.photo-caption {

    max-width: 600px;

    margin-top: 30px;

    font-size: 14px;

    line-height: 1.7;

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

    font-style: italic;

}


/* =========================================
   PART 3
   SCHOOL MEMORY
========================================= */

.school-memory {

    position: relative;

    min-height: 130vh;

    width: min(850px, 100%);

    margin: 0 auto;

    padding:
        150px 30px 180px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;
}


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

.school-intro {

    max-width: 650px;

    font-size:
        clamp(20px, 2.5vw, 29px);

    line-height: 1.7;

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

    margin-bottom: 60px;

}


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

.school-memory-content {

    position: relative;

    text-align: left;

    border-left:
        1px solid
        rgba(232,217,197,0.35);

    padding-left: 35px;

    max-width: 600px;

}


.school-memory-content p {

    margin: 0;

    font-size:
        clamp(20px, 2.5vw, 28px);

    line-height: 1.9;

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

}


/* =========================================
   5TH STANDARD
========================================= */

.school-memory-content .school-highlight {

    font-size:
        clamp(32px, 4vw, 50px);

    color:
        #e8d9c5;

    margin-bottom: 15px;

}


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

.school-ending {

    max-width: 600px;

    margin-top: 75px;

    font-size:
        clamp(18px, 2.2vw, 24px);

    line-height: 1.8;

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

    font-style: italic;

}


/* =========================================
   FINAL LINE
========================================= */

.school-final {

    margin-top: 35px;

    font-size:
        clamp(24px, 3vw, 36px);

    line-height: 1.6;

    color:
        #fffaf2;

}


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

.next-memory-hint {

    margin-top: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    font-size: 10px;

    letter-spacing: 2px;

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

}


/* =========================================
   ANIMATION
========================================= */

@keyframes gentleArrow {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(8px);

    }

}


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

@media (max-width: 700px) {

    .memory-opening {

        min-height: 100vh;

        padding:
            120px 22px 90px;

    }


    .memory-small-title {

        letter-spacing: 4px;

        margin-bottom: 40px;

    }


    .opening-message {

        font-size: 19px;

        line-height: 1.75;

    }


    .transition-line {

        margin-top: 60px;

    }


    .memory-opening h2 {

        font-size: 38px;

    }


    .childhood-memory {

        min-height: 100vh;

        padding:
            100px 15px;

    }


    .photo-intro {

        margin-bottom: 40px;

        font-size: 22px;

    }


    .childhood-photo {

        padding: 8px;

        max-width: 94vw;

    }


    .childhood-photo img {

        max-height: 65vh;

    }


    .school-memory {

        min-height: 120vh;

        padding:
            120px 22px;

    }


    .school-memory-content {

        padding-left: 22px;

    }


    .school-memory-content p {

        font-size: 19px;

        line-height: 1.75;

    }


    .school-memory-content .school-highlight {

        font-size: 34px;

    }

}

/* =========================================
   STEP 1 - CINEMATIC INTERACTIONS
========================================= */


/* =========================================
   FLOATING PARTICLES
========================================= */

.intro-floating-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 3;

}


.intro-particle {

    position: absolute;

    width: 2px;

    height: 2px;

    border-radius: 50%;

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

    box-shadow:
        0 0 8px
        rgba(255,255,255,0.35);

    animation:
        introParticleFloat
        var(--particle-duration)
        ease-in-out
        infinite;

}


@keyframes introParticleFloat {

    0% {

        opacity: 0;

        transform:
            translate3d(0, 30px, 0)
            scale(0.5);

    }

    25% {

        opacity: 0.65;

    }

    50% {

        opacity: 0.2;

        transform:
            translate3d(
                var(--particle-x),
                -80px,
                0
            )
            scale(1);

    }

    75% {

        opacity: 0.55;

    }

    100% {

        opacity: 0;

        transform:
            translate3d(
                calc(var(--particle-x) * -1),
                -160px,
                0
            )
            scale(0.4);

    }

}


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

.intro-content {

    transition:
        transform 1.2s
        cubic-bezier(.2,.8,.2,1);

}


/* =========================================
   HEY DHARSHU
========================================= */

.intro-small {

    animation:
        step1FadeUp
        1.2s
        ease
        0.4s
        both !important;

}


/* =========================================
   "I MADE SOMETHING FOR YOU"
========================================= */

#introTitle {

    animation:
        step1TitleReveal
        1.5s
        cubic-bezier(.2,.8,.2,1)
        1s
        both;

}


@keyframes step1TitleReveal {

    0% {

        opacity: 0;

        transform:
            translateY(30px)
            scale(0.97);

        filter:
            blur(8px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

}


/* =========================================
   MESSAGE
========================================= */

.intro-message {

    animation:
        step1FadeUp
        1.3s
        ease
        2s
        both !important;

}


@keyframes step1FadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

        filter:
            blur(5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =========================================
   BUTTON
========================================= */

.enter-button {

    animation:
        step1ButtonReveal
        1.2s
        ease
        3s
        both !important;

}


@keyframes step1ButtonReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(0.95);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================
   BUTTON SHINE
========================================= */

.enter-button {

    position: relative;

    overflow: hidden;

}


.enter-button::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );

    transform:
        skewX(-20deg);

}


.enter-button:hover::after {

    animation:
        buttonLightSweep
        0.8s
        ease;

}


@keyframes buttonLightSweep {

    from {

        left: -120%;

    }

    to {

        left: 140%;

    }

}


/* =========================================
   BUTTON ICONS
========================================= */

.enter-button span:first-child {

    display: inline-block;

    transition:
        transform 0.5s ease;

}


.enter-button:hover span:first-child {

    transform:
        rotate(180deg)
        scale(1.2);

}


.enter-button span:last-child {

    display: inline-block;

    transition:
        transform 0.4s ease;

}


.enter-button:hover span:last-child {

    transform:
        translateX(6px);

}


/* =========================================
   DATE
========================================= */

.intro-date {

    animation:
        dateReveal
        1.5s
        ease
        3.3s
        both;

}


@keyframes dateReveal {

    from {

        opacity: 0;

        letter-spacing: 1px;

    }

    to {

        opacity: 1;

        letter-spacing: 5px;

    }

}


/* =========================================
   VERY SUBTLE MOON MOVEMENT
========================================= */

.moon {

    transition:
        transform 1.5s
        cubic-bezier(.2,.8,.2,1);

}


/* =========================================
   ENTER / EXIT
========================================= */

.intro.hide .intro-content {

    animation:
        step1ExitContent
        1s
        ease
        forwards;

}


.intro.hide .moon {

    animation:
        step1ExitMoon
        1.2s
        ease
        forwards;

}


.intro.hide .stars {

    animation:
        step1ExitStars
        1.4s
        ease
        forwards;

}


.intro.hide .intro-floating-particles {

    animation:
        step1ExitParticles
        1s
        ease
        forwards;

}


@keyframes step1ExitContent {

    to {

        opacity: 0;

        transform:
            scale(1.06)
            translateY(-12px);

        filter:
            blur(8px);

    }

}


@keyframes step1ExitMoon {

    to {

        opacity: 0;

        transform:
            scale(1.35);

        filter:
            blur(8px);

    }

}


@keyframes step1ExitStars {

    to {

        opacity: 0;

        transform:
            scale(1.35);

    }

}


@keyframes step1ExitParticles {

    to {

        opacity: 0;

        transform:
            scale(1.5);

    }

}


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

@media (max-width: 600px) {

    .intro-content {

        transform: none !important;

    }

    .intro-floating-particles {

        opacity: 0.7;

    }

}

/* =========================================
   STEP 2
   THE LITTLE PRIYA I REMEMBER
========================================= */

#memory-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

}


/* =========================================
   CONTAINER
========================================= */

.childhood-memory-container {

    width: 100%;
    max-width: 1400px;

    min-height: 100vh;

    margin: 0 auto;

    padding: 70px 30px 110px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =========================================
   KICKER
========================================= */

.childhood-kicker {

    margin:
        0 0 18px;

    font-size: 10px;

    letter-spacing: 4px;

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

    opacity: 0;

    animation:
        step2FadeUp
        1s ease
        0.2s forwards;

}


/* =========================================
   TITLE
========================================= */

.childhood-title {

    margin: 0;

    font-size:
        clamp(38px, 5vw, 68px);

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -1px;

    color:
        #f5efe7;

    opacity: 0;

    animation:
        step2FadeUp
        1s ease
        0.45s forwards;

}


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

.childhood-intro-text {

    margin:
        18px 0 32px;

    font-size:
        clamp(14px, 1.8vw, 18px);

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

    line-height: 1.6;

    opacity: 0;

    animation:
        step2FadeUp
        1s ease
        0.7s forwards;

}


/* =========================================
   PHOTO WRAPPER
========================================= */

.childhood-photo-wrapper {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transform:
        translateY(25px)
        scale(0.98);

    animation:
        step2PhotoAppear
        1.2s ease
        1s forwards;

}


/* =========================================
   PHOTO FRAME
========================================= */

.childhood-photo-frame {

    position: relative;

    width: min(700px, 88vw);

    max-height: 46vh;

    padding: 8px;

    box-sizing: border-box;

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

    border:
        1px solid
        rgba(255,255,255,0.14);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.5);

    overflow: hidden;

    transition:
        transform 0.7s
        cubic-bezier(.2,.8,.2,1),
        box-shadow 0.7s ease;

}


/* =========================================
   PHOTO
========================================= */

.childhood-photo {

    display: block;

    width: 100%;

    height: auto;

    max-height: 44vh;

    object-fit: contain;

    transition:
        transform 1.5s
        cubic-bezier(.2,.8,.2,1),
        filter 1s ease;

}


/* =========================================
   PHOTO HOVER
========================================= */

.childhood-photo-frame:hover {

    transform:
        translateY(-5px)
        rotateX(1deg);

    box-shadow:
        0 35px 90px
        rgba(0,0,0,0.6);

}


.childhood-photo-frame:hover
.childhood-photo {

    transform:
        scale(1.018);

}


/* =========================================
   LIGHT PASSING OVER PHOTO
========================================= */

.childhood-photo-light {

    position: absolute;

    top: 0;

    left: -100%;

    width: 45%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );

    transform:
        skewX(-18deg);

    pointer-events: none;

    animation:
        photoLightPass
        4s ease-in-out
        2.5s infinite;

}


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

.childhood-memory-mark {

    position: absolute;

    right: 18px;

    top: 15px;

    font-size: 15px;

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

    opacity: 0.45;

    animation:
        memoryTwinkle
        3s ease-in-out
        infinite;

}


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

.childhood-memory-text {

    width: min(700px, 90vw);

    margin:
        45px auto 0;

    text-align: left;

}


/* =========================================
   QUESTION
========================================= */

.memory-question {

    margin: 0 0 12px;

    font-size:
        clamp(14px, 1.8vw, 18px);

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

    opacity: 0;

    animation:
        step2TextReveal
        1s ease
        1.8s forwards;

}


/* =========================================
   MAIN MEMORY LINE
========================================= */

.memory-main-line {

    max-width: 650px;

    margin:
        0 0 35px;

    font-size:
        clamp(27px, 4vw, 44px);

    font-weight: 400;

    line-height: 1.25;

    color:
        #eee6dc;

    opacity: 0;

    animation:
        step2TextReveal
        1s ease
        2.1s forwards;

}


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

.memory-story {

    padding-left: 25px;

    border-left:
        1px solid
        rgba(255,255,255,0.18);

}


.memory-story p {

    margin:
        12px 0;

    font-size:
        clamp(15px, 1.8vw, 19px);

    line-height: 1.75;

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

    opacity: 0;

    animation:
        step2TextReveal
        1s ease
        2.5s forwards;

}


/* =========================================
   IMPORTANT MEMORY LINES
========================================= */

.memory-story
.memory-highlight {

    color:
        #e8d9c5;

    font-size:
        clamp(17px, 2vw, 21px);

}


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

.memory-story
.memory-ending {

    margin-top: 30px;

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

    line-height: 1.9;

}


/* =========================================
   CONTINUE
========================================= */

.childhood-continue {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 80px;

    font-size: 10px;

    letter-spacing: 2.5px;

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

    opacity: 0;

    animation:
        step2FadeUp
        1s ease
        3.8s forwards;

}


.continue-line {

    width: 35px;

    height: 1px;

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

}


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

@keyframes step2FadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

        filter:
            blur(4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


@keyframes step2PhotoAppear {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(0.97);

        filter:
            blur(5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

}


@keyframes step2TextReveal {

    from {

        opacity: 0;

        transform:
            translateY(15px);

        filter:
            blur(3px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


@keyframes photoLightPass {

    0% {

        left: -100%;

    }

    35% {

        left: 130%;

    }

    100% {

        left: 130%;

    }

}


@keyframes memoryTwinkle {

    0%,
    100% {

        opacity: 0.3;

        transform:
            scale(1);

    }

    50% {

        opacity: 0.8;

        transform:
            scale(1.15);

    }

}


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

@media (max-width: 600px) {

    .childhood-memory-container {

        padding:
            55px 16px 90px;

    }


    .childhood-title {

        font-size: 40px;

    }


    .childhood-intro-text {

        margin-bottom: 25px;

    }


    .childhood-photo-frame {

        width: 94vw;

        max-height: 42vh;

        padding: 6px;

    }


    .childhood-photo {

        max-height: 40vh;

    }


    .childhood-memory-text {

        margin-top: 35px;

    }


    .memory-story {

        padding-left: 18px;

    }


    .memory-main-line {

        font-size: 29px;

    }


    .childhood-continue {

        margin-top: 65px;

    }

}

/* =========================================
   STEP 3
   SOMEWHERE ALONG THE WAY
========================================= */

.sister-section {

    position: relative;

    width: 100%;

    min-height: 340vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(120,90,130,0.10),
            transparent 35%
        );

}


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

.sister-background-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    left: 50%;

    top: 35%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180,150,190,0.08),
            transparent 65%
        );

    filter:
        blur(40px);

    pointer-events: none;

    animation:
        sisterGlow 8s ease-in-out infinite;

}


/* =========================================
   OPENING
========================================= */

.sister-opening {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        80px 25px;

    box-sizing: border-box;

}


.sister-small-title {

    margin: 0 0 35px;

    font-size: 11px;

    letter-spacing: 4px;

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

    opacity: 0;

    animation:
        sisterFadeUp 1.2s ease
        forwards;

}


.sister-opening-title {

    margin: 0;

    font-size:
        clamp(48px, 7vw, 88px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -2px;

    color:
        #f4eee6;

}


.sister-opening-text {

    margin-top: 40px;

    font-size:
        clamp(17px, 2vw, 22px);

    line-height: 1.7;

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

}


/* =========================================
   SCROLL INDICATOR
========================================= */

.sister-scroll-indicator {

    position: absolute;

    bottom: 45px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

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

}


.sister-scroll-indicator span {

    width: 1px;

    height: 30px;

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

    animation:
        sisterScrollLine
        2s ease-in-out infinite;

}


.sister-scroll-indicator small {

    font-size: 9px;

    letter-spacing: 3px;

}


.sister-scroll-indicator b {

    font-size: 18px;

    font-weight: 400;

    animation:
        sisterArrow
        2s ease-in-out infinite;

}


/* =========================================
   SISTER FEELING
========================================= */

.sister-feeling {

    min-height: 100vh;

    width: min(760px, 90vw);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

}


.sister-feeling-line {

    width: 1px;

    height: 90px;

    margin: 0 auto 55px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.3),
            transparent
        );

}


.sister-feeling-text {

    max-width: 680px;

    margin: 0 auto;

    font-size:
        clamp(24px, 4vw, 43px);

    line-height: 1.45;

    font-weight: 400;

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

}


.sister-feeling-text.second {

    margin-top: 90px;

    color:
        #e8d9c5;

}


/* =========================================
   EMOTIONAL REVEAL
========================================= */

.sister-reveal {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        80px 25px;

    box-sizing: border-box;

}


.reveal-small {

    margin: 0 0 30px;

    font-size:
        clamp(14px, 1.8vw, 18px);

    letter-spacing: 1px;

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

}


.sister-line {

    margin: 0;

    font-size:
        clamp(45px, 7vw, 90px);

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -2px;

    color:
        #f4eee6;

}


.reveal-final {

    margin:
        70px 0 25px;

    font-size:
        clamp(16px, 2vw, 21px);

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

}


.daughter-line {

    margin: 0;

    font-size:
        clamp(43px, 7vw, 88px);

    line-height: 1.05;

    font-weight: 400;

    color:
        #e8d9c5;

    text-shadow:
        0 0 40px
        rgba(232,217,197,0.12);

}


/* =========================================
   FINAL THOUGHT
========================================= */

.sister-final {

    min-height: 75vh;

    width: min(700px, 88vw);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

}


.sister-final p {

    font-size:
        clamp(18px, 2.5vw, 27px);

    line-height: 1.7;

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

}


.sister-final-highlight {

    margin-top: 45px;

    color:
        rgba(255,255,255,0.7) !important;

}


/* =========================================
   CONTINUE
========================================= */

.sister-continue {

    height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 15px;

    text-align: center;

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

}


.sister-continue span {

    font-size: 11px;

    letter-spacing: 2px;

}


.sister-continue b {

    font-size: 20px;

    font-weight: 400;

    animation:
        sisterArrow
        2s ease-in-out infinite;

}


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

@keyframes sisterFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

        filter:
            blur(5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


@keyframes sisterScrollLine {

    0%,
    100% {

        opacity: 0.25;

        transform:
            scaleY(0.7);

    }

    50% {

        opacity: 0.8;

        transform:
            scaleY(1);

    }

}


@keyframes sisterArrow {

    0%,
    100% {

        transform:
            translateY(0);

        opacity: 0.35;

    }

    50% {

        transform:
            translateY(7px);

        opacity: 0.8;

    }

}


@keyframes sisterGlow {

    0%,
    100% {

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

        opacity: 0.5;

    }

    50% {

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

        opacity: 1;

    }

}


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

@media (max-width: 700px) {

    .sister-section {

        min-height: 320vh;

    }


    .sister-opening {

        min-height: 100vh;

        padding:
            60px 20px;

    }


    .sister-opening-title {

        font-size: 48px;

        letter-spacing: -1px;

    }


    .sister-opening-text {

        font-size: 17px;

    }


    .sister-feeling {

        min-height: 90vh;

    }


    .sister-feeling-text {

        font-size: 28px;

    }


    .sister-feeling-text.second {

        margin-top: 65px;

    }


    .sister-reveal {

        min-height: 100vh;

    }


    .sister-line {

        font-size: 48px;

    }


    .daughter-line {

        font-size: 45px;

    }


    .sister-final {

        min-height: 70vh;

    }

}
/* =========================================
   STEP 4
   INTERACTIVE RELATIONSHIP
========================================= */

.relationship-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(150,120,170,0.07),
            transparent 45%
        );

}


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

.relationship-bg-glow {

    position: fixed;

    width: 600px;

    height: 600px;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(210,185,205,0.08),
            transparent 68%
        );

    filter:
        blur(60px);

    pointer-events: none;

    transition:
        transform 1.5s ease,
        opacity 1.5s ease;

}


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

.relationship-screen {

    min-height: 100vh;

    padding:
        80px 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


/* =========================================
   OPENING
========================================= */

.relationship-opening {

    position: relative;

}


.relationship-label {

    max-width: 560px;

    margin:
        0 0 40px;

    font-size: 10px;

    line-height: 1.8;

    letter-spacing: 3px;

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

}


.relationship-opening h2 {

    margin: 0;

    font-size:
        clamp(45px, 7vw, 90px);

    line-height: 1.08;

    font-weight: 400;

    letter-spacing: -2px;

    color:
        #f5efe7;

}


/* =========================================
   BUTTONS
========================================= */

.story-button,
.memory-open-button {

    margin-top: 45px;

    padding:
        14px 23px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius: 100px;

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

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

    font-family: inherit;

    font-size: 12px;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        opacity 0.4s ease;

}


.story-button span,
.memory-open-button span {

    margin-left: 8px;

    display: inline-block;

    transition:
        transform 0.3s ease;

}


.story-button:hover,
.memory-open-button:hover {

    transform:
        translateY(-3px);

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

    border-color:
        rgba(255,255,255,0.3);

}


.story-button:hover span,
.memory-open-button:hover span {

    transform:
        translateX(5px);

}


/* =========================================
   COUSIN
========================================= */

.cousin-screen {

    opacity: 0;

    transition:
        opacity 1s ease;

}


.cousin-screen.active {

    opacity: 1;

}


.relationship-small-text {

    margin: 0 0 35px;

    font-size: 10px;

    letter-spacing: 4px;

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

}


.cousin-word-button {

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;

    font-family: inherit;

    font-size:
        clamp(65px, 10vw, 130px);

    font-weight: 300;

    letter-spacing: 8px;

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

    transition:
        color 0.8s ease,
        transform 0.8s ease,
        letter-spacing 0.8s ease;

}


.cousin-word-button:hover {

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

    transform:
        scale(1.03);

}


.cousin-word-button.broken {

    animation:
        cousinBreak
        1.1s ease
        forwards;

}


@keyframes cousinBreak {

    0% {

        opacity: 1;

        transform:
            scale(1);

        letter-spacing: 8px;

    }

    40% {

        opacity: 0.8;

        transform:
            scale(1.08);

        letter-spacing: 20px;

    }

    100% {

        opacity: 0;

        transform:
            scale(0.7);

        letter-spacing: 45px;

    }

}


.cousin-question {

    margin:
        45px 0 0;

    font-size:
        clamp(20px, 3vw, 34px);

    color:
        #e8d9c5;

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.cousin-question.show {

    opacity: 1;

    transform:
        translateY(0);

}


.hidden-button {

    opacity: 0;

    pointer-events: none;

}


.hidden-button.show {

    opacity: 1;

    pointer-events: auto;

}

/* =========================================
   COUSIN CLICK AREA
========================================= */

.cousin-click-area {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


/* =========================================
   COUSIN CLICK HINT
========================================= */

.cousin-click-hint {

    margin-top: 22px;

    font-size: 11px;

    letter-spacing: 2px;

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

    animation:
        cousinHintPulse
        2s ease-in-out infinite;

}


/* Gentle hint animation */

@keyframes cousinHintPulse {

    0%,
    100% {

        opacity: 0.3;

        transform:
            translateY(0);

    }

    50% {

        opacity: 0.8;

        transform:
            translateY(-4px);

    }

}

/* =========================================
   SISTER FEELING
========================================= */

.sister-feeling-screen {

    position: relative;

}


.sister-feeling-intro {

    max-width: 700px;

    font-size:
        clamp(22px, 3vw, 34px);

    line-height: 1.6;

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

}


.hold-memory {

    position: relative;

    width: 130px;

    height: 130px;

    margin:
        55px 0 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 8px;

    cursor: pointer;

    user-select: none;

    border:
        1px solid
        rgba(255,255,255,0.15);

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

}


.hold-ring {

    position: absolute;

    inset: -10px;

    border:
        1px solid
        rgba(232,217,197,0.15);

    border-radius: 50%;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

}


.hold-icon {

    font-size: 22px;

    color:
        rgba(232,217,197,0.65);

}


.hold-label {

    font-size: 9px;

    letter-spacing: 1px;

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

}


.hold-memory.holding .hold-ring {

    transform:
        scale(1.3);

    border-color:
        rgba(232,217,197,0.6);

    animation:
        holdPulse
        1s ease-in-out
        infinite;

}


.hold-result {

    margin: 15px 0;

    font-size:
        clamp(18px, 2.2vw, 25px);

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

}


.sister-reveal-text {

    max-width: 750px;

    margin: 20px auto 0;

    font-size:
        clamp(38px, 6vw, 75px);

    line-height: 1.2;

    font-weight: 400;

    color:
        #f5efe7;

    opacity: 0;

    transform:
        translateY(25px)
        scale(0.97);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


.sister-reveal-text.show {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


@keyframes holdPulse {

    0%,
    100% {

        transform:
            scale(1.15);

    }

    50% {

        transform:
            scale(1.3);

    }

}


/* =========================================
   RAM ANNA
========================================= */

.ram-screen {

    position: relative;

}


.ram-intro {

    max-width: 600px;

    font-size:
        clamp(20px, 2.5vw, 30px);

    line-height: 1.7;

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

}


.ram-memory-content {

    width: 100%;

    display: none;

    flex-direction: column;

    align-items: center;

    animation:
        memoryAppear
        1s ease;

}


.ram-memory-content.show {

    display: flex;

}


.ram-before {

    margin-top: 50px;

    font-size: 16px;

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

}


.ram-anna-word {

    margin:
        35px 0;

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;

    font-family: inherit;

    font-size:
        clamp(65px, 10vw, 125px);

    font-weight: 400;

    color:
        #e8d9c5;

    text-shadow:
        0 0 40px
        rgba(232,217,197,0.12);

    transition:
        transform 0.5s ease,
        text-shadow 0.5s ease;

}


.ram-anna-word:hover {

    transform:
        scale(1.05);

    text-shadow:
        0 0 70px
        rgba(232,217,197,0.3);

}

.ram-anna-click-hint {
    margin-top: -15px;
    margin-bottom: 30px;

    font-size: 13px;
    letter-spacing: 1.5px;

    color: rgba(232, 217, 197, 0.45);

    font-style: italic;

    animation: ramHintPulse 2.5s ease-in-out infinite;
}


/* SMALL ATTENTION ANIMATION */

@keyframes ramHintPulse {

    0%,
    100% {
        opacity: 0.45;
        transform: translateY(0);
    }

    50% {
        opacity: 0.85;
        transform: translateY(-3px);
    }

}


.ram-feeling {

    max-width: 600px;

    font-size:
        clamp(22px, 3vw, 34px);

    line-height: 1.5;

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

    opacity: 0;

    transition:
        opacity 1s ease;

}


.ram-feeling.show {

    opacity: 1;

}


.ram-why-button {

    opacity: 0;

    pointer-events: none;

}


.ram-why-button.show {

    opacity: 1;

    pointer-events: auto;

}


.ram-truth-content {

    display: none;

    max-width: 720px;

    margin-top: 50px;

    animation:
        memoryAppear
        1.2s ease;

}


.ram-truth-content.show {

    display: block;

}


.ram-truth-content p {

    margin: 18px 0;

    font-size:
        clamp(19px, 2.5vw, 29px);

    line-height: 1.7;

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

}


.ram-truth-content .ram-truth-highlight {

    margin-top: 45px;

    color:
        #e8d9c5;

}


.ram-truth-content h3 {

    margin-top: 30px;

    font-size:
        clamp(35px, 5vw, 65px);

    line-height: 1.3;

    font-weight: 400;

    color:
        #f5efe7;

}


@keyframes memoryAppear {

    from {

        opacity: 0;

        transform:
            translateY(25px);

        filter:
            blur(5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =========================================
   THREE NAMES
========================================= */

.names-screen {

    padding-top: 100px;

}


.names-screen h3 {

    max-width: 650px;

    margin: 0;

    font-size:
        clamp(35px, 5vw, 60px);

    line-height: 1.25;

    font-weight: 400;

    color:
        #f5efe7;

}


.names-instruction {

    margin-top: 20px;

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

}


.name-cards {

    width: min(900px, 90vw);

    margin-top: 55px;

    display: grid;

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

    gap: 20px;

}


.name-card {

    position: relative;

    height: 220px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius: 8px;

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

    cursor: pointer;

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

    font-family: inherit;

    transition:
        transform 0.5s ease,
        border-color 0.5s ease,
        background 0.5s ease;

}


.name-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(232,217,197,0.3);

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

}


.card-number {

    position: absolute;

    top: 18px;

    left: 20px;

    font-size: 10px;

    letter-spacing: 2px;

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

}


.card-question {

    font-size: 55px;

    font-weight: 200;

}


.name-card.open {

    background:
        rgba(232,217,197,0.08);

    border-color:
        rgba(232,217,197,0.4);

}


.name-card.open .card-question {

    font-size: 22px;

    color:
        #e8d9c5;

}


.names-complete {

    margin-top: 45px;

    opacity: 0;

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

    transition:
        opacity 1s ease;

}


.names-complete.show {

    opacity: 1;

}


/* =========================================
   FINAL DHARSHU
========================================= */

.dharshu-screen {

    min-height: 100vh;

}


.dharshu-screen > p:first-child {

    max-width: 650px;

    font-size:
        clamp(19px, 2.5vw, 28px);

    line-height: 1.7;

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

}


.dharshu-name {

    margin-top: 45px;

    font-size:
        clamp(75px, 11vw, 145px);

    line-height: 1;

    font-weight: 400;

    color:
        #e8d9c5;

    opacity: 0;

    transform:
        scale(0.8);

    transition:
        opacity 1.5s ease,
        transform 1.5s cubic-bezier(.2,.8,.2,1);

}


.dharshu-name.reveal {

    opacity: 1;

    transform:
        scale(1);

}


.dharshu-line {

    width: 80px;

    height: 1px;

    margin:
        40px auto;

    background:
        rgba(232,217,197,0.35);

}


.dharshu-final-text {

    max-width: 600px;

    font-size:
        clamp(18px, 2.4vw, 27px);

    line-height: 1.8;

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

}


.dharshu-final-small {

    margin-top: 45px;

    font-size:
        clamp(25px, 3.5vw, 42px);

    color:
        #f5efe7 !important;

}


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

@media (max-width: 700px) {

    .relationship-screen {

        padding:
            60px 18px;

    }


    .relationship-opening h2 {

        font-size: 47px;

    }


    .cousin-word-button {

        font-size: 62px;

        letter-spacing: 5px;

    }


    .sister-reveal-text {

        font-size: 45px;

    }


    .ram-anna-word {

        font-size: 65px;

    }


    .name-cards {

        grid-template-columns:
            1fr;

    }


    .name-card {

        height: 130px;

    }


    .dharshu-name {

        font-size: 76px;

    }

}
/* =========================================
   STEP 5
   ONE DAY WITH DHARSHU
========================================= */

.marriage-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(160,130,100,0.06),
            transparent 45%
        );

}


.marriage-bg {

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(232,217,197,0.035),
            transparent 50%
        );

}


/* =========================================
   SCREENS
========================================= */

.marriage-screen {

    min-height: 100vh;

    padding:
        90px 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}


/* =========================================
   OPENING
========================================= */

.marriage-label,
.marriage-small-label {

    font-size: 10px;

    letter-spacing: 4px;

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

}


.marriage-opening h2 {

    margin:
        35px 0 0;

    font-size:
        clamp(48px, 7vw, 90px);

    line-height: 1.08;

    font-weight: 400;

    color:
        #f5efe7;

}


.marriage-button,
.memory-reveal-button,
.ending-reveal-button {

    margin-top: 50px;

    padding:
        15px 25px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius: 100px;

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

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

    font-family: inherit;

    font-size: 12px;

    letter-spacing: 1px;

    cursor: pointer;

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

}


.marriage-button:hover,
.memory-reveal-button:hover,
.ending-reveal-button:hover {

    transform:
        translateY(-4px);

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

    border-color:
        rgba(232,217,197,0.3);

}


.marriage-button span,
.memory-reveal-button span,
.ending-reveal-button span {

    margin-left: 8px;

}


/* =========================================
   DAY BEFORE
========================================= */

.day-before-screen h3,
.morning-screen h3,
.timeline-screen h3,
.ending-screen h3 {

    max-width: 800px;

    margin:
        30px 0;

    font-size:
        clamp(35px, 5vw, 62px);

    line-height: 1.25;

    font-weight: 400;

    color:
        #f5efe7;

}


.day-before-memory {

    display: none;

    max-width: 700px;

    margin-top: 55px;

    animation:
        memoryAppear
        1s ease;

}


.day-before-memory.show {

    display: block;

}


.day-before-memory p {

    margin:
        15px 0;

    font-size:
        clamp(20px, 2.5vw, 29px);

    line-height: 1.8;

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

}


.day-before-memory .memory-highlight {

    margin:
        35px 0;

    font-size:
        clamp(28px, 4vw, 45px);

    color:
        #e8d9c5;

}


/* =========================================
   PHOTO SLOT
========================================= */

.marriage-photo-slot {
    width: fit-content;
    max-width: 85vw;

    margin: 35px auto;

    position: relative;

    overflow: hidden;

    border-radius: 8px;

    border: 1px solid rgba(255,255,255,0.1);

    background: transparent;
}


.marriage-photo-slot img {
    display: block;

    width: 100%;
    max-width: 650px;

    height: auto;
    max-height: 500px;

    object-fit: contain;

    margin: 0 auto;

    border-radius: 8px;

    transition: transform 1s ease;
}


.marriage-photo-slot:hover img {

    transform:
        scale(1.035);

}


.photo-placeholder {

    min-height: 330px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 12px;

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

}


.photo-placeholder span {

    font-size: 10px;

    letter-spacing: 3px;

}


.photo-placeholder small {

    font-size: 11px;

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

}


/* =========================================
   MORNING
========================================= */

.morning-screen {

    position: relative;

}


.morning-question {

    margin-top: 30px;

    font-size:
        clamp(21px, 3vw, 32px);

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

}


.morning-actions {

    width:
        min(700px, 90vw);

    margin-top: 35px;

    display: grid;

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

    gap: 15px;

}


.morning-action {

    min-height: 90px;

    border:
        1px solid
        rgba(255,255,255,0.1);

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

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

    font-family: inherit;

    cursor: pointer;

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

}


.morning-action span {

    display: block;

    margin-bottom: 10px;

    font-size: 9px;

    letter-spacing: 2px;

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

}


.morning-action:hover,
.morning-action.selected {

    transform:
        translateY(-5px);

    background:
        rgba(232,217,197,0.06);

    border-color:
        rgba(232,217,197,0.3);

}


.morning-result {

    min-height: 35px;

    margin-top: 30px;

    font-size:
        clamp(20px, 2.5vw, 28px);

    color:
        #e8d9c5;

}


.morning-final {

    max-width: 650px;

    margin-top: 25px;

    font-size:
        clamp(25px, 3.5vw, 40px);

    line-height: 1.6;

    color:
        #f5efe7;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}


.morning-final.show {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================
   TIMELINE
========================================= */

.memory-timeline {

    position: relative;

    width:
        min(900px, 90vw);

    margin:
        70px auto 40px;

    display: flex;

    justify-content: space-between;

}


.memory-timeline::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 22px;

    height: 1px;

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

}


.timeline-progress {

    position: absolute;

    left: 0;

    top: 21px;

    width: 0%;

    height: 2px;

    background:
        rgba(232,217,197,0.6);

    transition:
        width .7s ease;

}


.timeline-point {

    position: relative;

    z-index: 2;

    width: 100px;

    border: 0;

    background: none;

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

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

    transition:
        color .4s ease,
        transform .4s ease;

}


.timeline-point::before {

    content: "";

    display: block;

    width: 9px;

    height: 9px;

    margin:
        0 auto 15px;

    border-radius: 50%;

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

    transition:
        transform .4s ease,
        background .4s ease;

}


.timeline-point span {

    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    letter-spacing: 2px;

}


.timeline-point.active {

    color:
        #e8d9c5;

}


.timeline-point.active::before {

    background:
        #e8d9c5;

    transform:
        scale(1.6);

}


.timeline-point:hover {

    transform:
        translateY(-3px);

}


.timeline-memory {

    width:
        min(800px, 90vw);

    animation:
        memoryAppear
        .7s ease;

}


.timeline-number {

    font-size: 10px;

    letter-spacing: 3px;

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

}


.timeline-memory h4 {

    margin:
        10px 0 20px;

    font-size:
        clamp(40px, 6vw, 70px);

    font-weight: 400;

    color:
        #f5efe7;

}


.timeline-memory > p:not(.timeline-number) {

    max-width: 650px;

    margin:
        0 auto 25px;

    font-size:
        clamp(19px, 2.5vw, 28px);

    line-height: 1.7;

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

}


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

.ending-memory {

    display: none;

    max-width: 700px;

    margin-top: 45px;

    animation:
        memoryAppear
        1s ease;

}


.ending-memory.show {

    display: block;

}


.ending-memory p {

    margin:
        16px 0;

    font-size:
        clamp(20px, 2.5vw, 29px);

    line-height: 1.7;

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

}


.ending-memory h4 {

    margin:
        35px 0;

    font-size:
        clamp(32px, 5vw, 58px);

    line-height: 1.3;

    font-weight: 400;

    color:
        #f5efe7;

}


.ending-memory .ending-highlight {

    margin-top: 45px;

    color:
        #e8d9c5;

}


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

.marriage-transition {

    min-height: 60vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        80px 25px;

}


.marriage-transition p {

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

    font-size: 16px;

}


.marriage-transition h3 {

    max-width: 700px;

    font-size:
        clamp(32px, 5vw, 60px);

    line-height: 1.3;

    font-weight: 400;

    color:
        #f5efe7;

}


.transition-arrow {

    margin-top: 50px;

    font-size: 25px;

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

    animation:
        marriageArrow
        2s ease-in-out infinite;

}


@keyframes marriageArrow {

    0%,
    100% {

        transform:
            translateY(0);

        opacity: .3;

    }

    50% {

        transform:
            translateY(10px);

        opacity: .8;

    }

}


@keyframes memoryAppear {

    from {

        opacity: 0;

        transform:
            translateY(25px);

        filter:
            blur(5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


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

@media (max-width: 700px) {

    .marriage-screen {

        padding:
            65px 18px;

    }


    .marriage-opening h2 {

        font-size: 48px;

    }


    .marriage-small-label {

        letter-spacing: 2px;

    }


    .photo-placeholder {

        min-height: 250px;

    }


    .morning-actions {

        grid-template-columns:
            1fr;

    }


    .morning-action {

        min-height: 70px;

    }


    .memory-timeline {

        width: 95vw;

    }


    .timeline-point {

        width: 70px;

        font-size: 9px;

    }


    .timeline-point span {

        font-size: 8px;

    }


    .timeline-memory h4 {

        font-size: 48px;

    }

}

/* =========================================
   STEP 6
   A FEW MEMORIES I KEEP
========================================= */

.memories-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(200,175,145,0.045),
            transparent 50%
        );

}


/* =========================================
   OPENING
========================================= */

.memories-opening {

    min-height: 100vh;

    padding: 80px 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}


.memories-label {

    font-size: 10px;

    letter-spacing: 4px;

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

}


.memories-opening h2 {

    max-width: 850px;

    margin:
        30px 0 15px;

    font-size:
        clamp(45px, 7vw, 85px);

    line-height: 1.1;

    font-weight: 400;

    color:
        #f5efe7;

}


.memories-intro {

    max-width: 600px;

    font-size:
        clamp(18px, 2.5vw, 26px);

    line-height: 1.7;

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

}


.memories-start-button,
.memory-message-button,
.next-memory-button,
.memories-next-button {

    border:
        1px solid rgba(255,255,255,0.13);

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

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

    padding:
        15px 25px;

    border-radius:
        100px;

    font-family:
        inherit;

    font-size:
        12px;

    letter-spacing:
        1px;

    cursor:
        pointer;

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

}


.memories-start-button {

    margin-top:
        45px;

}


.memories-start-button:hover,
.memory-message-button:hover,
.next-memory-button:hover,
.memories-next-button:hover {

    transform:
        translateY(-4px);

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

    border-color:
        rgba(232,217,197,0.3);

}


.memories-start-button span,
.memory-message-button span,
.next-memory-button span,
.memories-next-button span {

    margin-left:
        8px;

}


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

.memory-experience {

    display:
        none;

    min-height:
        100vh;

    padding:
        80px 25px 120px;

    box-sizing:
        border-box;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


.memory-experience.active {

    display:
        flex;

    animation:
        memorySectionAppear
        1s ease;

}


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

.memory-counter {

    display:
        flex;

    gap:
        8px;

    font-size:
        10px;

    letter-spacing:
        2px;

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

}


.memory-counter span:first-child {

    color:
        #e8d9c5;

}


/* =========================================
   CATEGORY
========================================= */

.memory-category {

    margin-top:
        35px;

    font-size:
        10px;

    letter-spacing:
        4px;

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

}


/* =========================================
   TITLE
========================================= */

.memory-title {

    max-width:
        800px;

    margin:
        25px 0 35px;

    font-size:
        clamp(34px, 5vw, 65px);

    line-height:
        1.25;

    font-weight:
        400;

    color:
        #f5efe7;

}


/* =========================================
   MEMORY PHOTO FRAME
========================================= */

.memory-photo-frame {

    width: fit-content;

    max-width: 90vw;

    margin:
        10px auto 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

}


/* =========================================
   SINGLE PHOTO
========================================= */

.memory-photo-item {

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    border:
        1px solid
        rgba(255,255,255,0.1);

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

    opacity: 0;

    transform:
        translateY(25px)
        scale(0.97);

    animation:
        memoryPhotoAppear
        0.8s ease forwards;

}


.memory-photo-item img {

    display: block;

    width: auto;

    max-width: 80vw;

    height: auto;

    max-height: 500px;

    object-fit: contain;

    transition:
        transform 0.8s ease;

}


.memory-photo-item:hover img {

    transform:
        scale(1.04);

}


/* =========================================
   THREE PHOTO LAYOUT
========================================= */

.memory-photo-frame.three-photos {

    width:
        min(1000px, 90vw);

    display:
        grid;

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

    gap:
        18px;

}


/* Each photo becomes equal width */

.memory-photo-frame.three-photos
.memory-photo-item {

    width:
        100%;

}


/* Three images */

.memory-photo-frame.three-photos
.memory-photo-item img {

    width:
        100%;

    height:
        430px;

    object-fit:
        cover;

}


/* Slightly different entrance timing */

.memory-photo-frame.three-photos
.memory-photo-item:nth-child(1) {

    animation-delay:
        0.1s;

}


.memory-photo-frame.three-photos
.memory-photo-item:nth-child(2) {

    animation-delay:
        0.25s;

}


.memory-photo-frame.three-photos
.memory-photo-item:nth-child(3) {

    animation-delay:
        0.4s;

}


.memory-photo-frame:hover img {

    transform:
        scale(1.025);

}


/* =========================================
   PHOTO PLACEHOLDER
========================================= */

.memory-photo-placeholder {

    width:
        100%;

    min-width:
        220px;

    height:
        350px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

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

}


.memory-photo-placeholder span {

    font-size:
        10px;

    letter-spacing:
        3px;

}


.memory-photo-placeholder small {

    font-size:
        11px;

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

}


/* =========================================
   MESSAGE BUTTON
========================================= */

.memory-message-button {

    margin-top:
        10px;

}


/* =========================================
   MESSAGE
========================================= */

.memory-message {

    max-width:
        750px;

    margin-top:
        35px;

    opacity:
        0;

    max-height:
        0;

    overflow:
        hidden;

    transform:
        translateY(20px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        max-height 1s ease;

}


.memory-message.show {

    opacity:
        1;

    max-height:
        500px;

    transform:
        translateY(0);

}


.memory-message p {

    margin:
        0;

    font-size:
        clamp(21px, 3vw, 32px);

    line-height:
        1.8;

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

}


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

.next-memory-button {

    margin-top:
        45px;

    opacity:
        0;

    pointer-events:
        none;

}


.next-memory-button.show {

    opacity:
        1;

    pointer-events:
        auto;

}


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

.memories-final {

    display:
        none;

    min-height:
        80vh;

    padding:
        100px 25px;

    box-sizing:
        border-box;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

}


.memories-final.show {

    display:
        flex;

    animation:
        memorySectionAppear
        1.2s ease;

}


.memories-final p {

    font-size:
        clamp(18px, 2.5vw, 26px);

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

}


.memories-final h3 {

    max-width:
        800px;

    margin:
        25px 0;

    font-size:
        clamp(40px, 6vw, 75px);

    line-height:
        1.2;

    font-weight:
        400;

    color:
        #f5efe7;

}


.memories-next-button {

    margin-top:
        35px;

}


/* =========================================
   PHOTO ANIMATION
========================================= */

@keyframes memoryPhotoAppear {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(0.97);

        filter:
            blur(4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

}


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

@media (max-width: 800px) {

    .memory-photo-frame.three-photos {

        width:
            min(88vw, 500px);

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .memory-photo-frame.three-photos
    .memory-photo-item img {

        width:
            100%;

        height:
            auto;

        max-height:
            450px;

        object-fit:
            contain;

    }

}

/* =========================================
   SPECIAL MEMORY — THE RIDE HOME
========================================= */

.ride-memory-section {
    position: relative;
    min-height: 100vh;
    padding: 100px 25px 120px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(90, 70, 130, 0.20),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #08070d 0%,
            #11101b 50%,
            #07070c 100%
        );
    color: #fff;
    text-align: center;
}


/* -----------------------------------------
   BACKGROUND
----------------------------------------- */

.ride-memory-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.7;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1px);
    background-size: 95px 95px, 145px 145px;
    background-position: 10px 20px, 50px 80px;
    animation: rideStarsDrift 18s linear infinite;
}


.ride-memory-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(170, 140, 255, 0.10);
    filter: blur(80px);
    pointer-events: none;
    animation: rideGlowPulse 5s ease-in-out infinite;
}


/* -----------------------------------------
   OPENING
----------------------------------------- */

.ride-memory-opening {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 8vh;
    animation: rideStoryAppear 1.5s ease forwards;
}


.ride-memory-label {
    margin-bottom: 25px;
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0.55;
}


.ride-memory-opening h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -1px;
    animation: rideTitleFloat 5s ease-in-out infinite;
}


.ride-memory-subtitle {
    margin: 30px 0 45px;
    font-size: 17px;
    letter-spacing: 1px;
    opacity: 0.65;
}


.ride-memory-open-button,
.ride-memory-reveal-button,
.ride-memory-next {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 50px;
    padding: 15px 25px;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.ride-memory-open-button span,
.ride-memory-reveal-button span,
.ride-memory-next span {
    display: inline-block;
    margin-left: 10px;
    transition: transform .3s ease;
}


.ride-memory-open-button:hover,
.ride-memory-reveal-button:hover,
.ride-memory-next:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(0,0,0,.3);
}


.ride-memory-open-button:hover span,
.ride-memory-reveal-button:hover span,
.ride-memory-next:hover span {
    transform: translateX(5px);
}


/* -----------------------------------------
   STORY
----------------------------------------- */

.ride-memory-story {
    position: relative;
    z-index: 2;
    display: none;
    max-width: 1000px;
    margin: 0 auto;
}


.ride-memory-story.show {
    display: block;
    animation: rideStoryAppear 1.4s ease forwards;
}


/* -----------------------------------------
   NIGHT SCENE
----------------------------------------- */

.ride-scene {
    position: relative;
    height: 430px;
    margin: 0 auto 50px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(
            180deg,
            #111426 0%,
            #17182b 55%,
            #09090e 100%
        );
    box-shadow:
        inset 0 0 100px rgba(0,0,0,.5),
        0 25px 70px rgba(0,0,0,.35);
}


.ride-moon {
    position: absolute;
    width: 90px;
    height: 90px;
    right: 13%;
    top: 55px;
    border-radius: 50%;
    background: #f4edcf;
    box-shadow:
        0 0 25px rgba(255,245,200,.35),
        0 0 70px rgba(255,245,200,.15);
    animation: rideMoonFloat 6s ease-in-out infinite;
}


.ride-cloud {
    position: absolute;
    width: 150px;
    height: 35px;
    border-radius: 50px;
    background: rgba(255,255,255,.035);
    filter: blur(3px);
}


.cloud-one {
    top: 105px;
    left: 8%;
    animation: rideCloudMove 16s linear infinite;
}


.cloud-two {
    top: 170px;
    right: 5%;
    transform: scale(.75);
    animation: rideCloudMove 20s linear infinite reverse;
}


/* -----------------------------------------
   ROAD
----------------------------------------- */

.ride-road {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 105px;
    background:
        linear-gradient(
            180deg,
            #111116,
            #050507
        );
}


.ride-road::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255,255,255,.08);
}


.ride-road span {
    position: absolute;
    width: 100px;
    height: 4px;
    top: 50px;
    border-radius: 5px;
    background: rgba(255,255,255,.18);
    animation: roadLines 2.5s linear infinite;
}


.ride-road span:nth-child(1) {
    left: 0;
}


.ride-road span:nth-child(2) {
    left: 27%;
    animation-delay: -.8s;
}


.ride-road span:nth-child(3) {
    left: 57%;
    animation-delay: -1.5s;
}


.ride-road span:nth-child(4) {
    left: 85%;
    animation-delay: -2.1s;
}


/* -----------------------------------------
   BIKE
----------------------------------------- */

.ride-bike {
    position: absolute;
    left: 50%;
    bottom: 62px;
    width: 360px;
    height: 190px;
    transform: translateX(-50%);
    animation: bikeRide 4s ease-in-out infinite;
}


.ride-wheel {
    position: absolute;
    bottom: 5px;
    width: 92px;
    height: 92px;
    border: 4px solid rgba(220,220,230,.65);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,.4);
}


.wheel-back {
    left: 15px;
}


.wheel-front {
    right: 15px;
}


.ride-bike-frame {
    position: absolute;
    left: 70px;
    bottom: 42px;
    width: 220px;
    height: 65px;
    border-bottom: 4px solid rgba(210,210,220,.65);
    border-left: 4px solid rgba(210,210,220,.65);
    transform: skewX(-18deg);
}


.ride-rider,
.ride-dharshu {
    position: absolute;
    z-index: 3;
    font-size: 45px;
    filter: drop-shadow(0 8px 8px rgba(0,0,0,.45));
}


.ride-rider {
    left: 118px;
    bottom: 80px;
}


.ride-dharshu {
    left: 195px;
    bottom: 78px;
    font-size: 38px;
    animation: sleepingGirl 4s ease-in-out infinite;
}


.ride-hug {
    position: absolute;
    z-index: 4;
    left: 185px;
    bottom: 92px;
    font-size: 32px;
    opacity: .85;
    animation: hugPulse 2.8s ease-in-out infinite;
}


/* -----------------------------------------
   PARTICLES
----------------------------------------- */

.ride-particle {
    position: absolute;
    color: rgba(255,255,255,.7);
    font-size: 18px;
    animation: rideParticleFloat 4s ease-in-out infinite;
}


.particle-one {
    left: 20%;
    top: 30%;
}


.particle-two {
    left: 32%;
    top: 18%;
    animation-delay: -1s;
}


.particle-three {
    right: 25%;
    top: 35%;
    animation-delay: -2s;
}


.particle-four {
    right: 18%;
    top: 20%;
    animation-delay: -3s;
}


/* -----------------------------------------
   MEMORY TEXT
----------------------------------------- */

.ride-memory-copy {
    max-width: 720px;
    margin: 0 auto;
}


.ride-memory-small {
    margin-bottom: 25px;
    font-size: 10px;
    letter-spacing: 4px;
    opacity: .45;
}


.ride-memory-text {
    margin: 0 auto 25px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.7;
    opacity: .88;
}


.ride-memory-text span {
    display: block;
    margin-top: 5px;
    color: #e8dfff;
}


.ride-memory-text-soft {
    font-size: 17px;
    opacity: .55;
    font-family: inherit;
}


.ride-memory-reveal-button {
    margin-top: 20px;
}


/* -----------------------------------------
   HUG REVEAL
----------------------------------------- */

.ride-memory-heartbeat {
    position: relative;
    display: none;
    margin: 70px auto 0;
    padding: 70px 20px;
    max-width: 650px;
}


.ride-memory-heartbeat.show {
    display: block;
    animation: heartbeatReveal 2s ease forwards;
}


.hug-orbit {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    animation: orbitPulse 3s ease-in-out infinite;
}


.hug-symbol {
    position: relative;
    z-index: 2;
    font-size: 65px;
    line-height: 1;
    animation: heartBreath 2.2s ease-in-out infinite;
}


.hug-line {
    position: relative;
    z-index: 2;
    margin: 30px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.7;
}


.hug-line strong {
    font-size: 30px;
    font-weight: 400;
}


.hug-sleep {
    margin-top: 20px;
    font-family: inherit;
    font-size: 15px;
    opacity: .55;
}


/* -----------------------------------------
   FINAL FEELING
----------------------------------------- */

.ride-memory-feeling {
    display: none;
    max-width: 700px;
    margin: 50px auto 0;
}


.ride-memory-feeling.show {
    display: block;
    animation: feelingReveal 2s ease forwards;
}


.ride-memory-feeling > p:first-child {
    margin-bottom: 25px;
    font-size: 14px;
    letter-spacing: 2px;
    opacity: .5;
}


.ride-memory-feeling h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1.35;
    font-weight: 400;
}


.feeling-divider {
    width: 50px;
    height: 1px;
    margin: 40px auto;
    background: rgba(255,255,255,.3);
}


.ride-memory-final-text {
    font-size: 16px;
    line-height: 1.9;
    opacity: .58;
}


.ride-memory-final-text span {
    color: #eee4ff;
    opacity: 1;
}


.ride-memory-signature {
    margin-top: 45px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.7;
    opacity: .8;
}


/* -----------------------------------------
   NEXT BUTTON
----------------------------------------- */

.ride-memory-next {
    display: block;
    margin: 65px auto 0;
}


/* -----------------------------------------
   ANIMATIONS
----------------------------------------- */

@keyframes rideStoryAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes rideGlowPulse {
    0%, 100% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}


@keyframes rideStarsDrift {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(40px);
    }
}


@keyframes rideTitleFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


@keyframes rideMoonFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


@keyframes rideCloudMove {
    0% {
        transform: translateX(-80px);
    }

    50% {
        transform: translateX(80px);
    }

    100% {
        transform: translateX(-80px);
    }
}


@keyframes roadLines {
    from {
        transform: translateX(-160px);
    }

    to {
        transform: translateX(250px);
    }
}


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

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}


@keyframes sleepingGirl {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-4deg) translateY(3px);
    }
}


@keyframes hugPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}


@keyframes rideParticleFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: .3;
    }

    50% {
        transform: translateY(-20px);
        opacity: .9;
    }
}


@keyframes heartbeatReveal {
    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes orbitPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(.85);
        opacity: .25;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: .7;
    }
}


@keyframes heartBreath {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}


@keyframes feelingReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .ride-memory-section {
        padding: 80px 18px 100px;
    }


    .ride-memory-opening {
        padding-top: 5vh;
    }


    .ride-memory-opening h2 {
        font-size: 40px;
    }


    .ride-memory-subtitle {
        font-size: 15px;
        margin: 25px 0 35px;
    }


    .ride-scene {
        height: 350px;
        border-radius: 20px;
    }


    .ride-moon {
        width: 65px;
        height: 65px;
        right: 10%;
        top: 40px;
    }


    .ride-bike {
        transform: translateX(-50%) scale(.72);
        transform-origin: bottom center;
    }


    .ride-memory-text {
        font-size: 21px;
    }


    .ride-memory-text-soft {
        font-size: 15px;
    }


    .hug-line {
        font-size: 19px;
    }


    .hug-line strong {
        font-size: 25px;
    }


    .ride-memory-feeling h3 {
        font-size: 32px;
    }


    .ride-memory-final-text {
        font-size: 15px;
    }

}

/* =========================================
   STEP 7
   YOUR VOICE
========================================= */

.songs-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(210,185,155,0.045),
            transparent 55%
        );

}


/* =========================================
   OPENING
========================================= */

.songs-opening {

    min-height: 100vh;

    padding: 80px 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}


.songs-label {

    font-size: 10px;

    letter-spacing: 4px;

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

}


.songs-opening h2 {

    max-width: 900px;

    margin:
        30px 0 20px;

    font-size:
        clamp(42px, 6.5vw, 80px);

    line-height:
        1.15;

    font-weight:
        400;

    color:
        #f5efe7;

}


.songs-intro {

    max-width:
        650px;

    font-size:
        clamp(18px, 2.5vw, 27px);

    line-height:
        1.7;

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

}


.songs-start-button,
.songs-continue-button,
.songs-next-button {

    border:
        1px solid
        rgba(255,255,255,0.13);

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

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

    padding:
        15px 25px;

    border-radius:
        100px;

    font-family:
        inherit;

    font-size:
        12px;

    letter-spacing:
        1px;

    cursor:
        pointer;

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

}


.songs-start-button {

    margin-top:
        45px;

}


.songs-start-button:hover,
.songs-continue-button:hover,
.songs-next-button:hover {

    transform:
        translateY(-4px);

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

    border-color:
        rgba(232,217,197,0.3);

}


.songs-start-button span,
.songs-continue-button span,
.songs-next-button span {

    margin-left:
        8px;

}


/* =========================================
   SONG EXPERIENCE
========================================= */

.songs-experience {

    display:
        none;

    min-height:
        100vh;

    padding:
        100px 25px 120px;

    box-sizing:
        border-box;

    flex-direction:
        column;

    align-items:
        center;

}


.songs-experience.active {

    display:
        flex;

    animation:
        songsAppear
        1s ease;

}


.songs-small-title {

    margin:
        0 0 15px;

    font-size:
        10px;

    letter-spacing:
        4px;

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

}


.songs-experience > h3 {

    margin:
        0 0 55px;

    text-align:
        center;

    font-size:
        clamp(35px, 5vw, 60px);

    line-height:
        1.2;

    font-weight:
        400;

    color:
        #f5efe7;

}


/* =========================================
   SONG LIST
========================================= */

.songs-list {

    width:
        min(850px, 90vw);

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


/* =========================================
   SONG CARD
========================================= */

.song-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        18px 20px;

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

    border-radius:
        14px;

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

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(20px);

    animation:
        songCardAppear
        .7s ease forwards;

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

}


.song-card:hover {

    transform:
        translateX(5px);

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

    border-color:
        rgba(255,255,255,0.16);

}


.song-card.active {

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

    border-color:
        rgba(232,217,197,0.28);

}


/* NUMBER */

.song-number {

    width:
        35px;

    font-size:
        11px;

    letter-spacing:
        1px;

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

}


/* ICON */

.song-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        50%;

    font-size:
        13px;

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

    transition:
        transform .35s ease;

}


.song-card.active .song-icon {

    transform:
        scale(1.1);

}


/* TEXT */

.song-info {

    flex:
        1;

}


.song-info h4 {

    margin:
        0 0 5px;

    font-size:
        16px;

    font-weight:
        400;

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

}


.song-info p {

    margin:
        0;

    font-size:
        11px;

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

}


/* PLAY */

.song-play {

    width:
        38px;

    height:
        38px;

    border:
        0;

    border-radius:
        50%;

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

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

    cursor:
        pointer;

    transition:
        transform .3s ease,
        background .3s ease;

}


.song-play:hover {

    transform:
        scale(1.1);

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

}


/* =========================================
   CURRENT PLAYER
========================================= */

.current-song-player {

    width:
        min(850px, 90vw);

    margin-top:
        35px;

    padding:
        28px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        18px;

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

    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.current-song-player.show {

    opacity:
        1;

    transform:
        translateY(0);

}


.player-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.player-label {

    font-size:
        9px;

    letter-spacing:
        3px;

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

}


.player-top h4 {

    margin:
        10px 0 0;

    font-size:
        24px;

    font-weight:
        400;

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

}


.main-play-button {

    width:
        52px;

    height:
        52px;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius:
        50%;

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

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

    cursor:
        pointer;

    transition:
        transform .3s ease,
        background .3s ease;

}


.main-play-button:hover {

    transform:
        scale(1.08);

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

}


/* =========================================
   WAVE
========================================= */

.song-wave {

    height:
        60px;

    margin-top:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

}


.song-wave span {

    width:
        3px;

    height:
        15px;

    border-radius:
        5px;

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

    transition:
        height .2s ease;

}


.song-wave.playing span {

    animation:
        soundWave .8s ease-in-out infinite alternate;

}


.song-wave.playing span:nth-child(2n) {

    animation-delay:
        .15s;

}


.song-wave.playing span:nth-child(3n) {

    animation-delay:
        .3s;

}


.song-wave.playing span:nth-child(4n) {

    animation-delay:
        .45s;

}


@keyframes soundWave {

    from {

        height:
            10px;

    }

    to {

        height:
            45px;

    }

}


/* =========================================
   CONTINUE BUTTON
========================================= */

.songs-continue-button {

    margin-top:
        50px;

    opacity:
        0;

    pointer-events:
        none;

}


.songs-continue-button.show {

    opacity:
        1;

    pointer-events:
        auto;

}


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

.songs-ending {

    display:
        none;

    min-height:
        80vh;

    padding:
        100px 25px;

    box-sizing:
        border-box;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

}


.songs-ending.show {

    display:
        flex;

    animation:
        songsAppear
        1.2s ease;

}


.songs-ending p {

    max-width:
        650px;

    font-size:
        clamp(20px, 3vw, 30px);

    line-height:
        1.7;

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

}


.songs-ending h3 {

    max-width:
        800px;

    margin:
        25px 0;

    font-size:
        clamp(40px, 6vw, 72px);

    line-height:
        1.2;

    font-weight:
        400;

    color:
        #f5efe7;

}


.songs-next-button {

    margin-top:
        35px;

}


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

@keyframes songsAppear {

    from {

        opacity:
            0;

        transform:
            translateY(30px);

        filter:
            blur(5px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


@keyframes songCardAppear {

    from {

        opacity:
            0;

        transform:
            translateY(20px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 700px) {

    .songs-opening {

        padding:
            60px 18px;

    }


    .songs-opening h2 {

        font-size:
            43px;

    }


    .songs-experience {

        padding:
            70px 18px 100px;

    }


    .song-card {

        gap:
            12px;

        padding:
            15px;

    }


    .song-number {

        width:
            25px;

    }


    .song-icon {

        width:
            36px;

        height:
            36px;

    }


    .song-info h4 {

        font-size:
            14px;

    }


    .song-info p {

        font-size:
            10px;

    }


    .song-play {

        width:
            34px;

        height:
            34px;

    }


    .current-song-player {

        padding:
            20px;

    }


    .player-top h4 {

        font-size:
            19px;

    }

}

/* =========================================
   STEP 8
   TAMIL LETTER
========================================= */

.letter-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.035),
            transparent 60%
        );

}


/* =========================================
   MUSIC BUTTON
========================================= */

.letter-music-button {

    position: fixed;

    top: 25px;

    right: 25px;

    z-index: 100;

    width: 42px;

    height: 42px;

    border: 1px solid
        rgba(255,255,255,0.12);

    border-radius: 50%;

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

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

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition:
        all .3s ease;

}


.letter-music-button.show {

    opacity: 1;

    pointer-events: auto;

}


.letter-music-button:hover {

    transform:
        scale(1.1);

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

}


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

.letter-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}


.letter-particle {

    position: absolute;

    bottom: -20px;

    font-size: 12px;

    opacity: 0;

    animation:
        letterFloat
        linear forwards;

}


@keyframes letterFloat {

    0% {

        transform:
            translateY(0)
            scale(.7);

        opacity: 0;

    }

    15% {

        opacity: .35;

    }

    80% {

        opacity: .2;

    }

    100% {

        transform:
            translateY(-100vh)
            scale(1.2);

        opacity: 0;

    }

}


/* =========================================
   OPENING
========================================= */

.letter-opening {

    min-height: 100vh;

    padding:
        70px 25px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.letter-small-title {

    font-size:
        11px;

    letter-spacing:
        3px;

    opacity:
        .35;

}


.letter-opening h2 {

    margin:
        30px 0 25px;

    font-size:
        clamp(38px, 6vw, 75px);

    line-height:
        1.35;

    font-weight:
        400;

    color:
        #f4eee7;

}


.letter-opening-text {

    font-size:
        clamp(17px, 2.4vw, 24px);

    line-height:
        1.8;

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

}


.open-letter-button {

    margin-top:
        45px;

    padding:
        16px 28px;

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

    border-radius:
        100px;

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

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

    cursor:
        pointer;

    font-family:
        inherit;

    transition:
        all .35s ease;

}


.open-letter-button:hover {

    transform:
        translateY(-5px);

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

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

}


/* =========================================
   ENVELOPE AREA
========================================= */

.letter-envelope-area {

    display:
        none;

    min-height:
        100vh;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

}


.letter-envelope-area.show {

    display:
        flex;

    animation:
        letterFadeIn
        1s ease;

}


/* =========================================
   ENVELOPE
========================================= */

.letter-envelope {

    position:
        relative;

    width:
        min(400px, 75vw);

    aspect-ratio:
        1.5 / 1;

    perspective:
        900px;

}


.envelope-back {

    position:
        absolute;

    inset:
        0;

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

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

    border-radius:
        5px;

}


.envelope-paper {

    position:
        absolute;

    left:
        8%;

    right:
        8%;

    top:
        10%;

    height:
        85%;

    background:
        #eee7dc;

    color:
        #29241f;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        3px;

    transform:
        translateY(0);

    transition:
        transform 1.2s ease;

}


.envelope-paper p {

    font-size:
        20px;

}


.envelope-front {

    position:
        absolute;

    inset:
        0;

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

    clip-path:
        polygon(
            0 0,
            50% 55%,
            100% 0,
            100% 100%,
            0 100%
        );

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

}


.envelope-flap {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        65%;

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

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 100%
        );

    transform-origin:
        top center;

    transition:
        transform 1s ease;

    z-index:
        5;

}


/* OPEN ENVELOPE */

.letter-envelope.open
.envelope-flap {

    transform:
        rotateX(180deg);

}


.letter-envelope.open
.envelope-paper {

    transform:
        translateY(-65%);

}


.envelope-hint {

    margin-top:
        35px;

    font-size:
        13px;

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

}


/* =========================================
   LETTER CONTENT
========================================= */

.letter-content {

    display:
        none;

    min-height:
        100vh;

    padding:
        110px 25px 100px;

    box-sizing:
        border-box;

    max-width:
        850px;

    margin:
        auto;

}


.letter-content.show {

    display:
        block;

    animation:
        letterFadeIn
        1.2s ease;

}


.letter-greeting {

    font-size:
        clamp(38px, 6vw, 65px);

    color:
        #f5efe7;

    margin-bottom:
        60px;

}


.letter-lines p {

    font-size:
        clamp(18px, 2.3vw, 25px);

    line-height:
        2;

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

    margin:
        0 0 55px;

    opacity:
        0;

    transform:
        translateY(25px);

    filter:
        blur(5px);

    transition:
        all 1s ease;

}


.letter-lines p.visible {

    opacity:
        1;

    transform:
        translateY(0);

    filter:
        blur(0);

}


/* =========================================
   FINAL BUTTON
========================================= */

.letter-final-button {

    display:
        block;

    margin:
        80px auto 0;

    padding:
        15px 25px;

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

    border-radius:
        100px;

    background:
        transparent;

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

    cursor:
        pointer;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        all .4s ease;

}


.letter-final-button.show {

    opacity:
        1;

    pointer-events:
        auto;

}


.letter-final-button:hover {

    transform:
        translateY(-4px);

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

}


/* =========================================
   FINAL MESSAGE
========================================= */

.letter-final {

    display:
        none;

    min-height:
        100vh;

    padding:
        100px 25px;

    box-sizing:
        border-box;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    text-align:
        center;

}


.letter-final.show {

    display:
        flex;

    animation:
        letterFadeIn
        1.5s ease;

}


.final-small-text {

    font-size:
        12px;

    letter-spacing:
        3px;

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

}


.letter-final h3 {

    margin:
        30px 0;

    font-size:
        clamp(35px, 6vw, 70px);

    line-height:
        1.35;

    font-weight:
        400;

    color:
        #f5efe7;

}


.final-heart {

    font-size:
        45px;

    opacity:
        .65;

    animation:
        heartPulse
        2s infinite;

}


.final-main-text {

    margin-top:
        30px;

    font-size:
        clamp(25px, 4vw, 45px);

    line-height:
        1.7;

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

}


.final-main-text strong {

    color:
        #f5efe7;

    font-weight:
        400;

}


.final-signature {

    margin-top:
        40px;

    font-size:
        14px;

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

}


.letter-next-button {

    margin-top:
        55px;

    padding:
        15px 25px;

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

    border-radius:
        100px;

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

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

    cursor:
        pointer;

    transition:
        all .35s ease;

}


.letter-next-button:hover {

    transform:
        translateY(-4px);

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

}


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

@keyframes letterFadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(30px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes heartPulse {

    0%, 100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.15);

    }

}


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

@media (max-width: 600px) {

    .letter-opening {

        padding:
            50px 20px;

    }


    .letter-opening h2 {

        font-size:
            40px;

    }


    .letter-content {

        padding:
            80px 22px;

    }


    .letter-lines p {

        font-size:
            18px;

        line-height:
            1.9;

        margin-bottom:
            42px;

    }


    .letter-music-button {

        top:
            15px;

        right:
            15px;

    }

}

/* =========================================
   FINAL STEP
   DHARSHU'S 17TH BIRTHDAY
========================================= */

/* =========================================================
   FINAL BIRTHDAY STEP
========================================================= */

.birthday-finale {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   MUSIC BUTTON
========================================================= */

.final-music-button {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 1000;

    width: 46px;

    height: 46px;

    border-radius: 50%;

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

    background:
        rgba(0,0,0,.35);

    color: white;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition: .3s ease;

}

.final-music-button.show {

    opacity: 1;

    pointer-events: auto;

}

.final-music-button:hover {

    transform:
        scale(1.1);

}


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

.birthday-particles {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 900;

    overflow: hidden;

}

.birthday-particle {

    position: absolute;

    top: -40px;

    animation:
        birthdayFall
        linear
        forwards;

}

@keyframes birthdayFall {

    0% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: 0;

    }

    10% {

        opacity: 1;

    }

    100% {

        transform:
            translateY(110vh)
            rotate(720deg);

        opacity: 0;

    }

}


/* =========================================================
   OPENING
========================================================= */

.birthday-opening {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px 20px;

    box-sizing: border-box;

    animation:
        finalOpeningFloat
        4s
        ease-in-out
        infinite;

}

.final-eyebrow {

    font-size: 11px;

    letter-spacing: 4px;

    opacity: .35;

}

.birthday-opening h2 {

    font-size:
        clamp(48px, 8vw, 95px);

    line-height: 1.15;

    font-weight: 400;

    margin: 25px 0;

}

.final-opening-text {

    font-size: 17px;

    line-height: 1.8;

    opacity: .45;

}

.start-birthday-button {

    margin-top: 30px;

    padding:
        16px 34px;

    border-radius: 100px;

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

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

    color: white;

    cursor: pointer;

    transition: .35s ease;

}

.start-birthday-button:hover {

    transform:
        translateY(-5px)
        scale(1.05);

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

}


/* =========================================================
   CANDLE STAGE
========================================================= */

.birthday-cake-stage {

    display: none;

    min-height: 100vh;

    padding:
        45px 20px;

    box-sizing: border-box;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.birthday-cake-stage.show {

    display: flex;

    animation:
        birthdayFadeIn
        1s ease;

}

.cake-small-title {

    font-size: 11px;

    letter-spacing: 4px;

    opacity: .35;

}

.cake-title {

    font-size:
        clamp(32px, 5vw, 60px);

    font-weight: 400;

    margin:
        15px 0;

}

.cake-instruction {

    opacity: .4;

}


/* =========================================================
   CANDLES
========================================================= */

.candle-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-end;

    gap: 9px;

    max-width: 680px;

    margin:
        35px auto 5px;

}


.candle {

    position: relative;

    width: 25px;

    height: 80px;

    border-radius:
        5px 5px 2px 2px;

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

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

    cursor: pointer;

    transition:
        .35s ease;

}


.candle:hover {

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

}


.candle.lit {

    background:
        rgba(255,210,120,.3);

    box-shadow:
        0 0 25px
        rgba(255,200,100,.45);

}


/* =========================================================
   FLAME
========================================================= */

.candle-flame {

    position: absolute;

    left: 50%;

    top: -25px;

    width: 13px;

    height: 21px;

    transform:
        translateX(-50%)
        scale(0);

    border-radius:
        50%;

    background:
        rgba(255,210,100,.95);

    box-shadow:
        0 0 20px
        rgba(255,180,70,.8);

    transition:
        .3s ease;

}

.candle.lit .candle-flame {

    transform:
        translateX(-50%)
        scale(1);

    animation:
        flameMove
        .9s
        infinite
        alternate;

}


@keyframes flameMove {

    from {

        transform:
            translateX(-50%)
            scale(1)
            rotate(-4deg);

    }

    to {

        transform:
            translateX(-50%)
            scale(1.12)
            rotate(4deg);

    }

}


/* =========================================================
   CANDLE MESSAGE
========================================================= */

.candle-message {

    min-height: 90px;

    max-width: 760px;

    margin:
        15px auto;

    padding:
        0 10px;

    font-size:
        clamp(16px, 2.3vw, 22px);

    line-height: 1.7;

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        .5s ease;

}

.candle-message.show {

    opacity: 1;

    transform:
        translateY(0);

}


.candle-counter {

    font-size: 12px;

    letter-spacing: 2px;

    opacity: .3;

}


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

.birthday-cake {

    position: relative;

    width:
        min(450px, 88vw);

    height: 350px;

    margin:
        5px auto;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================================
   DARK CAKE SILHOUETTE
========================================================= */

.cake-silhouette {

    position: absolute;

    width: 90%;

    height: 230px;

    left: 5%;

    bottom: 10px;

    opacity: 1;

    transition:
        opacity 1s ease,
        transform 1s ease;

}


.silhouette-top {

    position: absolute;

    top: 0;

    left: 10%;

    right: 10%;

    height: 65px;

    border-radius: 50%;

    background:
        #111;

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

}


.silhouette-middle {

    position: absolute;

    top: 35px;

    left: 8%;

    right: 8%;

    height: 90px;

    border-radius: 12px;

    background:
        #101010;

}


.silhouette-bottom {

    position: absolute;

    bottom: 30px;

    left: 3%;

    right: 3%;

    height: 90px;

    border-radius: 12px;

    background:
        #090909;

}


.silhouette-plate {

    position: absolute;

    bottom: 10px;

    left: 0;

    right: 0;

    height: 18px;

    border-radius: 50%;

    background:
        #080808;

}


/* =========================================================
   REAL COLOURFUL CAKE
========================================================= */

.birthday-cake-image {

    position: absolute;

    width: 100%;

    max-height: 350px;

    object-fit: contain;

    opacity: 0;

    transform:
        scale(.7)
        translateY(20px);

    filter:
        brightness(.7);

    pointer-events: none;

    transition:
        opacity 1.4s ease,
        transform 1.4s ease,
        filter 1.4s ease;

    z-index: 5;

}


/* =========================================================
   REAL CAKE REVEAL
========================================================= */

.birthday-cake.revealed
.birthday-cake-image {

    opacity: 1;

    transform:
        scale(1.05)
        translateY(0);

    filter:
        brightness(1.15)
        saturate(1.15)
        drop-shadow(
            0 0 25px
            rgba(255,210,120,.6)
        )
        drop-shadow(
            0 0 60px
            rgba(255,180,80,.35)
        );

    animation:
        colourfulCakeGlow
        2s
        ease-in-out
        infinite
        alternate;

}


.birthday-cake.revealed
.cake-silhouette {

    opacity: 0;

    transform:
        scale(.75);

}


@keyframes colourfulCakeGlow {

    from {

        transform:
            scale(1.03);

    }

    to {

        transform:
            scale(1.08);

    }

}


/* =========================================================
   CAKE REVEAL TEXT
========================================================= */

.cake-reveal-text {

    display: none;

    font-size: 18px;

    letter-spacing: 2px;

    opacity: .8;

    animation:
        revealTextPulse
        1.5s
        infinite alternate;

}

.cake-reveal-text.show {

    display: block;

}


@keyframes revealTextPulse {

    from {

        opacity: .45;

    }

    to {

        opacity: 1;

    }

}


/* =========================================================
   BIG CELEBRATION
========================================================= */

.birthday-celebration {

    display: none;

    min-height: 100vh;

    padding:
        60px 20px;

    box-sizing: border-box;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

}


.birthday-celebration.show {

    display: flex;

    animation:
        celebrationAppear
        1.4s ease;

}


.celebration-glow {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background:
        rgba(255,200,100,.07);

    filter:
        blur(70px);

    animation:
        glowPulse
        3s
        infinite;

}


.celebration-small {

    position: relative;

    opacity: .4;

    letter-spacing: 3px;

    font-size: 11px;

}


.birthday-celebration h2 {

    position: relative;

    font-size:
        clamp(48px, 8vw, 100px);

    font-weight: 400;

    margin:
        15px 0 0;

}


.birthday-celebration h3 {

    position: relative;

    font-size:
        clamp(28px, 5vw, 55px);

    font-weight: 400;

    margin:
        8px 0 25px;

}


/* =========================================================
   PHOTO 1
========================================================= */

.final-photo-one {

    position: relative;

    width:
        min(330px, 82vw);

    border-radius: 20px;

    overflow: hidden;

    margin:
        15px auto;

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

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.3);

}


.final-photo-one img {

    display: block;

    width: 100%;

    height: 330px;

    object-fit: cover;

}


.celebration-text {

    position: relative;

    max-width: 550px;

    line-height: 1.8;

    opacity: .45;

}


.make-wish-button {

    position: relative;

    margin-top: 20px;

    padding:
        17px 32px;

    border-radius: 100px;

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

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

    color: white;

    cursor: pointer;

    transition:
        .35s ease;

}


.make-wish-button:hover {

    transform:
        scale(1.05)
        translateY(-3px);

}


/* =========================================================
   WISH / SURPRISE / MESSAGE
========================================================= */

.wish-section,
.gift-section,
.message-section {

    display: none;

    min-height: 100vh;

    padding:
        50px 20px;

    box-sizing: border-box;

    align-items: center;

    justify-content: center;

}


.wish-section.show,
.gift-section.show,
.message-section.show {

    display: flex;

    animation:
        birthdayFadeIn
        1s ease;

}


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

.wish-card,
.gift-card,
.message-card {

    width:
        min(700px, 100%);

    padding:
        45px 35px;

    box-sizing: border-box;

    text-align: center;

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

    border-radius: 25px;

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.2);

}


.wish-icon,
.gift-icon,
.message-icon {

    font-size: 45px;

}


.wish-label {

    font-size: 10px;

    letter-spacing: 3px;

    opacity: .35;

}


.wish-card h2,
.gift-card h2,
.message-card h2 {

    font-size:
        clamp(28px, 5vw, 48px);

    font-weight: 400;

    line-height: 1.4;

    margin:
        15px 0;

}


.wish-card p,
.gift-card p,
.message-card p {

    line-height: 1.8;

    opacity: .5;

}


/* =========================================================
   TEXT BOX
========================================================= */

.birthday-input {

    display: block;

    width: 100%;

    min-height: 150px;

    box-sizing: border-box;

    margin-top: 25px;

    padding: 18px;

    resize: vertical;

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

    border-radius: 15px;

    background:
        rgba(0,0,0,.2);

    color: white;

    outline: none;

    font-family: inherit;

    font-size: 16px;

    line-height: 1.6;

}


.birthday-input:focus {

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

    box-shadow:
        0 0 25px
        rgba(255,255,255,.04);

}


.birthday-input::placeholder {

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

}


/* =========================================================
   BUTTONS
========================================================= */

.wish-continue-button,
.send-answers-button {

    margin-top: 25px;

    padding:
        15px 30px;

    border-radius: 100px;

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

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

    color: white;

    cursor: pointer;

    transition:
        .3s ease;

}


.wish-continue-button:hover,
.send-answers-button:hover {

    transform:
        translateY(-4px);

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

}

/* =========================================
   DISABLED QUESTION BUTTON
========================================= */

.wish-continue-button:disabled,
.send-answers-button:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}


.wish-continue-button:disabled:hover,
.send-answers-button:disabled:hover {
    transform: none;
    background: rgba(255,255,255,.04);
}

/* =========================================================
   STATUS
========================================================= */

.form-status {

    min-height: 25px;

    margin-top: 18px;

    font-size: 14px;

    opacity: .6;

}


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

.final-memory-section {

    display: none;

    min-height: 100vh;

    padding:
        70px 20px;

    box-sizing: border-box;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.final-memory-section.show {

    display: flex;

    animation:
        birthdayFadeIn
        1.5s ease;

}


.final-memory-small {

    opacity: .35;

    letter-spacing: 2px;

    font-size: 11px;

}


.final-photo-two {

    width:
        min(300px, 75vw);

    margin:
        18px auto;

    border-radius: 18px;

    overflow: hidden;

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

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.3);

}


.final-photo-two img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}


.final-memory-section h2 {

    max-width: 850px;

    font-size:
        clamp(35px, 6vw, 75px);

    line-height: 1.25;

    font-weight: 400;

}


.final-goodbye {

    font-size: 18px;

    line-height: 1.8;

    opacity: .45;

}


.final-signature {

    margin-top: 25px;

    opacity: .3;

}


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

@keyframes birthdayFadeIn {

    from {

        opacity: 0;

        transform:
            translateY(30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes celebrationAppear {

    from {

        opacity: 0;

        transform:
            scale(.8);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


@keyframes finalOpeningFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


@keyframes glowPulse {

    0%,
    100% {

        transform:
            scale(.8);

        opacity: .4;

    }

    50% {

        transform:
            scale(1.15);

        opacity: .8;

    }

}


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

@media (max-width: 600px) {

    .birthday-cake-stage {

        padding:
            40px 10px;

    }


    .candle-container {

        max-width:
            350px;

        gap:
            6px;

    }


    .candle {

        width:
            18px;

        height:
            65px;

    }


    .candle-flame {

        width:
            11px;

        height:
            18px;

        top:
            -21px;

    }


    .birthday-cake {

        width:
            min(350px, 92vw);

        height:
            280px;

    }


    .birthday-cake-image {

        max-height:
            280px;

    }


    .candle-message {

        min-height:
            100px;

        font-size:
            16px;

    }


    .wish-card,
    .gift-card,
    .message-card {

        padding:
            35px 20px;

    }


    .final-photo-one img {

        height:
            280px;

    }


    .final-music-button {

        top:
            15px;

        right:
            15px;

    }

    .final-photo-two {
    width: min(260px, 72vw);
}

.final-photo-two img {
    height: 200px;
}

}


@media (max-width: 380px) {

    .candle-container {

        max-width:
            310px;

    }


    .candle {

        width:
            16px;

        height:
            58px;

    }


    .birthday-cake {

        width:
            300px;

    }

}

/* ================================= */
/* POINT 9 - SPECIAL SONG MEMORY     */
/* ================================= */

.song-memory-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at top left,
            rgba(255, 105, 180, 0.18),
            transparent 35%),
        radial-gradient(circle at bottom right,
            rgba(120, 90, 255, 0.18),
            transparent 35%),
        linear-gradient(135deg, #120b20, #21102d, #0d0a16);

    color: white;
}


/* Floating glow */

.song-memory-section::before,
.song-memory-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.song-memory-section::before {
    width: 180px;
    height: 180px;
    background: rgba(255, 120, 190, 0.18);
    top: 10%;
    left: 5%;
    animation: songGlowOne 6s ease-in-out infinite alternate;
}

.song-memory-section::after {
    width: 220px;
    height: 220px;
    background: rgba(120, 100, 255, 0.15);
    bottom: 5%;
    right: 5%;
    animation: songGlowTwo 7s ease-in-out infinite alternate;
}


@keyframes songGlowOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, 30px) scale(1.2);
    }
}


@keyframes songGlowTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-40px, -30px) scale(1.15);
    }
}


/* Main card */

.song-memory-card {
    width: min(720px, 92vw);
    padding: 45px 50px;
    text-align: center;

    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;

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

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45);

    position: relative;
    z-index: 2;

    animation: songCardAppear 1.2s ease forwards;
}


@keyframes songCardAppear {

    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Number */

.song-memory-number {
    font-size: 14px;
    letter-spacing: 5px;
    opacity: 0.55;
    margin-bottom: 15px;
}


/* Music icon */

.song-memory-icon {
    font-size: 52px;
    margin-bottom: 15px;

    animation: musicFloat 2.5s ease-in-out infinite;
}


@keyframes musicFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-10px) rotate(3deg);
    }
}


/* Heading */

.song-memory-card h2 {
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.3;
    margin: 0;

    font-weight: 600;

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


/* Divider */

.song-memory-line {
    width: 80px;
    height: 2px;
    margin: 25px auto;

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

    border-radius: 10px;
}


/* Paragraphs */

.song-memory-card p {
    max-width: 600px;
    margin: 20px auto;

    font-size: 17px;
    line-height: 1.8;

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


/* Final emotional sentence */

.song-memory-final {
    margin-top: 30px !important;

    font-size: 19px !important;
    line-height: 1.7 !important;

    color: white !important;

    font-weight: 500;

    text-shadow:
        0 0 15px rgba(255, 160, 210, 0.25);
}


/* Song player */

.song-memory-player {
    margin-top: 35px;
    display: flex;
    justify-content: center;
}


/* Play button */

#memorySongButton {
    border: none;
    outline: none;

    padding: 14px 28px;

    border-radius: 50px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    color: white;

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

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

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


#memorySongButton:hover {
    transform: translateY(-4px) scale(1.03);

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

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);
}


#memorySongButton:active {
    transform: scale(0.96);
}


/* Continue button */

.song-memory-next {
    display: block;

    margin: 25px auto 0;

    padding: 13px 25px;

    border: none;
    border-radius: 30px;

    background: transparent;

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

    font-size: 14px;

    cursor: pointer;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.song-memory-next:hover {
    color: white;
    transform: translateY(-3px);
}


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

@media (max-width: 600px) {

    .song-memory-section {
        padding: 35px 15px;
    }

    .song-memory-card {
        padding: 35px 22px;
        border-radius: 24px;
    }

    .song-memory-icon {
        font-size: 44px;
    }

    .song-memory-card p {
        font-size: 15px;
        line-height: 1.7;
    }

    .song-memory-final {
        font-size: 17px !important;
    }

    #memorySongButton {
        padding: 13px 23px;
        font-size: 15px;
    }
}

/* =========================================================
   STEP 2 — SCHOOL MEMORY SPECIAL
   CENTERED LEFT TEXT + RIGHT PHOTO
========================================================= */

.school-memory-special {
    position: relative;

    width: 100%;
    max-width: 1400px;

    min-height: 700px;

    margin: 0 auto;

    padding: 70px 30px 70px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);

    align-items: center;

    gap: 55px;

    overflow: visible;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.school-memory-left {

    position: relative;

    z-index: 5;

    text-align: left;

}


/* =========================================================
   "WHENEVER I THINK..."
========================================================= */

.school-memory-question {

    margin: 0 0 20px;

    font-size: clamp(18px, 2vw, 25px);

    line-height: 1.5;

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

    font-weight: 400;

}


.question-heart {

    display: inline-block;

    margin-left: 4px;

    color: #ff6fae;

    font-size: 1.2em;

    text-shadow:
        0 0 8px rgba(255, 80, 160, 0.8),
        0 0 20px rgba(255, 80, 160, 0.5);

    animation: schoolHeartBeat 1.8s ease-in-out infinite;

}


/* =========================================================
   MAIN TITLE
========================================================= */

.school-memory-title {

    position: relative;

    margin: 0 0 42px;

    max-width: 850px;

    font-size: clamp(38px, 4.3vw, 68px);

    line-height: 1.15;

    font-weight: 500;

    color: #fff8ee;

    letter-spacing: -1px;

    text-shadow:
        0 0 12px rgba(255, 220, 190, 0.25),
        0 0 35px rgba(255, 160, 200, 0.08);

}


.title-heart {

    display: inline-block;

    margin-left: 8px;

    color: #ff72b0;

    font-size: 0.55em;

    vertical-align: middle;

    text-shadow:
        0 0 8px rgba(255, 70, 150, 0.9),
        0 0 25px rgba(255, 70, 150, 0.6);

    animation: titleHeartFloat 2.2s ease-in-out infinite;

}


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

.school-memory-story {

    position: relative;

    padding-left: 38px;

    border-left: 1px solid rgba(255, 255, 255, 0.16);

}


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

.school-memory-intro {

    margin: 0 0 28px;

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.7;

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

}


/* =========================================================
   INDIVIDUAL MEMORY LINE
========================================================= */

.memory-line {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 74px;

    padding: 8px 0;

}


/* =========================================================
   ICON CIRCLE
========================================================= */

.memory-icon {

    flex-shrink: 0;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    background: rgba(10, 15, 30, 0.65);

    position: relative;

}


/* =========================================================
   ICON GLOW COLORS
========================================================= */

.book-icon {

    border: 1px solid rgba(90, 235, 240, 0.8);

    box-shadow:
        0 0 8px rgba(90, 235, 240, 0.65),
        inset 0 0 15px rgba(90, 235, 240, 0.08);

}


.girl-icon {

    border: 1px solid rgba(255, 125, 180, 0.8);

    box-shadow:
        0 0 8px rgba(255, 100, 175, 0.65),
        inset 0 0 15px rgba(255, 100, 175, 0.08);

}


.cute-icon {

    border: 1px solid rgba(255, 210, 80, 0.8);

    box-shadow:
        0 0 8px rgba(255, 210, 80, 0.65),
        inset 0 0 15px rgba(255, 210, 80, 0.08);

}


.school-icon {

    border: 1px solid rgba(180, 120, 255, 0.8);

    box-shadow:
        0 0 8px rgba(180, 120, 255, 0.65),
        inset 0 0 15px rgba(180, 120, 255, 0.08);

}


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

.memory-line-content {

    position: relative;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 12px;

    border-bottom: 2px dotted rgba(90, 220, 225, 0.45);

}


.memory-line-two .memory-line-content {

    border-bottom-color:
        rgba(255, 110, 175, 0.45);

}


.memory-line-three .memory-line-content {

    border-bottom-color:
        rgba(255, 205, 75, 0.45);

}


.memory-line-four .memory-line-content {

    border-bottom-color:
        rgba(180, 125, 255, 0.45);

}


.memory-line-content > span:first-child {

    font-size: clamp(20px, 2.1vw, 29px);

    line-height: 1.4;

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

}


/* =========================================================
   SMALL EMOJI
========================================================= */

.memory-small-emoji {

    font-size: 24px;

    flex-shrink: 0;

    filter:
        drop-shadow(0 0 7px rgba(255,255,255,0.4));

}


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

.school-memory-ending {

    max-width: 780px;

    margin: 45px 0 0;

    padding-left: 38px;

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.8;

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

}


.school-memory-ending span {

    color: #ff70ae;

    font-size: 1.3em;

    margin-left: 5px;

    text-shadow:
        0 0 10px rgba(255, 80, 160, 0.8);

}


/* =========================================================
   RIGHT SIDE
========================================================= */

.school-memory-right {

    position: relative;

    min-height: 610px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   PHOTO FRAME
========================================================= */

.school-photo-frame {

    position: relative;

    width: min(490px, 100%);

    z-index: 5;

    padding: 2px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 115, 175, 0.9),
            rgba(255, 220, 180, 0.85),
            rgba(110, 235, 240, 0.8),
            rgba(190, 110, 255, 0.85)
        );

    box-shadow:
        0 0 15px rgba(255, 100, 170, 0.45),
        0 0 45px rgba(255, 100, 170, 0.22),
        0 25px 80px rgba(0, 0, 0, 0.55);

    animation: schoolPhotoFloat 5s ease-in-out infinite;

}


/* =========================================================
   PHOTO
========================================================= */

.school-memory-photo {

    display: block;

    width: 100%;

    height: 590px;

    object-fit: cover;

    object-position: center;

    border-radius: 23px;

    background: #10111b;

}


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

.school-photo-glow {

    position: absolute;

    width: 90%;

    height: 90%;

    left: 5%;

    top: 5%;

    border-radius: 30px;

    background:
        radial-gradient(
            circle,
            rgba(255, 100, 175, 0.3),
            transparent 65%
        );

    filter: blur(45px);

    z-index: -1;

    animation: schoolPhotoGlow 4s ease-in-out infinite alternate;

}


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

.school-decor {

    position: absolute;

    z-index: 10;

    pointer-events: none;

    user-select: none;

}


/* =========================================================
   HEART TOP LEFT
========================================================= */

.heart-one {

    top: 20px;

    left: 15px;

    font-size: 80px;

    color: #ff6fae;

    transform: rotate(-15deg);

    text-shadow:
        0 0 8px #ff6fae,
        0 0 25px rgba(255, 80, 160, 0.75),
        0 0 50px rgba(255, 80, 160, 0.35);

    animation:
        decorationFloat 3s ease-in-out infinite;

}


/* =========================================================
   HEART RIGHT
========================================================= */

.heart-two {

    right: -35px;

    top: 48%;

    font-size: 68px;

    color: #ff6fae;

    text-shadow:
        0 0 8px #ff6fae,
        0 0 25px rgba(255, 80, 160, 0.7);

    animation:
        decorationFloat 3.5s ease-in-out infinite reverse;

}


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

.star-one {

    top: 110px;

    right: -55px;

    font-size: 65px;

    color: #ffd05c;

    text-shadow:
        0 0 8px #ffd05c,
        0 0 25px rgba(255, 190, 60, 0.7),
        0 0 45px rgba(255, 190, 60, 0.35);

    animation:
        starTwinkle 2s ease-in-out infinite;

}


.star-two {

    top: 185px;

    right: -28px;

    font-size: 43px;

    color: #ffd05c;

    text-shadow:
        0 0 8px #ffd05c,
        0 0 20px rgba(255, 190, 60, 0.65);

    animation:
        starTwinkle 2.5s ease-in-out infinite 0.5s;

}


/* =========================================================
   TINY STAR
========================================================= */

.tiny-star {

    bottom: 110px;

    right: -45px;

    font-size: 30px;

    color: #ffca55;

    text-shadow:
        0 0 10px #ffca55;

    animation:
        starTwinkle 2.2s ease-in-out infinite;

}


/* =========================================================
   BUTTERFLY
========================================================= */

.butterfly {

    right: -95px;

    bottom: 35px;

    font-size: 105px;

    filter:
        drop-shadow(0 0 8px rgba(190, 110, 255, 0.9))
        drop-shadow(0 0 25px rgba(190, 110, 255, 0.6))
        drop-shadow(0 0 45px rgba(190, 110, 255, 0.3));

    animation:
        butterflyFloat 4s ease-in-out infinite;

}


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

@keyframes schoolHeartBeat {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.18);

    }

}


@keyframes titleHeartFloat {

    0%, 100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-6px)
            scale(1.12);

    }

}


@keyframes schoolPhotoFloat {

    0%, 100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-8px)
            rotate(0.4deg);

    }

}


@keyframes schoolPhotoGlow {

    from {

        opacity: 0.45;

        transform: scale(0.95);

    }

    to {

        opacity: 0.9;

        transform: scale(1.05);

    }

}


@keyframes decorationFloat {

    0%, 100% {

        transform:
            translateY(0)
            rotate(-8deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(5deg);

    }

}


@keyframes starTwinkle {

    0%, 100% {

        opacity: 0.45;

        transform: scale(0.9);

    }

    50% {

        opacity: 1;

        transform: scale(1.15);

    }

}


@keyframes butterflyFloat {

    0%, 100% {

        transform:
            translate(0, 0)
            rotate(-5deg);

    }

    50% {

        transform:
            translate(-10px, -15px)
            rotate(5deg);

    }

}


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

@media (max-width: 900px) {

    .school-memory-special {
        width: 100%;
        max-width: 700px;

        margin: 0 auto;

        padding: 60px 25px 50px;

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .school-memory-left {

        text-align: center;

    }


    .school-memory-title {

        margin-left: auto;

        margin-right: auto;

    }


    .school-memory-story {

        text-align: left;

    }


    .school-memory-ending {

        margin-left: auto;

        margin-right: auto;

        text-align: center;

        padding-left: 0;

    }


    .school-memory-right {

        min-height: auto;

        padding: 20px 30px 70px;

    }


    .school-photo-frame {

        width: min(420px, 88vw);

    }


    .school-memory-photo {

        height: 520px;

    }


    .heart-one {

        left: -5px;

        top: 5px;

        font-size: 60px;

    }


    .heart-two {

        right: -5px;

        top: 45%;

        font-size: 55px;

    }


    .star-one {

        right: -5px;

        top: 90px;

        font-size: 50px;

    }


    .star-two {

        right: 5px;

        top: 150px;

        font-size: 35px;

    }


    .butterfly {

        right: -15px;

        bottom: 20px;

        font-size: 75px;

    }

}


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

@media (max-width: 600px) {

    .school-memory-special {

        width: 94vw;

        left: 50%;

        transform: translateX(-50%);

        margin: 0;

        padding: 50px 15px 45px;

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .school-memory-question {

        font-size: 18px;

    }


    .school-memory-title {

        font-size: 38px;

        line-height: 1.2;

        letter-spacing: -0.5px;

        margin-bottom: 32px;

    }


    .school-memory-story {

        padding-left: 18px;

    }


    .school-memory-intro {

        font-size: 17px;

    }


    .memory-line {

        gap: 12px;

        min-height: 65px;

    }


    .memory-icon {

        width: 44px;

        height: 44px;

        font-size: 21px;

    }


    .memory-line-content {

        gap: 8px;

    }


    .memory-line-content > span:first-child {

        font-size: 17px;

    }


    .memory-small-emoji {

        font-size: 19px;

    }


    .school-memory-ending {

        font-size: 17px;

        line-height: 1.7;

        margin-top: 35px;

    }


    .school-memory-right {

        padding:
            15px 25px 60px;

    }


    .school-photo-frame {

        width: min(340px, 82vw);

    }


    .school-memory-photo {

        height: 430px;

    }


    .heart-one {

        left: -8px;

        top: 0;

        font-size: 48px;

    }


    .heart-two {

        right: -8px;

        font-size: 45px;

    }


    .star-one {

        right: -5px;

        top: 65px;

        font-size: 40px;

    }


    .star-two {

        right: 5px;

        top: 115px;

        font-size: 28px;

    }


    .tiny-star {

        right: -5px;

        bottom: 90px;

        font-size: 22px;

    }


    .butterfly {

        right: -12px;

        bottom: 10px;

        font-size: 60px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .school-memory-title {

        font-size: 34px;

    }


    .memory-line-content > span:first-child {

        font-size: 15px;

    }


    .memory-icon {

        width: 40px;

        height: 40px;

        font-size: 19px;

    }


    .school-memory-photo {

        height: 390px;

    }

}

/* =========================================================
   STEP 2 — SCHOOL MEMORY SPECIAL DESIGN
   PERFECTLY CENTERED
========================================================= */

.school-memory-special {

    position: relative;

    width: 100%;
    max-width: 1400px;

    min-height: 700px;

    margin: 0 auto;

    padding: 60px 30px 70px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.75fr);

    align-items: center;

    gap: 60px;

    overflow: visible;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.school-memory-left {
    position: relative;
    z-index: 5;
    text-align: left;
}


/* =========================================================
   WHENEVER I THINK OF PRIYA
========================================================= */

.school-memory-question {
    margin: 0 0 20px;

    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.5;

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


.question-heart {
    display: inline-block;

    margin-left: 5px;

    color: #ff6fae;

    font-size: 1.25em;

    text-shadow:
        0 0 8px #ff6fae,
        0 0 20px rgba(255,80,160,.7);

    animation: schoolHeartBeat 1.8s ease-in-out infinite;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.school-memory-title {
    position: relative;

    margin: 0 0 40px;

    max-width: 800px;

    font-size: clamp(42px, 4.4vw, 68px);

    line-height: 1.12;

    font-weight: 500;

    color: #fff8ee;

    letter-spacing: -1.5px;

    text-shadow:
        0 0 12px rgba(255,220,190,.25),
        0 0 35px rgba(255,120,180,.12);
}


.title-heart {
    display: inline-block;

    margin-left: 8px;

    color: #ff72b0;

    font-size: .55em;

    vertical-align: middle;

    text-shadow:
        0 0 8px #ff4696,
        0 0 25px rgba(255,70,150,.7);

    animation: titleHeartFloat 2.2s ease-in-out infinite;
}


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

.school-memory-story {
    position: relative;

    padding-left: 38px;

    border-left:
        1px solid rgba(255,255,255,.16);
}


/* INTRO */

.school-memory-intro {
    margin: 0 0 25px;

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.7;

    color: rgba(255,255,255,.68);
}


/* =========================================================
   FOUR MEMORY LINES
========================================================= */

.memory-line {
    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 74px;

    padding: 8px 0;
}


/* =========================================================
   ICON CIRCLE
========================================================= */

.memory-icon {
    flex-shrink: 0;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    display: flex;

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

    font-size: 25px;

    background:
        rgba(8,12,25,.8);

    position: relative;
}


/* =========================================================
   ICON COLORS
========================================================= */

.book-icon {
    border: 1px solid rgba(90,235,240,.9);

    box-shadow:
        0 0 10px rgba(90,235,240,.7),
        inset 0 0 15px rgba(90,235,240,.08);
}


.girl-icon {
    border: 1px solid rgba(255,105,175,.9);

    box-shadow:
        0 0 10px rgba(255,100,175,.7),
        inset 0 0 15px rgba(255,100,175,.08);
}


.cute-icon {
    border: 1px solid rgba(255,210,80,.9);

    box-shadow:
        0 0 10px rgba(255,210,80,.7),
        inset 0 0 15px rgba(255,210,80,.08);
}


.school-icon {
    border: 1px solid rgba(180,120,255,.9);

    box-shadow:
        0 0 10px rgba(180,120,255,.7),
        inset 0 0 15px rgba(180,120,255,.08);
}


/* =========================================================
   MEMORY TEXT + DOTTED LINE
========================================================= */

.memory-line-content {
    position: relative;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 12px;

    border-bottom:
        2px dotted rgba(90,220,225,.5);
}


.memory-line-two .memory-line-content {
    border-bottom-color:
        rgba(255,110,175,.5);
}


.memory-line-three .memory-line-content {
    border-bottom-color:
        rgba(255,205,75,.5);
}


.memory-line-four .memory-line-content {
    border-bottom-color:
        rgba(180,125,255,.5);
}


.memory-line-content > span:first-child {
    font-size: clamp(20px, 2.1vw, 29px);

    line-height: 1.4;

    color: rgba(255,255,255,.9);
}


/* =========================================================
   SMALL EMOJI
========================================================= */

.memory-small-emoji {
    flex-shrink: 0;

    font-size: 24px;

    filter:
        drop-shadow(0 0 7px rgba(255,255,255,.5));
}


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

.school-memory-ending {
    max-width: 780px;

    margin: 45px 0 0;

    padding-left: 38px;

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.8;

    color: rgba(255,255,255,.65);
}


.school-memory-ending span {
    color: #ff70ae;

    font-size: 1.3em;

    margin-left: 5px;

    text-shadow:
        0 0 10px rgba(255,80,160,.9);
}


/* =========================================================
   RIGHT PHOTO AREA
========================================================= */

.school-memory-right {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   PHOTO FRAME
========================================================= */

.school-photo-frame {
    position: relative;

    width: min(470px, 100%);

    z-index: 5;

    padding: 2px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #ff73af,
            #ffdca8,
            #6eebf0,
            #be6eff
        );

    box-shadow:
        0 0 18px rgba(255,100,170,.5),
        0 0 50px rgba(255,100,170,.25),
        0 25px 80px rgba(0,0,0,.55);

    animation:
        schoolPhotoFloat 5s ease-in-out infinite;
}


/* =========================================================
   PHOTO
========================================================= */

.school-memory-photo {
    display: block;

    width: 100%;

    height: 600px;

    object-fit: cover;

    object-position: center;

    border-radius: 23px;

    background: #10111b;
}


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

.school-photo-glow {
    position: absolute;

    width: 90%;
    height: 90%;

    left: 5%;
    top: 5%;

    border-radius: 30px;

    background:
        radial-gradient(
            circle,
            rgba(255,100,175,.35),
            transparent 65%
        );

    filter: blur(45px);

    z-index: -1;

    animation:
        schoolPhotoGlow 4s ease-in-out infinite alternate;
}


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

.school-decor {
    position: absolute;

    z-index: 20;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   BIG HEART — TOP LEFT OF PHOTO
========================================================= */

.heart-one {
    top: 15px;
    left: -25px;

    font-size: 75px;

    color: #ff6fae;

    transform: rotate(-15deg);

    text-shadow:
        0 0 8px #ff6fae,
        0 0 25px rgba(255,80,160,.8),
        0 0 50px rgba(255,80,160,.4);

    animation:
        decorationFloat 3s ease-in-out infinite;
}


/* =========================================================
   HEART — RIGHT SIDE
========================================================= */

.heart-two {
    right: -20px;
    top: 48%;

    font-size: 65px;

    color: #ff6fae;

    text-shadow:
        0 0 8px #ff6fae,
        0 0 25px rgba(255,80,160,.8);

    animation:
        decorationFloat 3.5s ease-in-out infinite reverse;
}


/* =========================================================
   BIG STAR
========================================================= */

.star-one {
    top: 80px;
    right: -25px;

    font-size: 65px;

    color: #ffd05c;

    text-shadow:
        0 0 8px #ffd05c,
        0 0 25px rgba(255,190,60,.8),
        0 0 45px rgba(255,190,60,.4);

    animation:
        starTwinkle 2s ease-in-out infinite;
}


/* =========================================================
   SECOND STAR
========================================================= */

.star-two {
    top: 160px;
    right: -5px;

    font-size: 43px;

    color: #ffd05c;

    text-shadow:
        0 0 8px #ffd05c,
        0 0 20px rgba(255,190,60,.7);

    animation:
        starTwinkle 2.5s ease-in-out infinite .5s;
}


/* =========================================================
   TINY STAR
========================================================= */

.tiny-star {
    bottom: 95px;
    right: -15px;

    font-size: 30px;

    color: #ffca55;

    text-shadow:
        0 0 10px #ffca55;

    animation:
        starTwinkle 2.2s ease-in-out infinite;
}


/* =========================================================
   BUTTERFLY
========================================================= */

.butterfly {
    right: -20px;
    bottom: 25px;

    font-size: 95px;

    filter:
        drop-shadow(0 0 8px rgba(190,110,255,.95))
        drop-shadow(0 0 25px rgba(190,110,255,.7))
        drop-shadow(0 0 45px rgba(190,110,255,.4));

    animation:
        butterflyFloat 4s ease-in-out infinite;
}


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

@keyframes schoolHeartBeat {

    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}


@keyframes titleHeartFloat {

    0%, 100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-6px)
            scale(1.12);
    }
}


@keyframes schoolPhotoFloat {

    0%, 100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(.4deg);
    }
}


@keyframes schoolPhotoGlow {

    from {
        opacity: .45;
        transform: scale(.95);
    }

    to {
        opacity: .9;
        transform: scale(1.05);
    }
}


@keyframes decorationFloat {

    0%, 100% {
        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(5deg);
    }
}


@keyframes starTwinkle {

    0%, 100% {
        opacity: .45;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


@keyframes butterflyFloat {

    0%, 100% {
        transform:
            translate(0, 0)
            rotate(-5deg);
    }

    50% {
        transform:
            translate(-12px, -18px)
            rotate(5deg);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .school-memory-special {
        grid-template-columns: 1fr;

        width: min(850px, 94vw);

        gap: 45px;

        padding:
            70px 20px 50px;
    }


    .school-memory-left {
        text-align: center;
    }


    .school-memory-title {
        margin-left: auto;
        margin-right: auto;
    }


    .school-memory-story {
        text-align: left;
    }


    .school-memory-ending {
        margin-left: auto;
        margin-right: auto;

        text-align: center;

        padding-left: 0;
    }


    .school-memory-right {
        min-height: auto;

        padding:
            20px 20px 80px;
    }


    .school-photo-frame {
        width: min(430px, 82vw);
    }


    .school-memory-photo {
        height: 540px;
    }


    .heart-one {
        left: -10px;
    }


    .heart-two {
        right: -5px;
    }


    .star-one {
        right: -5px;
    }


    .star-two {
        right: 5px;
    }


    .tiny-star {
        right: 0;
    }


    .butterfly {
        right: -5px;
        bottom: 20px;
    }
}


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

@media (max-width: 600px) {

    .school-memory-special {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding: 50px 15px 45px;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .school-memory-question {
        font-size: 18px;
    }


    .school-memory-title {
        font-size: 38px;

        line-height: 1.2;

        letter-spacing: -.5px;

        margin-bottom: 30px;
    }


    .school-memory-story {
        padding-left: 18px;
    }


    .school-memory-intro {
        font-size: 17px;
    }


    .memory-line {
        gap: 12px;

        min-height: 65px;
    }


    .memory-icon {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }


    .memory-line-content {
        gap: 8px;
    }


    .memory-line-content > span:first-child {
        font-size: 17px;
    }


    .memory-small-emoji {
        font-size: 19px;
    }


    .school-memory-ending {
        font-size: 17px;

        line-height: 1.7;

        margin-top: 35px;
    }


    .school-memory-right {
        padding:
            15px 20px 70px;
    }


    .school-photo-frame {
        width: min(340px, 82vw);
    }


    .school-memory-photo {
        height: 430px;
    }


    .heart-one {
        left: -8px;
        top: 0;

        font-size: 48px;
    }


    .heart-two {
        right: -8px;

        font-size: 45px;
    }


    .star-one {
        right: -5px;
        top: 65px;

        font-size: 40px;
    }


    .star-two {
        right: 5px;
        top: 115px;

        font-size: 28px;
    }


    .tiny-star {
        right: -5px;
        bottom: 90px;

        font-size: 22px;
    }


    .butterfly {
        right: -5px;
        bottom: 10px;

        font-size: 60px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .school-memory-title {
        font-size: 34px;
    }


    .memory-line-content > span:first-child {
        font-size: 15px;
    }


    .memory-icon {
        width: 40px;
        height: 40px;

        font-size: 19px;
    }


    .school-memory-photo {
        height: 390px;
    }
}

/* =========================================================
   REAL MOON IMAGE + 13 SPARKLE STARS + SHOOTING STARS
   Made for Dharshu — 13 • 09 • 2009
   ========================================================= */


/* =========================================================
   1. THE MOON — Real photograph as circular image
   ========================================================= */

.moon {
    position: absolute;

    width: 180px;
    height: 180px;

    top: 11%;
    right: 12%;

    background-image: url('assets/images/final-page/moon.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 50%;
    mix-blend-mode: screen;

    filter: brightness(1.15) contrast(1.05)
            drop-shadow(0 0 8px rgba(255, 220, 175, 0.85))
            drop-shadow(0 0 22px rgba(255, 200, 145, 0.55))
            drop-shadow(0 0 50px rgba(245, 180, 120, 0.28))
            drop-shadow(0 0 90px rgba(230, 160, 100, 0.12));

    opacity: 0.99;

    animation: moonFloat 8s ease-in-out infinite;

    z-index: 2;
}


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


/* =========================================================
   2. THIRTEEN SPARKLE STARS IN A RING
   ========================================================= */

.moon-stars {
    position: absolute;

    width: 180px;
    height: 180px;

    top: 11%;
    right: 12%;

    pointer-events: none;

    z-index: 1;
}


.moon-stars span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 14px;
    height: 14px;

    margin: -7px 0 0 -7px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #fff5d4 30%,
            rgba(255, 235, 190, 0.6) 55%,
            transparent 75%
        );

    clip-path: polygon(
        50% 0%,
        57% 43%,
        100% 50%,
        57% 57%,
        50% 100%,
        43% 57%,
        0% 50%,
        43% 43%
    );

    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 8px rgba(255, 240, 200, 0.7))
        drop-shadow(0 0 14px rgba(255, 220, 170, 0.4));

    transform:
        rotate(var(--angle, 0deg))
        translateY(-135px)
        rotate(calc(var(--angle, 0deg) * -1));

    animation: sparkleTwinkle 2.4s ease-in-out infinite;

    transition: transform 0.4s ease, filter 0.4s ease;
}


.moon-stars span::before {
    content: "";
    position: absolute;
    inset: 0;
    animation: sparkleRotate 6s linear infinite;
    pointer-events: none;
}


/* ---- 13 evenly spaced angles (360 ÷ 13 = 27.69°) ---- */

.moon-stars span:nth-child(1)  { --angle: 0deg;     animation-delay: 0s;    }
.moon-stars span:nth-child(2)  { --angle: 27.69deg; animation-delay: 0.19s; }
.moon-stars span:nth-child(3)  { --angle: 55.38deg; animation-delay: 0.38s; }
.moon-stars span:nth-child(4)  { --angle: 83.08deg; animation-delay: 0.58s; }
.moon-stars span:nth-child(5)  { --angle: 110.77deg; animation-delay: 0.77s; }
.moon-stars span:nth-child(6)  { --angle: 138.46deg; animation-delay: 0.96s; }
.moon-stars span:nth-child(7)  { --angle: 166.15deg; animation-delay: 1.15s; }
.moon-stars span:nth-child(8)  { --angle: 193.85deg; animation-delay: 1.35s; }
.moon-stars span:nth-child(9)  { --angle: 221.54deg; animation-delay: 1.54s; }
.moon-stars span:nth-child(10) { --angle: 249.23deg; animation-delay: 1.73s; }
.moon-stars span:nth-child(11) { --angle: 276.92deg; animation-delay: 1.92s; }
.moon-stars span:nth-child(12) { --angle: 304.62deg; animation-delay: 2.12s; }
.moon-stars span:nth-child(13) { --angle: 332.31deg; animation-delay: 2.31s; }


@keyframes sparkleTwinkle {
    0%, 100% {
        opacity: 0.55;
        transform:
            rotate(var(--angle, 0deg))
            translateY(-135px)
            rotate(calc(var(--angle, 0deg) * -1))
            scale(0.75);
    }
    50% {
        opacity: 1;
        transform:
            rotate(var(--angle, 0deg))
            translateY(-135px)
            rotate(calc(var(--angle, 0deg) * -1))
            scale(1.15);
    }
}


@keyframes sparkleRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* =========================================================
   3. SHOOTING STARS
   ========================================================= */

.shooting-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 6px 1px rgba(255, 255, 255, 0.9),
        0 0 14px 3px rgba(255, 240, 200, 0.5);
    opacity: 0;
}

.shooting-star::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.35) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(0.4px);
    pointer-events: none;
}

.shooting-star.star-1 { top: -20px; left: -150px; animation: shoot1 11s linear infinite; animation-delay: 1s; }
.shooting-star.star-2 { top: 15%;   left: -150px; animation: shoot2 14s linear infinite; animation-delay: 5s; }
.shooting-star.star-3 { top: 40%;   left: -200px; animation: shoot3 16s linear infinite; animation-delay: 8s; }
.shooting-star.star-4 { top: 5%;    left: -180px; animation: shoot4 18s linear infinite; animation-delay: 12s; }

@keyframes shoot1 {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(28deg) scale(0.6); }
    8%   { opacity: 1; transform: translate3d(80px, 40px, 0) rotate(28deg) scale(1); }
    70%  { opacity: 1; transform: translate3d(700px, 380px, 0) rotate(28deg) scale(1); }
    100% { opacity: 0; transform: translate3d(950px, 520px, 0) rotate(28deg) scale(0.6); }
}

@keyframes shoot2 {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(32deg) scale(0.5); }
    10%  { opacity: 0.9; transform: translate3d(70px, 45px, 0) rotate(32deg) scale(0.95); }
    75%  { opacity: 0.8; transform: translate3d(750px, 480px, 0) rotate(32deg) scale(0.95); }
    100% { opacity: 0; transform: translate3d(980px, 630px, 0) rotate(32deg) scale(0.5); }
}

@keyframes shoot3 {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg) scale(0.7); }
    10%  { opacity: 1; transform: translate3d(80px, 25px, 0) rotate(18deg) scale(1); }
    75%  { opacity: 0.8; transform: translate3d(900px, 290px, 0) rotate(18deg) scale(1); }
    100% { opacity: 0; transform: translate3d(1100px, 360px, 0) rotate(18deg) scale(0.6); }
}

@keyframes shoot4 {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(38deg) scale(0.5); }
    12%  { opacity: 0.85; transform: translate3d(60px, 45px, 0) rotate(38deg) scale(0.85); }
    70%  { opacity: 0.7; transform: translate3d(680px, 540px, 0) rotate(38deg) scale(0.85); }
    100% { opacity: 0; transform: translate3d(920px, 720px, 0) rotate(38deg) scale(0.5); }
}


/* =========================================================
   4. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .moon {
        width: 130px;
        height: 130px;
        top: 10%;
        right: 8%;
    }

    .moon-stars {
        width: 130px;
        height: 130px;
        top: 10%;
        right: 8%;
    }

    .moon-stars span {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;

        transform:
            rotate(var(--angle, 0deg))
            translateY(-95px)
            rotate(calc(var(--angle, 0deg) * -1));
    }

    @keyframes sparkleTwinkle {
        0%, 100% {
            opacity: 0.55;
            transform:
                rotate(var(--angle, 0deg))
                translateY(-95px)
                rotate(calc(var(--angle, 0deg) * -1))
                scale(0.75);
        }
        50% {
            opacity: 1;
            transform:
                rotate(var(--angle, 0deg))
                translateY(-95px)
                rotate(calc(var(--angle, 0deg) * -1))
                scale(1.15);
        }
    }

    .shooting-star::before {
        width: 60px;
    }
}