:root{

    /*======================================
    =              COLORS
    ======================================*/

    --ink:#f8f7ff;
    --muted:#c8c8e0;

    --blue:#5794ff;
    --deep-blue:#101934;

    --red:#ff5476;
    --purple:#9d69ff;

    --paper:#faf8f4;
    --paper-ink:#322b47;

    --line:rgba(242,241,255,.16);

    /*======================================
    =            TYPOGRAPHY
    ======================================*/

    --display:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",Arial,sans-serif;
    --mono:"DM Mono",monospace;

    /*======================================
    =              CONTAINERS
    ======================================*/

    --container-xs:520px;
    --container-sm:640px;
    --container-md:820px;
    --container-lg:1120px;

    /*======================================
    =               SPACING
    ======================================*/

    --space-1:.5rem;

    --space-2:1rem;

    --space-3:1.5rem;

    --space-4:2rem;

    --space-5:3rem;

    --space-6:4rem;

    --space-7:6rem;

    --space-8:8rem;

    --space-9:10rem;

    /*======================================
    =            BORDER RADIUS
    ======================================*/

    --radius-sm:12px;

    --radius-md:18px;

    --radius-lg:24px;

    --radius-xl:32px;

    --radius-round:999px;

    /*======================================
    =              SHADOWS
    ======================================*/

    --shadow-xs:
        0 6px 18px rgba(0,0,0,.15);

    --shadow-sm:
        0 12px 30px rgba(0,0,0,.22);

    --shadow-md:
        0 20px 45px rgba(0,0,0,.28);

    --shadow-lg:
        0 30px 90px rgba(0,0,0,.34);

    /*======================================
    =             TRANSITIONS
    ======================================*/

    --duration-fast:.2s;

    --duration-normal:.35s;

    --duration-slow:.6s;

    --ease:cubic-bezier(.22,.61,.36,1);

}
/*======================================
=              RESET
======================================*/

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

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    overflow-x:hidden;

    background:#0d122a;

    color:var(--ink);

    font-family:var(--sans);

    line-height:1.6;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

picture{

    display:block;

}

svg{

    display:block;

}

button,
input,
textarea,
select,
a{

    font:inherit;

}

button{

    color:inherit;

}

button{

    border:none;

    background:none;

}

a{

    color:inherit;

}

::selection{

    background:var(--red);

    color:#fff;

}

/*======================================
=          GLOBAL LAYOUT
======================================*/

.section{

    width:min(

        var(--container-lg),

        calc(100% - 3rem)

    );

    margin-inline:auto;

    padding-block:var(--space-8);

    position:relative;

}

.section-heading{

    max-width:var(--container-sm);

}

.section-heading h2,
.letter__intro h2,
.finale h2{

    margin:

        0

        0

        var(--space-3);

    font-size:

        clamp(
            2.65rem,
            6.4vw,
            5.4rem
        );

    line-height:.98;

}

.section-heading>p:not(.kicker),
.letter__intro>p:not(.kicker){

    max-width:500px;

    color:var(--muted);

    line-height:1.75;

}

/*======================================
=          GLOBAL TYPOGRAPHY
======================================*/

h1,
h2,
h3,
p{

    margin-top:0;

}

h1,
h2{

    font-family:var(--display);

    font-weight:500;

    letter-spacing:-.04em;

}

h1{

    font-size:

        clamp(
            4.4rem,
            13vw,
            9.6rem
        );

    line-height:.88;

    margin:

        var(--space-2)

        0

        var(--space-4);

}

h2{

    margin-bottom:

        var(--space-3);

}

p{

    margin:

        0

        0

        var(--space-3);

}

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

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.7rem;

    padding:

        .95rem

        1.25rem;

    cursor:pointer;

    text-decoration:none;

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

    transition:

        transform var(--duration-fast) var(--ease),

        background var(--duration-fast) var(--ease),

        box-shadow var(--duration-fast) var(--ease),

        border-color var(--duration-fast) var(--ease);

}

.button:hover{

    transform:

        translateY(-3px);

}

.button--primary{

    color:white;

    background:

        linear-gradient(

            110deg,

            #3e73ee,

            #ff5d8a 55%,

            #976de7

        );

    box-shadow:

        0 12px 30px rgba(75,77,229,.24),

        inset 0 0 0 1px rgba(255,255,255,.06);

}

.button--primary:hover{

    box-shadow:

        0 16px 34px rgba(75,77,229,.30),

        0 0 24px rgba(255,93,138,.16);

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

.intro{

    min-height:100svh;

    display:grid;

    place-items:center;

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:

        var(--space-8)

        var(--space-3);

}

.intro::before{

    content:"";

    position:absolute;

    width:min(92vw,980px);

    aspect-ratio:1;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(89,148,255,.18),

            transparent 66%

        );

    animation:

        breathe

        8s

        ease-in-out

        infinite;

}

.intro__content{

    position:relative;

    z-index:1;

    width:min(

        720px,

        100%

    );

    padding:

        clamp(
            2rem,
            5vw,
            3.5rem
        );

    border:

        1px solid

        var(--line);

    border-radius:

        var(--radius-lg);

    background:

        linear-gradient(

            145deg,

            rgba(18,24,54,.74),

            rgba(40,20,65,.56)

        );

    backdrop-filter:

        blur(18px);

    box-shadow:

        var(--shadow-lg);

}

.intro__content::after{

    content:"♡ ♡ ♡ ♡";

    position:absolute;

    top:1.25rem;

    left:1.5rem;

    color:

        rgba(
            255,
            163,
            188,
            .28
        );

    font:

        700 .72rem

        var(--mono);

    letter-spacing:

        .65rem;

    pointer-events:none;

}

.intro h1{

    margin:

        var(--space-2)

        0

        var(--space-4);

    font-size:

        clamp(
            3rem,
            8vw,
            6.2rem
        );

    line-height:.92;

}

.intro__description{

    max-width:560px;

    margin:

        0 auto

        var(--space-5);

    color:

        var(--muted);

    line-height:1.8;

}

/*======================================
=            AUDIO PLAYER
======================================*/

.intro__audioFrame{

    position:relative;

    width:min(
        100%,
        590px
    );

    margin:0 auto;

    padding:1.2rem;

    border-radius:

        var(--radius-lg);

    border:

        1px solid

        rgba(
            181,
            186,
            255,
            .20
        );

    background:

        linear-gradient(

            135deg,

            rgba(
                17,
                25,
                52,
                .88
            ),

            rgba(
                28,
                18,
                58,
                .86
            )

        );

    box-shadow:

        inset

        0 1px 0

        rgba(
            255,
            255,
            255,
            .08
        ),

        var(--shadow-md);

}

.intro__audioFrame::before{

    content:"";

    position:absolute;

    inset:.55rem;

    border-radius:

        calc(

            var(--radius-lg)

            - 8px

        );

    background:

        linear-gradient(

            90deg,

            rgba(
                87,
                148,
                255,
                .12
            ),

            rgba(
                157,
                105,
                255,
                .12
            ),

            rgba(
                255,
                84,
                118,
                .12
            )

        );

    pointer-events:none;

}

.intro-player{

    position:relative;

    z-index:1;

    display:grid;

    grid-template-columns:

        auto

        1fr;

    gap:1rem;

    align-items:center;

}

.intro-player__body{

    min-width:0;

}

.intro-player__topline{

    display:flex;

    justify-content:space-between;

    align-items:baseline;

    gap:1rem;

    margin-bottom:1rem;

}

.intro-player__title{

    color:#eff0ff;

    font:

        500

        .88rem

        var(--mono);

    letter-spacing:.12em;

    text-transform:uppercase;

}

.intro-player__status{

    color:

        rgba(
            240,
            234,
            255,
            .72
        );

    font-size:.92rem;

}

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

.intro-player__toggle{

    width:3.9rem;

    height:3.9rem;

    display:grid;

    place-items:center;

    cursor:pointer;

    border:

        1px solid

        rgba(
            255,
            255,
            255,
            .16
        );

    border-radius:50%;

    background:

        linear-gradient(

            145deg,

            rgba(
                101,
                127,
                255,
                .36
            ),

            rgba(
                168,
                98,
                255,
                .28
            )

        );

    box-shadow:

        inset

        0 1px 0

        rgba(
            255,
            255,
            255,
            .14
        ),

        0 12px 28px

        rgba(
            0,
            0,
            0,
            .28
        );

    transition:

        transform

        var(--duration-fast)

        var(--ease),

        box-shadow

        var(--duration-fast)

        var(--ease),

        background

        var(--duration-fast)

        var(--ease);

}

.intro-player__toggle:hover,

.intro-player__toggle:focus-visible{

    transform:

        translateY(-2px)

        scale(1.03);

    outline:none;

    box-shadow:

        inset

        0 1px 0

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

        0 18px 36px

        rgba(
            0,
            0,
            0,
            .34
        );

}

.intro-player__icon{

    color:white;

    font-size:1rem;

    line-height:1;

    transform:translateX(1px);

}

/*======================================
=            PROGRESS BAR
======================================*/

.intro-player__bar{

    position:relative;

    overflow:hidden;

    height:.8rem;

    border-radius:

        var(--radius-round);

    border:

        1px solid

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

    background:

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

    box-shadow:

        inset

        0 1px 2px

        rgba(
            0,
            0,
            0,
            .28
        );

}

.intro-player__bar span{

    display:block;

    width:0%;

    height:100%;

    border-radius:inherit;

    background:

        linear-gradient(

            90deg,

            var(--blue),

            var(--purple),

            var(--red)

        );

    box-shadow:

        0 0 14px

        rgba(
            157,
            105,
            255,
            .30
        );

    transition:

        width

        .12s

        linear;

}

.intro-player__times{

    display:flex;

    justify-content:space-between;

    margin-top:.65rem;

    color:

        rgba(
            228,
            230,
            255,
            .72
        );

    font:

        .64rem

        var(--mono);

    letter-spacing:.1em;

    text-transform:uppercase;

}

.intro__audio{

    position:absolute;

    width:1px;

    height:1px;

    opacity:0;

    pointer-events:none;

}

.intro__button{

    margin:

        var(--space-5)

        auto

        0;

}

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

.hero{

    min-height:100svh;

    display:grid;

    place-items:center;

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:

        var(--space-8)

        var(--space-3);

}

.hero::before{

    content:"";

    position:absolute;

    width:min(
        88vw,
        900px
    );

    aspect-ratio:1;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(
                70,
                117,
                255,
                .22
            ),

            transparent 67%

        );

    animation:

        breathe

        8s

        ease-in-out

        infinite;

}

.hero__copy{

    position:relative;

    z-index:1;

    width:min(
        720px,
        100%
    );

}

.hero__copy::after{

    content:"♡ ♡";

    position:absolute;

    top:1rem;

    right:0;

    color:

        rgba(
            255,
            141,
            173,
            .32
        );

    font:

        700

        .8rem

        var(--mono);

    letter-spacing:.4rem;

    pointer-events:none;

}

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

.kicker{

    margin:

        0

        0

        var(--space-3);

    color:#bbc9ff;

    font:

        500

        .70rem/1.3

        var(--mono);

    letter-spacing:.18em;

    text-transform:uppercase;

}

.kicker::before{

    content:"♡";

    margin-right:.55rem;

    color:#ffb7c8;

    text-shadow:

        0 0 12px

        rgba(
            255,
            122,
            160,
            .28
        );

}

.hero__overline{

    margin:0;

    color:var(--muted);

    font:

        italic

        1.2rem

        var(--display);

}

.hero h1{

    margin:

        var(--space-2)

        0

        var(--space-5);

}

.hero h1 em{

    color:#c7b3ff;

}

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

.hero__description{

    max-width:430px;

    margin:

        0 auto

        var(--space-6);

    color:var(--muted);

    font-size:1.05rem;

    line-height:1.8;

}

.hero__description strong{

    color:white;

    font-weight:500;

}

.hero .button{

    min-width:190px;

}

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

.hero__footer{

    position:absolute;

    left:50%;

    bottom:2.5rem;

    transform:translateX(-50%);

    margin:0;

    color:

        rgba(
            230,
            233,
            255,
            .48
        );

    font:

        .68rem

        var(--mono);

    letter-spacing:.16em;

    text-transform:uppercase;

    white-space:nowrap;

}

.hero__footer::before{

    content:"♡";

    margin-right:.45rem;

    color:#ff8ea9;

}

/*======================================
=             PROGRESS BAR
======================================*/

.progress{

    position:fixed;

    top:0;

    left:0;

    right:0;

    z-index:20;

    height:2px;

    background:

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

}

.progress span{

    display:block;

    width:0;

    height:100%;

    background:

        linear-gradient(

            90deg,

            var(--blue),

            var(--red),

            var(--purple)

        );

    box-shadow:

        0 0 14px

        rgba(
            157,
            105,
            255,
            .45
        );

}

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

#stars{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-3;

    pointer-events:none;

    opacity:.75;

}

.ambient{

    position:fixed;

    z-index:-2;

    width:62vw;

    aspect-ratio:1;

    border-radius:50%;

    filter:blur(90px);

    pointer-events:none;

    opacity:.26;

}

.ambient--blue{

    background:#2150d7;

    top:-20vw;

    left:-27vw;

}

.ambient--red{

    background:#e4205b;

    right:-28vw;

    bottom:-30vw;

    opacity:.16;

}

/*======================================
=           TIME SECTION
======================================*/

.time{

    min-height:75vh;

    display:grid;

    align-content:center;

}

.counter{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:1px;

    overflow:hidden;

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

    max-width:880px;

    border:

        1px solid

        var(--line);

    border-radius:

        var(--radius-md);

    background:

        var(--line);

    backdrop-filter:

        blur(16px);

}

.counter__unit{

    min-height:170px;

    display:grid;

    place-content:center;

    gap:.4rem;

    background:

        rgba(
            19,
            27,
            62,
            .70
        );

    transition:

        background

        var(--duration-normal)

        var(--ease);

}

.counter__unit:hover{

    background:

        rgba(
            34,
            44,
            92,
            .82
        );

}

.counter__unit strong{

    color:#e4e6ff;

    font:

        500

        clamp(
            2.2rem,
            5vw,
            4.2rem
        )/1

        var(--mono);

    letter-spacing:-.08em;

}

.counter__unit span{

    color:var(--muted);

    font:

        .66rem

        var(--mono);

    letter-spacing:.12em;

    text-transform:uppercase;

}

.section-note{

    max-width:380px;

    margin:

        var(--space-5)

        0

        0

        auto;

    color:#afb4d1;

    font:

        italic

        1.1rem

        var(--display);

    line-height:1.7;

}

.section-note::before{

    content:"♡";

    margin-right:.45rem;

    color:#ff95b0;

}

/*======================================
=            DISTANCE
======================================*/

.distance{

    width:min(
        var(--container-lg),
        calc(100% - 3rem)
    );

    margin-inline:auto;

    padding:

        var(--space-6)

        0

        var(--space-8);

    min-height:78vh;

    display:grid;

    grid-template-columns:

        .9fr

        1.1fr;

    align-items:center;

    gap:

        clamp(
            3rem,
            7vw,
            8rem
        );

}

.distance__copy{

    max-width:460px;

}

.distance__copy h2{

    margin:

        0

        0

        var(--space-4);

    font:

        500

        clamp(
            2.8rem,
            5.8vw,
            5.2rem
        )/.96

        var(--display);

    letter-spacing:-.04em;

}

.distance__copy h2 em{

    color:#d2bbff;

}

.distance__copy>p:not(.kicker){

    color:var(--muted);

    line-height:1.8;

    max-width:420px;

}

/*======================================
=          DISTANCE MAP
======================================*/

.distance__map{

    position:relative;

    overflow:hidden;

    min-height:430px;

    border:

        1px solid

        rgba(
            211,
            217,
            255,
            .16
        );

    border-radius:

        var(--radius-lg);

    background:

        linear-gradient(

            135deg,

            rgba(
                13,
                18,
                38,
                .96
            ),

            rgba(
                19,
                24,
                53,
                .96
            )

        );

    box-shadow:

        var(--shadow-md);

}

.distance__map::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 36% 30%,

            rgba(
                91,
                140,
                255,
                .10
            ),

            transparent 30%

        ),

        radial-gradient(

            circle at 76% 74%,

            rgba(
                255,
                84,
                118,
                .08
            ),

            transparent 24%

        );

    opacity:.8;

}

.distance__map::after{

    content:"♡ ♡ ♡";

    position:absolute;

    left:1.25rem;

    bottom:1rem;

    color:

        rgba(
            255,
            151,
            181,
            .18
        );

    font:

        700

        .68rem

        var(--mono);

    letter-spacing:.45rem;

    pointer-events:none;

}

/*======================================
=          ROUTE
======================================*/

.route-points{

    position:absolute;

    inset:0;

    z-index:1;

}

.route-points__curve{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

}

.route-points__curve-glow{

    fill:none;

    stroke:

        rgba(
            158,
            122,
            255,
            .28
        );

    stroke-width:16;

    stroke-linecap:round;

    stroke-linejoin:round;

    filter:blur(10px);

}

.route-points__curve-line{

    fill:none;

    stroke:url(#routeGradient);

    stroke-width:4.2;

    stroke-linecap:round;

    stroke-linejoin:round;

    filter:

        drop-shadow(

            0 0 12px

            rgba(
                157,
                105,
                255,
                .32
            )

        );

}

.route-points__curve-dots{

    fill:none;

    stroke:

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

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:1 42;

    stroke-dashoffset:6;

    opacity:.7;

    filter:

        drop-shadow(

            0 0 6px

            rgba(
                255,
                255,
                255,
                .22
            )

        );

}

/*======================================
=             CITIES
======================================*/

.route-point{

    position:absolute;

    display:grid;

    justify-items:center;

    gap:.75rem;

    transform:

        translate(-50%,-50%);

}

.route-point--culiacan{

    left:23%;

    top:49%;

}

.route-point--xalapa{

    left:78%;

    top:56%;

}

.route-point__dot{

    position:relative;

    width:1.15rem;

    height:1.15rem;

    border-radius:50%;

    background:#fff;

    box-shadow:

        0 0 0 10px

        rgba(
            255,
            255,
            255,
            .08
        ),

        0 0 18px

        rgba(
            255,
            255,
            255,
            .22
        );

}

.route-point__dot::before{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:50%;

    border:

        2px solid

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

    animation:

        city-pulse

        2.4s

        ease-out

        infinite;

}

.route-point--culiacan .route-point__dot{

    background:#4b86f2;

    box-shadow:

        0 0 0 10px

        rgba(
            75,
            134,
            242,
            .10
        ),

        0 0 18px

        rgba(
            75,
            134,
            242,
            .26
        );

}

.route-point--xalapa .route-point__dot{

    background:#ed5276;

    box-shadow:

        0 0 0 10px

        rgba(
            237,
            82,
            118,
            .10
        ),

        0 0 18px

        rgba(
            237,
            82,
            118,
            .26
        );

}

.route-point__label{

    color:#f6f5ff;

    text-align:center;

    white-space:nowrap;

    text-shadow:

        0 2px 10px

        rgba(
            0,
            0,
            0,
            .48
        );

    font:

        500

        1.05rem

        var(--sans);

}

.route-point__label::after{

    content:"♡";

    display:inline-block;

    margin-left:.35rem;

    color:

        rgba(
            255,
            143,
            170,
            .80
        );

    font-size:.72em;

    transform:

        translateY(-.08em);

}

/*======================================
=              VOICE
======================================*/

.voice{

    width:min(
        var(--container-lg),
        calc(100% - 3rem)
    );

    margin-inline:auto;

    padding:

        var(--space-2)

        0

        var(--space-8);

}

.voice[hidden]{

    display:none;

}

.voice__content{

    padding:

        clamp(
            2.5rem,
            5vw,
            4rem
        );

    text-align:center;

    border:

        1px solid

        var(--line);

    border-radius:

        var(--radius-md);

    background:

        linear-gradient(

            115deg,

            rgba(
                48,
                73,
                165,
                .34
            ),

            rgba(
                133,
                53,
                139,
                .32
            )

        );

    box-shadow:

        var(--shadow-sm);

}

.voice h2{

    margin:

        0

        0

        var(--space-3);

    font:

        500

        clamp(
            2rem,
            4.5vw,
            3.6rem
        )/1

        var(--display);

}

.voice h2 em{

    color:#d2b6ff;

}

.voice p:not(.kicker){

    color:var(--muted);

    margin-bottom:

        var(--space-4);

    line-height:1.8;

}

.voice audio{

    width:min(
        100%,
        500px
    );

    height:40px;

}

/*======================================
=             MEMORIES
======================================*/

.memories{

    padding-top:var(--space-6);

}

.polaroids{

    position:relative;

    display:grid;

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

    gap:1.8rem;

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

}

.polaroid{

    position:relative;

    overflow:hidden;

    padding:.75rem .75rem 1.2rem;

    color:var(--paper-ink);

    background:var(--paper);

    border:0;

    cursor:pointer;

    text-align:left;

    box-shadow:var(--shadow-md);

    transition:

        transform var(--duration-normal) var(--ease),

        box-shadow var(--duration-normal) var(--ease);

}

.polaroid::before{

    content:"♡";

    position:absolute;

    top:.65rem;

    right:.8rem;

    color:rgba(255,132,165,.42);

    font:700 .85rem var(--mono);

}

.polaroid:hover,

.polaroid:focus-visible{

    transform:

        translateY(-14px)

        rotate(0deg)

        !important;

    box-shadow:

        0 30px 60px

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

    outline:

        2px solid

        #d7c5ff;

    outline-offset:4px;

}

.polaroid img{

    width:100%;

    height:300px;

    object-fit:cover;

    filter:

        saturate(.94)

        contrast(.99);

    transition:

        transform .45s var(--ease);

}

.polaroid:hover img{

    transform:scale(1.04);

}

.polaroid span{

    display:block;

    padding:

        1rem

        .2rem

        0;

    font:

        italic

        1rem

        var(--display);

    line-height:1.45;

}

/*======================================
=          POLAROID LAYOUT
======================================*/

.polaroid--one{

    grid-column:1/span 4;

    margin-top:6rem;

    transform:rotate(-4deg);

}

.polaroid--two{

    grid-column:5/span 4;

    transform:rotate(3deg);

}

.polaroid--three{

    grid-column:9/span 4;

    margin-top:8rem;

    transform:rotate(-2deg);

}

.polaroid--four{

    grid-column:4/span 5;

    margin-top:-1rem;

    transform:rotate(2deg);

}

.polaroid--four img{

    height:355px;

}

.gallery-hint{

    margin:

        var(--space-5)

        0

        0;

    text-align:center;

    color:var(--muted);

    font:

        .7rem

        var(--mono);

    letter-spacing:.1em;

    text-transform:uppercase;

}

.gallery-hint::before{

    content:"♡";

    margin-right:.4rem;

    color:#ff9fb5;

}

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

.letter{

    width:min(

        900px,

        calc(100% - 3rem)

    );

    padding-top:var(--space-9);

}

.letter__intro{

    text-align:center;

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

}

.letter__intro>p{

    margin-inline:auto;

}

.letter__paper{

    position:relative;

    overflow:hidden;

    padding:

        clamp(
            2.5rem,
            6vw,
            5rem
        );

    color:var(--paper-ink);

    background:var(--paper);

    border-radius:4px;

    box-shadow:

        0 35px 80px

        rgba(0,0,0,.36);

}

.letter__paper::before{

    content:"";

    position:absolute;

    inset:12px;

    border:

        1px solid

        rgba(83,65,117,.10);

    pointer-events:none;

}

.letter__paper::after{

    content:"♡ ♡ ♡";

    position:absolute;

    top:1rem;

    right:1.3rem;

    color:rgba(255,122,160,.20);

    font:700 .72rem var(--mono);

    letter-spacing:.25em;

}

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

.letter__paper .letter-paragraph:first-child::before{

    content:"♡";

    margin-right:.35rem;

    color:#ff92af;

}

.letter-paragraph{

    position:relative;

    margin-bottom:1.7rem;

    opacity:0;

    transform:translateY(18px);

    color:var(--paper-ink);

    font:

        1.08rem/

        1.92

        var(--display);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.letter-paragraph.is-visible{

    opacity:1;

    transform:translateY(0);

}

.letter__closing{

    margin-bottom:0;

}

/*======================================
=          CONSTELLATION
======================================*/

.constellation{

    padding-top:var(--space-9);

}

.constellation__sky{

    position:relative;

    overflow:hidden;

    min-height:580px;

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

    border:

        1px solid

        var(--line);

    border-radius:20px;

    background:

        radial-gradient(

            circle at 17% 77%,

            rgba(38,92,213,.22),

            transparent 25%

        ),

        radial-gradient(

            circle at 80% 17%,

            rgba(151,71,243,.20),

            transparent 29%

        ),

        rgba(13,19,49,.72);

}

.constellation__sky::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(

            rgba(255,255,255,.45)

            .75px,

            transparent

            .9px

        );

    background-size:38px 38px;

    opacity:.38;

}

.constellation__sky::after{

    content:"♡ ♡ ♡ ♡";

    position:absolute;

    top:1rem;

    left:1rem;

    color:rgba(255,158,190,.18);

    font:700 .7rem var(--mono);

    letter-spacing:.55rem;

}

.constellation__sky svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.constellation__sky path{

    fill:none;

    stroke:rgba(210,194,255,.42);

    stroke-width:1.2;

    stroke-dasharray:4 8;

}

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

.memory-star{

    position:absolute;

    z-index:1;

    display:grid;

    justify-items:center;

    gap:.45rem;

    border:0;

    background:transparent;

    color:#fff;

    cursor:pointer;

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

}

.memory-star span{

    position:relative;

    color:#d9c5ff;

    font-size:1.9rem;

    text-shadow:

        0 0 16px

        rgba(193,155,255,.95);

    transition:

        transform var(--duration-fast) var(--ease),

        color var(--duration-fast) var(--ease),

        text-shadow var(--duration-fast) var(--ease);

}

.memory-star span::after{

    content:"♡";

    position:absolute;

    inset:0;

    opacity:0;

    color:#ff8faa;

    transform:scale(.8);

    transition:

        opacity var(--duration-fast) var(--ease),

        transform var(--duration-fast) var(--ease);

}

.memory-star small{

    opacity:0;

    color:#e5dcff;

    white-space:nowrap;

    font:.64rem var(--mono);

    letter-spacing:.06em;

    transition:

        opacity var(--duration-fast) var(--ease);

}

.memory-star:hover span,
.memory-star:focus-visible span,
.memory-star.is-selected span{

    color:#fff;

    transform:

        scale(1.45)

        rotate(20deg);

    text-shadow:

        0 0 24px

        rgba(255,255,255,.9);

}

.memory-star:hover span::after,
.memory-star:focus-visible span::after,
.memory-star.is-selected span::after{

    opacity:1;

    transform:scale(1.05);

}

.memory-star:hover small,
.memory-star:focus-visible small,
.memory-star.is-selected small{

    opacity:1;

}

.star--one{

    left:11%;

    top:70%;

}

.star--two{

    left:27%;

    top:29%;

}

.star--three{

    left:46.5%;

    top:55%;

}

.star--four{

    left:64.5%;

    top:22%;

}

.star--five{

    left:85%;

    top:63%;

}

.memory-message{

    position:absolute;

    left:50%;

    bottom:2.3rem;

    transform:translateX(-50%);

    z-index:2;

    width:min(570px,calc(100% - 3rem));

    margin:0;

    text-align:center;

    color:#f0eaff;

    font:

        italic

        clamp(
            1.05rem,
            2.3vw,
            1.45rem
        )/1.45

        var(--display);

}

/*======================================
=                GAME
======================================*/

.game{

    display:grid;

    grid-template-columns:

        .9fr

        1.1fr;

    align-items:center;

    gap:

        clamp(
            2.5rem,
            7vw,
            7rem
        );

    min-height:78vh;

}

.game__intro{

    max-width:470px;

}

.game__intro h2{

    margin:

        0

        0

        var(--space-4);

    font:

        500

        clamp(
            2.8rem,
            5.6vw,
            4.8rem
        )/.98

        var(--display);

    letter-spacing:-.04em;

}

.game__intro>p:not(.kicker){

    color:var(--muted);

    line-height:1.8;

}

/*======================================
=                QUIZ
======================================*/

.quiz{

    padding:

        clamp(
            1.8rem,
            4vw,
            3rem
        );

    border:

        1px solid

        var(--line);

    border-radius:

        var(--radius-md);

    background:

        rgba(
            26,
            27,
            63,
            .68
        );

    box-shadow:

        var(--shadow-sm);

}

.quiz::before{

    content:"♡ ♡";

    display:block;

    margin-bottom:1rem;

    color:rgba(255,148,178,.30);

    font:700 .7rem var(--mono);

    letter-spacing:.45rem;

}

.quiz__progress{

    margin-bottom:2rem;

    color:#b8c5f7;

    font:.68rem var(--mono);

    letter-spacing:.12em;

}

.quiz h3,
.quiz-complete h3{

    margin-bottom:2rem;

    font:

        500

        clamp(
            1.7rem,
            3.5vw,
            2.6rem
        )/1.1

        var(--display);

}

.quiz__answers{

    display:grid;

    gap:.8rem;

}

.quiz__answers button{

    min-height:56px;

    padding:

        .9rem

        1rem;

    border:

        1px solid

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

    border-radius:10px;

    text-align:left;

    cursor:pointer;

    color:#e9ebff;

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

    transition:

        transform var(--duration-fast) var(--ease),

        background var(--duration-fast) var(--ease),

        border-color var(--duration-fast) var(--ease);

}

.quiz__answers button:hover,
.quiz__answers button:focus-visible{

    transform:translateX(6px);

    background:

        rgba(174,139,255,.12);

    border-color:#a998ed;

    outline:none;

}

.quiz__answers button.is-right{

    border-color:#9b85f3;

    background:

        rgba(155,133,243,.20);

}

.quiz__answers button.is-wrong{

    border-color:#ee718d;

    background:

        rgba(243,64,104,.12);

}

.quiz__feedback{

    min-height:1.4em;

    margin-top:1.4rem;

    color:#d6ccff;

    font:italic 1rem var(--display);

}

/*======================================
=          QUIZ COMPLETE
======================================*/

.quiz__next{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:3.8rem;

    height:2.8rem;

    margin-top:1.2rem;

    margin-left:auto;

    padding:0;

    border:

        1px solid

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

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            rgba(87,148,255,.18),

            rgba(157,105,255,.22)

        );

    box-shadow:

        inset

        0 1px 0

        rgba(255,255,255,.14),

        0 10px 24px

        rgba(0,0,0,.18);

}

.quiz__next::after{

    content:"♡";

    margin-left:.2rem;

    font-size:.72em;

}

.quiz__next:hover{

    transform:translateY(-2px);

}

.quiz-complete{

    display:none;

    padding:3rem;

    text-align:center;

    border:

        1px solid

        rgba(222,203,255,.32);

    border-radius:

        var(--radius-md);

    background:

        rgba(97,56,149,.28);

}

.quiz-complete::before{

    content:"♡ ♡ ♡";

    display:block;

    margin-bottom:1rem;

    color:rgba(255,155,186,.30);

    font:700 .7rem var(--mono);

    letter-spacing:.5rem;

}

.quiz-complete.is-visible{

    display:block;

    animation:

        fade-up

        .7s

        ease

        both;

}

.quiz-complete span{

    color:#d9c5ff;

    font-size:2rem;

}

.quiz-complete p{

    margin:0;

    color:#e3dafa;

    line-height:1.7;

}

/*======================================
=              LESSONS
======================================*/

.lessons{

    padding-bottom:var(--space-9);

}

.lesson-grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:1px;

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

    overflow:hidden;

    border:

        1px solid

        var(--line);

    border-radius:

        var(--radius-md);

    background:

        var(--line);

}

.lesson{

    min-height:240px;

    padding:

        clamp(
            2rem,
            4vw,
            3.5rem
        );

    background:

        rgba(
            21,
            26,
            58,
            .65
        );

    transition:

        background var(--duration-normal) var(--ease);

}

.lesson:hover{

    background:

        rgba(
            63,
            44,
            102,
            .66
        );

}

.lesson::before{

    content:"♡";

    display:block;

    margin-bottom:1.3rem;

    color:rgba(255,148,176,.28);

    font:700 .8rem var(--mono);

}

.lesson span{

    display:block;

    margin-bottom:2.3rem;

    color:#9ea7dd;

    font:.68rem var(--mono);

}

.lesson h3{

    margin-bottom:1rem;

    font:

        500

        clamp(
            1.45rem,
            3vw,
            2.1rem
        )/1.05

        var(--display);

}

.lesson p{

    margin:0;

    color:var(--muted);

    line-height:1.7;

}

/*======================================
=               FINALE
======================================*/

.finale{

    position:relative;

    overflow:hidden;

    min-height:100svh;

    display:grid;

    place-items:center;

    text-align:center;

    padding:

        var(--space-8)

        var(--space-3)

        var(--space-5);

    background:

        radial-gradient(

            circle at 25% 20%,

            rgba(
                45,
                95,
                247,
                .34
            ),

            transparent 33%

        ),

        radial-gradient(

            circle at 75% 76%,

            rgba(
                232,
                38,
                87,
                .36
            ),

            transparent 35%

        ),

        #281441;

}

.finale::before{

    content:"♡ ♡ ♡ ♡ ♡";

    position:absolute;

    top:1.4rem;

    left:50%;

    transform:translateX(-50%);

    color:

        rgba(
            255,
            171,
            194,
            .23
        );

    font:

        700

        .76rem

        var(--mono);

    letter-spacing:.8rem;

    pointer-events:none;

}

.finale::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            rgba(
                164,
                87,
                255,
                .20
            ),

            transparent 58%

        );

}

.finale__content{

    position:relative;

    z-index:1;

    width:min(
        720px,
        100%
    );

}

.finale .kicker{

    color:#e0c6ff;

}

.button--secret{

    margin-top:1rem;

    color:#fff;

    border:

        1px solid

        rgba(
            255,
            255,
            255,
            .26
        );

    background:

        rgba(
            255,
            255,
            255,
            .10
        );

}

.button--secret:hover{

    background:

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

}

/*======================================
=              SECRET
======================================*/

.secret{

    display:grid;

    gap:1rem;

    overflow:hidden;

    max-width:480px;

    max-height:0;

    opacity:0;

    margin:0 auto;

    color:#eee5ff;

    line-height:1.8;

    transition:

        max-height 1.2s ease,

        opacity .8s ease,

        margin-top .8s ease;

}

.secret::before{

    content:"♡";

    display:block;

    color:#ff9ab4;

    font:

        700

        1rem

        var(--mono);

}

.secret.is-open{

    max-height:520px;

    opacity:1;

    margin-top:2.5rem;

}

.secret p{

    margin:0;

}

.secret strong{

    display:block;

    padding-top:.8rem;

    font:

        italic

        1.9rem

        var(--display);

}

.secret strong::before{

    content:"♡";

    display:block;

    margin-bottom:.35rem;

    color:#ff92af;

    font-size:1.2rem;

}

footer{

    position:absolute;

    bottom:1.5rem;

    z-index:2;

    color:

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

    font:

        .65rem

        var(--mono);

    letter-spacing:.1em;

}

/*======================================
=             MUSIC BAR
======================================*/

.music-bar{

    position:fixed;

    right:1rem;

    bottom:1rem;

    z-index:15;

    display:grid;

    gap:.6rem;

    width:135px;

    padding:

        .85rem

        .8rem;

    border:

        1px solid

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

    border-radius:18px;

    background:

        linear-gradient(

            180deg,

            rgba(
                20,
                23,
                49,
                .86
            ),

            rgba(
                37,
                24,
                58,
                .86
            )

        );

    backdrop-filter:blur(16px);

    box-shadow:

        var(--shadow-sm);

}

.music-bar[hidden]{

    display:none !important;

}

.music-bar__header{

    display:grid;

    gap:.2rem;

    text-align:center;

}

.music-bar__kicker{

    color:#c9d4ff;

    font:

        500

        .63rem

        var(--mono);

    letter-spacing:.16em;

    text-transform:uppercase;

}

.music-bar__header strong{

    color:#fff;

    font:

        500

        .9rem

        var(--sans);

}

.music-bar__button{

    min-height:2.1rem;

    cursor:pointer;

    border:

        1px solid

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

    border-radius:999px;

    color:#fff;

    background:

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

    transition:

        transform var(--duration-fast) var(--ease),

        background var(--duration-fast) var(--ease);

}

.music-bar__button:hover{

    transform:translateY(-2px);

    background:

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

}

.music-bar__button--primary{

    background:

        linear-gradient(

            135deg,

            rgba(
                87,
                148,
                255,
                .28
            ),

            rgba(
                255,
                84,
                118,
                .22
            )

        );

}

.music-bar__volume{

    display:grid;

    gap:.35rem;

    color:

        rgba(
            235,
            238,
            255,
            .78
        );

    font:

        .62rem

        var(--mono);

    letter-spacing:.08em;

    text-transform:uppercase;

}

.music-bar__volume input{

    width:100%;

    accent-color:#ff7ca0;

}

/*======================================
=             LIGHTBOX
======================================*/

.lightbox{

    width:min(
        850px,
        calc(100% - 2rem)
    );

    max-height:min(
        90svh,
        980px
    );

    padding:.8rem;

    border:

        1px solid

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

    border-radius:14px;

    background:#17142a;

    color:#fff;

    box-shadow:

        0 25px 80px

        rgba(
            0,
            0,
            0,
            .70
        );

}

.lightbox::backdrop{

    background:

        rgba(
            4,
            5,
            16,
            .78
        );

    backdrop-filter:blur(8px);

}

.lightbox img{

    display:block;

    max-width:100%;

    max-height:calc(82svh - 4rem);

    margin:0 auto;

    border-radius:8px;

}

.lightbox p{

    margin:

        .8rem

        2.5rem

        .2rem;

    text-align:center;

    color:#dedaf0;

    font:

        italic

        1rem

        var(--display);

}

.lightbox__close{

    position:absolute;

    top:.3rem;

    right:.35rem;

    width:2.3rem;

    height:2.3rem;

    border:0;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:

        rgba(
            0,
            0,
            0,
            .48
        );

    font-size:1.8rem;

    line-height:1;

}

/*======================================
=            REVEALS
======================================*/

.reveal{

    opacity:0;

    transform:translateY(20px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.is-visible{

    opacity:1;

    transform:translateY(0);

}

@keyframes breathe{

    0%,
    100%{

        transform:scale(.90);

        opacity:.55;

    }

    50%{

        transform:scale(1.12);

        opacity:1;

    }

}

@keyframes city-pulse{

    0%{

        transform:scale(.65);

        opacity:.95;

    }

    75%,
    100%{

        transform:scale(1.55);

        opacity:0;

    }

}

@keyframes fade-up{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================
=             RESPONSIVE
======================================*/

@media (max-width:700px){

    .section{

        width:min(

            calc(100% - 2rem),

            560px

        );

        padding-block:

            var(--space-7);

    }

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

    .intro{

        padding:

            var(--space-7)

            var(--space-2);

    }

    .intro__content{

        padding:

            2rem

            1.5rem;

    }

    .intro h1{

        font-size:

            clamp(
                2.8rem,
                12vw,
                4.8rem
            );

    }

    .intro__description{

        font-size:.98rem;

        line-height:1.75;

    }

    .intro-player{

        grid-template-columns:1fr;

        text-align:center;

        justify-items:center;

    }

    .intro-player__body{

        width:100%;

    }

    .intro-player__topline{

        flex-direction:column;

        gap:.5rem;

        align-items:center;

    }

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

    .hero{

        padding:

            var(--space-7)

            var(--space-2);

    }

    .hero__description{

        max-width:100%;

        font-size:1rem;

    }

    .hero__footer{

        bottom:1.5rem;

        font-size:.62rem;

    }

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

    .counter{

        grid-template-columns:

            repeat(2,1fr);

        margin-top:

            var(--space-5);

    }

    .counter__unit{

        min-height:140px;

    }

    .counter__unit strong{

        font-size:2.6rem;

    }

    /*==============================
    DISTANCE
    ==============================*/

    .distance{

        width:min(

            calc(100% - 2rem),

            560px

        );

        grid-template-columns:1fr;

        gap:2rem;

        padding:

            var(--space-5)

            0

            var(--space-7);

    }

    .distance__copy{

        max-width:none;

    }

    .distance__copy>p{

        max-width:none;

    }

    .distance__map{

        min-height:320px;

    }

    .route-point__label{

        font-size:.82rem;

        max-width:130px;

        white-space:normal;

    }

    /*==============================
    VOICE
    ==============================*/

    .voice{

        width:min(

            calc(100% - 2rem),

            560px

        );

        padding-bottom:

            var(--space-6);

    }

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

    .polaroids{

        grid-template-columns:

            repeat(2,1fr);

        gap:1.2rem;

        margin-top:

            var(--space-5);

    }

    .polaroid{

        grid-column:auto;

        margin-top:0;

        transform:none;

    }

    .polaroid:nth-child(even){

        transform:rotate(2deg);

    }

    .polaroid:nth-child(odd){

        transform:rotate(-2deg);

    }

    .polaroid img,

    .polaroid--four img{

        height:230px;

    }

    .polaroid span{

        font-size:.85rem;

    }

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

    .letter{

        width:min(

            calc(100% - 2rem),

            650px

        );

        padding-top:

            var(--space-7);

    }

    .letter__paper{

        padding:

            2.2rem

            1.5rem;

    }

    .letter-paragraph{

        font-size:1rem;

        line-height:1.8;

    }

    /*==============================
    CONSTELLATION
    ==============================*/

    .constellation{

        padding-top:

            var(--space-7);

    }

    .constellation__sky{

        min-height:460px;

        margin-top:

            var(--space-5);

    }

    .memory-star small{

        display:none;

    }

    .memory-message{

        bottom:1.5rem;

        width:calc(100% - 2rem);

        font-size:1.05rem;

    }

    /*==============================
    GAME
    ==============================*/

    .game{

        grid-template-columns:1fr;

        min-height:auto;

        gap:2.5rem;

    }

    .game__intro{

        max-width:none;

    }

    .quiz{

        padding:1.5rem;

    }

    /*==============================
    LESSONS
    ==============================*/

    .lesson-grid{

        grid-template-columns:1fr;

    }

    .lesson{

        min-height:auto;

    }

    /*==============================
    FINALE
    ==============================*/

    .finale{

        padding:

            var(--space-7)

            1rem

            var(--space-4);

    }

    .secret{

        max-width:100%;

    }

    /*==============================
    MUSIC BAR
    ==============================*/

    .music-bar{

        width:120px;

        right:.75rem;

        bottom:.75rem;

    }

}

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

    *,

    *::before,

    *::after{

        animation-duration:.001ms !important;

        transition-duration:.001ms !important;

        scroll-behavior:auto !important;

    }

}
.intro__button[hidden]{
    display:none !important;
}