/* =========================================================
   SUMMAIYA BIRTHDAY PREMIUM 3.0
   EXCLUSIVE MEMBERSHIP EXPERIENCE
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: #080707;
    color: #f5eee7;
    line-height: 1.7;
    overflow-x: hidden;
}

button {
    font-family: inherit;
}


/* =========================================================
   HIDDEN
========================================================= */

.hidden {
    display: none !important;
}


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

.background {
    position: fixed;
    inset: 0;
    z-index: -20;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(205, 157, 108, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(167, 91, 112, 0.09),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #080707,
            #100b0d,
            #080707
        );
}

.background::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    left: -350px;
    top: -300px;

    background:
        radial-gradient(
            circle,
            rgba(220, 174, 121, 0.11),
            transparent 65%
        );

    filter: blur(70px);

    animation:
        luxuryMoveOne 15s ease-in-out infinite alternate;
}

.background::after {
    content: "";

    position: absolute;

    width: 850px;
    height: 850px;

    right: -350px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(182, 103, 126, 0.10),
            transparent 65%
        );

    filter: blur(75px);

    animation:
        luxuryMoveTwo 18s ease-in-out infinite alternate;
}

@keyframes luxuryMoveOne {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(300px, 180px, 0)
            scale(1.2);
    }
}

@keyframes luxuryMoveTwo {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(-280px, -180px, 0)
            scale(1.2);
    }
}


/* =========================================================
   CINEMATIC GRAIN
========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 9990;

    opacity: 0.035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
}


/* =========================================================
   TOP SCROLL PROGRESS
========================================================= */

.top-progress {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

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

    z-index: 10001;

    pointer-events: none;
}

#scrollProgress {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #b97887,
            #d8a574,
            #f0d1ae
        );

    box-shadow:
        0 0 18px
        rgba(220,170,115,0.55);

    transition:
        width .12s linear;
}


/* =========================================================
   CHAPTER INDICATOR
========================================================= */

.chapter-indicator {
    position: fixed;

    top: 30px;
    left: 30px;

    z-index: 9997;

    display: flex;
    align-items: baseline;

    gap: 7px;

    padding:
        10px 14px;

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

    background:
        rgba(8,7,7,0.52);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.22);

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.chapter-indicator span {
    font-size: 8px;

    letter-spacing: .25em;

    color:
        rgba(255,255,255,.35);
}

.chapter-indicator strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;

    font-weight: 500;

    color:
        #e0bb91;

    line-height: 1;
}

.chapter-indicator small {
    font-size: 8px;

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


/* =========================================================
   MUSIC CONTROL
========================================================= */

.music-control {
    position: fixed;

    top: 28px;
    right: 28px;

    z-index: 9997;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px 15px;

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

    background:
        rgba(8,7,7,0.52);

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

    backdrop-filter:
        blur(18px);

    cursor: pointer;

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

.music-control:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(220,174,121,.40);

    background:
        rgba(220,174,121,.07);
}

.music-icon {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 21px;

    color:
        #dfb883;

    line-height: 1;
}

.music-label {
    font-size: 8px;

    letter-spacing: .25em;
}

.music-control.playing .music-icon {
    animation:
        musicPulse 1.2s ease-in-out infinite;
}

@keyframes musicPulse {

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

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


/* =========================================================
   COMMON
========================================================= */

.eyebrow {
    font-size: 9px;

    letter-spacing: .42em;

    text-transform: uppercase;

    color:
        rgba(220,179,134,.68);

    margin-bottom: 25px;
}

.section {
    padding:
        160px 7vw;
}


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

.opening {
    min-height: 100vh;

    display: flex;

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

    text-align: center;

    padding: 30px;

    position: relative;

    background:
        radial-gradient(
            circle at center,
            rgba(216,166,111,.08),
            transparent 48%
        ),
        #080707;
}

.opening::before {
    content: "";

    position: absolute;

    width: 1px;
    height: 38vh;

    top: 0;
    left: 50%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(220,177,127,.55),
            transparent
        );
}

.opening-content {
    width: 100%;

    max-width: 850px;

    animation:
        openingAppear 1.5s ease forwards;
}

@keyframes openingAppear {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.tiny-text {
    font-size: 10px;

    letter-spacing: .48em;

    color:
        rgba(240,211,182,.58);

    margin-bottom: 28px;
}

.opening h1 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(75px,15vw,170px);

    font-weight: 400;

    line-height: .85;

    letter-spacing: -.05em;
}

.opening h1 span {
    background:
        linear-gradient(
            120deg,
            #f4e2cc,
            #c28c63,
            #f8e7d3,
            #ad707d
        );

    background-size:
        250% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    animation:
        premiumText 8s linear infinite;
}

@keyframes premiumText {

    from {
        background-position:
            0% center;
    }

    to {
        background-position:
            250% center;
    }
}

.heart-line {
    display: flex;

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

    gap: 20px;

    margin:
        38px 0;
}

.heart-line span {
    width: 90px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(218,170,113,.55)
        );
}

.heart-line span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(218,170,113,.55)
        );
}

.heart-line b {
    color:
        #d9aa76;

    font-size: 25px;

    font-weight: 300;
}

.opening-message {
    max-width: 570px;

    margin:
        0 auto 42px;

    color:
        rgba(245,235,225,.60);

    font-size: 14px;

    font-weight: 300;
}


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

.main-button,
.surprise-button {
    position: relative;

    padding:
        17px 28px;

    border:
        1px solid
        rgba(226,182,133,.38);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

    color:
        #f4e7da;

    cursor:
        pointer;

    letter-spacing:
        .10em;

    font-size:
        11px;

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

    backdrop-filter:
        blur(20px);
}

.main-button:hover,
.surprise-button:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(236,196,151,.8);

    background:
        rgba(214,166,112,.08);

    box-shadow:
        0 25px 70px
        rgba(213,162,106,.14);
}

.main-button b {
    margin-left: 16px;

    font-size: 18px;

    font-weight: 300;
}

.tap-text {
    margin-top: 23px;

    font-size: 9px;

    letter-spacing: .28em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.28);
}


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

.opening-hide {
    animation:
        openingExit .9s ease forwards;
}

@keyframes openingExit {

    to {
        opacity: 0;

        transform:
            scale(1.04);

        filter:
            blur(10px);
    }
}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 100vh;

    display: flex;

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

    text-align: center;

    padding:
        100px 25px;

    position: relative;

    background:
        radial-gradient(
            ellipse at center,
            rgba(207,157,105,.07),
            transparent 58%
        );
}

.hero::after {
    content: "";

    position: absolute;

    bottom: 0;

    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(216,170,116,.25),
            transparent
        );
}

.hero-inner {
    max-width:
        900px;
}

.hero h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(60px,10vw,120px);

    line-height:
        .88;

    font-weight:
        400;

    letter-spacing:
        -.045em;
}

.hero h2 strong {
    display:
        block;

    font-weight:
        500;

    background:
        linear-gradient(
            110deg,
            #ead6bf,
            #bc825f,
            #f0dfcf
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.hero-text {
    max-width:
        570px;

    margin:
        40px auto 0;

    font-size:
        14px;

    font-weight:
        300;

    color:
        rgba(245,235,226,.52);
}

.scroll-indicator {
    margin-top:
        85px;

    font-size:
        9px;

    letter-spacing:
        .30em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.28);
}

.scroll-indicator span {
    display:
        block;

    width:
        1px;

    height:
        50px;

    margin:
        0 auto 15px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #d2a06e,
            transparent
        );

    animation:
        scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {

    0%,
    100% {
        transform:
            scaleY(.45);

        opacity:
            .3;
    }

    50% {
        transform:
            scaleY(1);

        opacity:
            1;
    }
}


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

.letter-section {
    display:
        flex;

    justify-content:
        center;
}

.letter-card {
    width:
        100%;

    max-width:
        900px;

    padding:
        clamp(40px,7vw,90px);

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 45px 120px
        rgba(0,0,0,.35);

    position:
        relative;

    overflow:
        hidden;
}

.letter-card::before {
    content: "";

    position:
        absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220,175,120,.55),
            transparent
        );
}

.letter-label {
    font-size:
        9px;

    letter-spacing:
        .35em;

    color:
        rgba(216,170,116,.65);

    margin-bottom:
        35px;
}

.letter-card h2 {
    font-family:
        "Cormorant Garamond",
        serif;

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

    font-weight:
        400;

    line-height:
        .95;

    margin-bottom:
        40px;
}

.letter-body {
    display:
        flex;

    flex-direction:
        column;

    gap:
        26px;

    color:
        rgba(245,235,225,.60);

    font-size:
        14px;

    font-weight:
        300;
}

.letter-body .highlight {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        27px;

    color:
        #dfbc91;

    margin-top:
        10px;
}

.signature {
    display:
        flex;

    flex-direction:
        column;

    margin-top:
        50px;

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

    font-size:
        12px;
}

.signature strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        34px;

    font-weight:
        500;

    color:
        #dfbc91;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey-section {
    position:
        relative;

    padding:
        170px 7vw 190px;

    background:
        linear-gradient(
            180deg,
            #080707,
            #0d090a,
            #080707
        );
}

.journey-intro {
    max-width:
        780px;

    margin:
        0 auto 140px;

    text-align:
        center;
}

.journey-intro h2 {
    font-family:
        "Cormorant Garamond",
        serif;

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

    font-weight:
        400;

    line-height:
        .9;

    letter-spacing:
        -.04em;
}

.journey-intro h2 span {
    color:
        rgba(233,204,178,.52);
}

.journey-subtitle {
    max-width:
        600px;

    margin:
        40px auto 0;

    color:
        rgba(245,235,225,.48);

    font-size:
        14px;

    font-weight:
        300;
}

.journey-line {
    position:
        relative;

    max-width:
        1100px;

    margin:
        auto;
}

.journey-line::before {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        rgba(216,169,113,.12);

    transform:
        translateX(-50%);
}

.journey-progress {
    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        1px;

    height:
        0;

    background:
        linear-gradient(
            to bottom,
            #dcae76,
            #b97887
        );

    transform:
        translateX(-50%);

    box-shadow:
        0 0 20px
        rgba(218,169,113,.35);
}

.journey-item {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        90px;

    min-height:
        390px;

    opacity:
        0;

    transform:
        translateY(50px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.journey-item.visible {
    opacity:
        1;

    transform:
        translateY(0);
}

.journey-item:nth-child(odd) {
    padding-right:
        90px;
}

.journey-item:nth-child(even) {
    padding-left:
        90px;
}

.journey-item:nth-child(even)
.journey-card {
    grid-column:
        2;
}

.journey-item:nth-child(odd)
.journey-card {
    grid-column:
        1;
}

.journey-dot {
    position:
        absolute;

    left:
        50%;

    top:
        20px;

    width:
        48px;

    height:
        48px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    border:
        1px solid
        rgba(218,171,116,.55);

    background:
        #0b0809;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        3;

    box-shadow:
        0 0 0 9px
        rgba(10,8,9,.9),
        0 0 35px
        rgba(216,169,115,.10);
}

.journey-dot span {
    font-size:
        9px;

    letter-spacing:
        .08em;

    color:
        #dcb383;
}

.final-dot span {
    font-size:
        18px;
}

.journey-card {
    padding:
        38px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(22px);

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

.journey-card:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(216,169,115,.28);

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

.journey-card small {
    font-size:
        9px;

    letter-spacing:
        .28em;

    color:
        rgba(216,171,119,.65);
}

.journey-card h3 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        40px;

    font-weight:
        500;

    margin:
        16px 0;
}

.journey-card p {
    color:
        rgba(245,235,226,.52);

    font-size:
        13px;

    font-weight:
        300;
}

.journey-final-message {
    margin-top:
        28px;

    padding-top:
        22px;

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

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        24px;

    color:
        #e3bf94;
}


/* =========================================================
   LITTLE THINGS / COLLECTION
========================================================= */

.little-things {
    text-align:
        center;

    background:
        #0a0809;
}

.little-things > h2 {
    font-family:
        "Cormorant Garamond",
        serif;

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

    font-weight:
        400;

    line-height:
        .9;

    letter-spacing:
        -.04em;
}

.things-grid {
    max-width:
        1100px;

    margin:
        100px auto 0;

    display:
        grid;

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

    gap:
        1px;

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

.thing {
    text-align:
        left;

    padding:
        50px;

    min-height:
        250px;

    background:
        #0a0809;

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

.thing:hover {
    background:
        #110d0e;

    box-shadow:
        inset 0 0 0 1px
        rgba(216,169,116,.10);
}

.thing > span {
    font-size:
        9px;

    letter-spacing:
        .22em;

    color:
        rgba(216,169,116,.62);
}

.thing h3 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        37px;

    font-weight:
        500;

    margin:
        20px 0 10px;
}

.thing p {
    font-size:
        13px;

    font-weight:
        300;

    color:
        rgba(245,235,225,.45);
}


/* =========================================================
   MEMORY PHOTO SECTIONS
========================================================= */

.memory-section {
    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    align-items:
        center;

    gap:
        8vw;

    padding:
        120px 7vw;
}

.memory-section.reverse {
    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);
}

.memory-section.reverse
.memory-image {
    order:
        2;
}

.memory-section.reverse
.memory-content {
    order:
        1;
}

.memory-image {
    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        4 / 5;

    background:
        #111;

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

    transition:
        box-shadow .5s ease;
}

.memory-image:hover {
    box-shadow:
        0 45px 120px
        rgba(214,160,105,.10);
}

.memory-image::before {
    content:
        "";

    position:
        absolute;

    inset:
        14px;

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

    z-index:
        2;

    pointer-events:
        none;
}

.memory-image::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 35%,
            transparent 70%,
            rgba(214,160,105,.08)
        );

    pointer-events:
        none;

    z-index:
        2;
}

.memory-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform 1.4s ease;
}

.memory-image:hover img {
    transform:
        scale(1.07);
}

.memory-content {
    max-width:
        550px;
}

.memory-content span {
    font-size:
        9px;

    letter-spacing:
        .35em;

    color:
        rgba(216,169,116,.65);
}

.memory-content h2 {
    font-family:
        "Cormorant Garamond",
        serif;

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

    font-weight:
        400;

    line-height:
        .9;

    margin:
        28px 0 32px;

    letter-spacing:
        -.04em;
}

.memory-content p {
    max-width:
        450px;

    font-size:
        14px;

    font-weight:
        300;

    color:
        rgba(245,235,225,.52);
}


/* =========================================================
   LOVE SECTION
========================================================= */

.love-section {
    min-height:
        95vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        130px 25px;

    background:
        radial-gradient(
            circle at center,
            rgba(194,127,143,.08),
            transparent 52%
        );
}

.love-inner {
    max-width:
        900px;
}

.love-inner h2 {
    font-family:
        "Cormorant Garamond",
        serif;

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

    font-weight:
        400;

    line-height:
        .86;

    letter-spacing:
        -.05em;
}

.love-inner h2 em {
    color:
        #d8a475;

    font-style:
        italic;
}

.love-inner > p:last-child {
    max-width:
        600px;

    margin:
        45px auto 0;

    font-size:
        14px;

    font-weight:
        300;

    color:
        rgba(245,235,225,.50);
}


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

.final-letter {
    display:
        flex;

    justify-content:
        center;

    text-align:
        center;
}

.final-letter-card {
    max-width:
        850px;

    padding:
        80px 45px;

    border-top:
        1px solid
        rgba(216,169,116,.25);

    border-bottom:
        1px solid
        rgba(216,169,116,.25);
}

.final-letter-card h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(52px,8vw,90px);

    font-weight:
        400;

    line-height:
        .9;

    margin-bottom:
        40px;
}

.final-letter-card > p:not(.eyebrow) {
    max-width:
        650px;

    margin:
        0 auto 26px;

    font-size:
        14px;

    font-weight:
        300;

    color:
        rgba(245,235,225,.55);
}

.final-sign {
    margin-top:
        55px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    color:
        rgba(255,255,255,.38);
}

.final-sign strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        33px;

    font-weight:
        500;

    color:
        #dfbb91;
}


/* =========================================================
   SURPRISE
========================================================= */

.surprise-section {
    min-height:
        80vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        110px 25px;

    background:
        radial-gradient(
            circle at center,
            rgba(214,163,110,.09),
            transparent 52%
        );
}

.surprise-section h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(60px,9vw,105px);

    line-height:
        .88;

    font-weight:
        400;

    letter-spacing:
        -.045em;

    margin-bottom:
        55px;
}


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

.final-reveal {
    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(215,165,111,.14),
            transparent 45%
        ),
        #080707;
}

.final-glow {
    position:
        absolute;

    width:
        700px;

    height:
        700px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(215,166,111,.10),
            transparent 65%
        );

    filter:
        blur(35px);

    animation:
        finalGlow 8s ease-in-out infinite alternate;
}

@keyframes finalGlow {

    from {
        transform:
            scale(.75);

        opacity:
            .35;
    }

    to {
        transform:
            scale(1.25);

        opacity:
            .85;
    }
}

.final-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

    padding:
        30px;
}

.big-heart {
    font-size:
        78px;

    color:
        #d8a574;

    margin-bottom:
        22px;

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

@keyframes heartPulse {

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

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

.final-content h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(60px,9vw,110px);

    font-weight:
        400;

    line-height:
        .88;
}

.final-content h3 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(70px,12vw,145px);

    font-weight:
        500;

    line-height:
        .85;

    margin:
        12px 0 40px;

    background:
        linear-gradient(
            120deg,
            #f3dfc8,
            #bd8564,
            #e6c19e
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.final-content > p {
    max-width:
        600px;

    margin:
        auto;

    font-size:
        14px;

    font-weight:
        300;

    color:
        rgba(245,235,225,.55);
}

.final-message {
    margin-top:
        45px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        25px;

    line-height:
        1.55;

    color:
        rgba(245,235,225,.65);
}

.final-message strong {
    color:
        #dfb986;

    font-weight:
        500;
}

.final-date {
    margin-top:
        55px;

    font-size:
        10px;

    letter-spacing:
        .55em;

    color:
        rgba(216,170,117,.60);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    text-align:
        center;

    padding:
        80px 25px 100px;

    background:
        #060506;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}

.footer-heart {
    font-size:
        30px;

    color:
        #d3a273;

    margin-bottom:
        20px;
}

footer p {
    font-size:
        9px;

    letter-spacing:
        .38em;

    color:
        rgba(255,255,255,.34);
}

footer small {
    display:
        block;

    margin-top:
        13px;

    font-size:
        10px;

    color:
        rgba(255,255,255,.20);
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity:
        0;

    transform:
        translateY(50px);

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

.reveal.visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   EXPERIENCE STARTED
========================================================= */

body.experience-started
.chapter-indicator {
    animation:
        interfaceAppear .8s ease forwards;
}

body.experience-started
.music-control {
    animation:
        interfaceAppear .8s .15s ease both;
}

@keyframes interfaceAppear {

    from {
        opacity:
            0;

        transform:
            translateY(-15px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   DESKTOP PREMIUM CURSOR LIGHT
========================================================= */

body.experience-started::after {
    content:
        "";

    position:
        fixed;

    width:
        320px;

    height:
        320px;

    left:
        var(--mouse-x, 50%);

    top:
        var(--mouse-y, 50%);

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

    pointer-events:
        none;

    z-index:
        9991;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(220,174,121,.045),
            transparent 68%
        );

    transition:
        left .25s ease,
        top .25s ease;
}


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

@media (max-width: 800px) {

    .chapter-indicator {
        top:
            18px;

        left:
            18px;

        padding:
            8px 11px;
    }

    .chapter-indicator strong {
        font-size:
            21px;
    }

    .chapter-indicator span {
        font-size:
            7px;
    }

    .chapter-indicator small {
        font-size:
            7px;
    }


    .music-control {
        top:
            17px;

        right:
            17px;

        padding:
            9px 11px;
    }

    .music-label {
        display:
            none;
    }

    .music-icon {
        font-size:
            22px;
    }


    .section {
        padding:
            110px 25px;
    }


    .opening {
        padding:
            25px;
    }


    .opening h1 {
        font-size:
            clamp(70px,21vw,115px);
    }


    .opening-message {
        font-size:
            13px;
    }


    .hero {
        min-height:
            90vh;
    }


    .hero h2 {
        font-size:
            clamp(55px,18vw,95px);
    }


    .hero-text {
        font-size:
            13px;
    }


    .journey-section {
        padding:
            120px 25px 130px;
    }


    .journey-intro {
        margin-bottom:
            95px;
    }


    .journey-intro h2 {
        font-size:
            clamp(48px,15vw,80px);
    }


    .journey-line::before,
    .journey-progress {
        left:
            18px;

        transform:
            none;
    }


    .journey-item,
    .journey-item:nth-child(odd),
    .journey-item:nth-child(even) {

        display:
            block;

        padding:
            0 0 90px 55px;

        min-height:
            auto;
    }


    .journey-item:nth-child(even)
    .journey-card,
    .journey-item:nth-child(odd)
    .journey-card {

        grid-column:
            auto;
    }


    .journey-dot {

        left:
            18px;

        top:
            10px;

        width:
            36px;

        height:
            36px;

        transform:
            translateX(-50%);
    }


    .journey-card {
        padding:
            28px 24px;
    }


    .journey-card h3 {
        font-size:
            33px;
    }


    .things-grid {
        grid-template-columns:
            1fr;

        margin-top:
            65px;
    }


    .thing {
        min-height:
            auto;

        padding:
            38px 28px;
    }


    .memory-section,
    .memory-section.reverse {

        display:
            flex;

        flex-direction:
            column;

        gap:
            55px;

        min-height:
            auto;

        padding:
            90px 25px;
    }


    .memory-section.reverse
    .memory-image,
    .memory-section.reverse
    .memory-content {

        order:
            initial;
    }


    .memory-image {
        width:
            100%;

        aspect-ratio:
            4 / 5;
    }


    .memory-content {
        max-width:
            none;
    }


    .memory-content h2 {
        font-size:
            clamp(50px,16vw,80px);
    }


    .love-section {
        min-height:
            75vh;
    }


    .love-inner h2 {
        font-size:
            clamp(60px,18vw,95px);
    }


    .final-letter-card {
        padding:
            60px 20px;
    }


    .surprise-section {
        min-height:
            65vh;
    }


    .surprise-section h2 {
        font-size:
            clamp(55px,17vw,90px);
    }


    .final-content {
        padding:
            25px;
    }


    .big-heart {
        font-size:
            60px;
    }


    .final-content h2 {
        font-size:
            clamp(55px,17vw,90px);
    }


    .final-content h3 {
        font-size:
            clamp(62px,20vw,110px);
    }


    .final-message {
        font-size:
            22px;
    }


    body.experience-started::after {
        display:
            none;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .chapter-indicator {
        top:
            15px;

        left:
            14px;
    }

    .music-control {
        top:
            14px;

        right:
            14px;
    }


    .opening h1 {
        font-size:
            70px;
    }


    .main-button,
    .surprise-button {
        width:
            100%;

        max-width:
            310px;
    }


    .heart-line span {
        width:
            55px;
    }


    .journey-section {
        padding-left:
            20px;

        padding-right:
            20px;
    }


    .journey-item {
        padding-left:
            48px !important;
    }


    .journey-line::before,
    .journey-progress {
        left:
            14px;
    }


    .journey-dot {
        left:
            14px;
    }


    .journey-card {
        padding:
            25px 20px;
    }


    .journey-card h3 {
        font-size:
            30px;
    }


    .letter-card {
        padding:
            42px 25px;
    }


    .letter-card h2 {
        font-size:
            50px;
    }


    .memory-section,
    .memory-section.reverse {
        padding:
            75px 20px;
    }


    .memory-content h2 {
        font-size:
            54px;
    }


    .thing {
        padding:
            32px 22px;
    }


    .final-content h3 {
        font-size:
            67px;
    }

}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}