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

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

html,
body{

    width:100%;
    height:100%;

}

body{

    background:#F6F2ED;

    color:#3E342E;

    font-family:"EB Garamond",serif;

    overflow:hidden;

}

/* ==========================================================
   SHARED SECTIONS
========================================================== */

.hero,
.scene-envelope,
.story,
.guess,
.reveal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================================
   VISIBILITY
========================================================== */

.scene-envelope,
.story,
.guess,
.reveal{

    opacity:0;

    pointer-events:none;

    transition:opacity .9s ease;

}

.scene-envelope.show,
.story.show,
.guess.show,
.reveal.show{

    opacity:1;

    pointer-events:auto;

}

.hidden{

    display:none;

}

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

.hero{

    flex-direction:column;

    text-align:center;

    padding:40px;

    transition:

        opacity 1.2s ease,
        transform 1.2s ease;

}

.hero.fade-out{

    opacity:0;

    transform:translateY(-30px);

    pointer-events:none;

}

.hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:70px;

    font-weight:400;

    line-height:1.12;

    margin-bottom:38px;

    opacity:0;

    transform:translateY(18px);

}

.hero p{

    font-size:24px;

    line-height:1.7;

    color:#7F736C;

    font-style:italic;

    margin-bottom:55px;

    opacity:0;

    transform:translateY(18px);

}

.hero button{

    border:none;

    outline:none;

    cursor:pointer;

    padding:16px 56px;

    border-radius:999px;

    background:#C9A6A3;

    color:white;

    font-size:17px;

    font-family:inherit;

    transition:.35s;

    opacity:0;

    transform:translateY(18px);

}

.hero button:hover{

    background:#BA9592;

    transform:translateY(-2px);

}

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

.hero h1{
    animation:fadeUp 1s forwards;
}

.hero p{
    animation:fadeUp 1s .35s forwards;
}

.hero button{
    animation:fadeUp 1s .7s forwards;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(18px);
    }

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

}
/* ==========================================================
   ENVELOPE SCENE
========================================================== */

.scene-envelope{

    background:transparent;

}

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

.envelope-wrapper{

    position:relative;

    width:min(92vw, 720px);

    aspect-ratio:1200 / 650;

}

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

.envelope{

    position:absolute;

    inset:0;

    overflow:visible;

}

/* ==========================================================
   SHADOW
========================================================== */

.shadow{

    position:absolute;

    left:50%;
    bottom:1%;

    width:58%;
    height:8%;

    transform:translateX(-50%);

    border-radius:50%;

    background:rgba(54, 38, 31, .13);

    filter:blur(24px);

    z-index:0;

}

/* ==========================================================
   SHARED IMAGE LAYERS
========================================================== */

.envelope-body,
.flap-closed,
.flap-open{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    pointer-events:none;

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================================
   OPEN FLAP
========================================================== */

.flap-open{

    z-index:5;

    opacity:0;

    transform:scaleY(.04);

    transform-origin:50% 38.5%;

    transition:
        opacity .22s ease .28s,
        transform .9s cubic-bezier(.19, 1, .22, 1) .18s;

}

.envelope-wrapper.open .flap-open{

    opacity:1;

    transform:scaleY(1);

}

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

.letter{

    position:absolute;

    left:50%;
    top:18%;

    width:68%;
    height:55%;

    transform:
        translateX(-50%)
        translateY(30%);

    background:
        linear-gradient(
            180deg,
            #FFFDFC 0%,
            #FAF6F1 100%
        );

    border-radius:10px;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .12);

    z-index:10;

    transition:
        transform 1.8s 1.15s cubic-bezier(.19, 1, .22, 1);

}

.envelope-wrapper.open .letter{

    transform:
        translateX(-50%)
        translateY(-55%);

}

.letter-content{

    text-align:center;

    padding:11% 8% 0;

}

.letter h2{

    font-family:"Cormorant Garamond", serif;

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

    font-weight:500;

    color:#6D564F;

    margin-bottom:14px;

}

.letter-subtitle{

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

    font-style:italic;

    color:#8A7A73;

    line-height:1.55;

}

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

.envelope-body{

    z-index:20;

    filter:
        drop-shadow(0 18px 22px rgba(58, 40, 32, .12));

}

/* ==========================================================
   CLOSED FLAP
========================================================== */

.flap-closed{

    z-index:30;

    opacity:1;

    transform:
        translateY(0)
        scaleY(1);

    transform-origin:50% 18.5%;

    transition:
        transform .8s cubic-bezier(.19, 1, .22, 1),
        opacity .25s ease .55s;

}

.envelope-wrapper.open .flap-closed{

    transform:
        translateY(-1.5%)
        scaleY(.08);

    opacity:0;

}

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

@media (max-width:600px){

    .envelope-wrapper{

        width:96vw;

    }

    .letter{

        border-radius:7px;

    }

}
/* ==========================================================
   STORY SCENE
========================================================== */

.story{

    padding:32px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(255,255,255,.72),
            transparent 48%
        ),
        #F6F2ED;

    z-index:40;

}

.story-paper{

    width:min(680px, 92vw);

    max-height:88vh;

    overflow-y:auto;

    padding:64px 72px;

    border:1px solid rgba(104,79,68,.08);

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.72),
            rgba(250,245,239,.95)
        );

    box-shadow:
        0 24px 65px rgba(69,47,38,.12);

    opacity:0;

    transform:
        translateY(24px)
        scale(.96);

    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(.19,1,.22,1);

}

.story.show .story-paper{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}

.story-content{

    text-align:center;

}

.story-kicker{

    margin-bottom:18px;

    font-size:15px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#B38D89;

}

.story h2{

    margin-bottom:34px;

    font-family:"Cormorant Garamond",serif;

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

    font-weight:500;

    color:#665049;

}

.story-copy{

    max-width:520px;

    margin:0 auto;

}

.story-copy p{

    margin-bottom:24px;

    font-size:21px;

    line-height:1.75;

    color:#756861;

}

.story-copy p:last-child{

    margin-bottom:38px;

}

.story button,
.guess button{

    border:none;

    padding:15px 46px;

    border-radius:999px;

    background:#C9A6A3;

    color:#FFFFFF;

    font-family:"EB Garamond",serif;

    font-size:17px;

    cursor:pointer;

    box-shadow:
        0 10px 24px rgba(132,91,87,.15);

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

}

.story button:hover,
.guess button:hover{

    transform:translateY(-2px);

    background:#B9918E;

    box-shadow:
        0 13px 28px rgba(132,91,87,.2);

}

/* ==========================================================
   GUESS SCENE
========================================================== */

.guess{

    padding:32px;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(255,255,255,.78),
            transparent 48%
        ),
        #F6F2ED;

    z-index:50;

}

.guess-card{

    width:min(560px, 92vw);

    padding:62px 58px;

    text-align:center;

    border:1px solid rgba(104,79,68,.08);

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            #FFFDFB,
            #F9F3EE
        );

    box-shadow:
        0 24px 65px rgba(69,47,38,.12);

    opacity:0;

    transform:
        translateY(26px)
        scale(.96);

    transition:
        opacity .9s ease,
        transform 1.1s cubic-bezier(.19,1,.22,1);

}

.guess.show .guess-card{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}

.guess-kicker{

    margin-bottom:14px;

    font-size:15px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#B38D89;

}

.guess h2{

    margin-bottom:18px;

    font-family:"Cormorant Garamond",serif;

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

    font-weight:500;

    color:#665049;

}

.guess-intro{

    max-width:390px;

    margin:0 auto 34px;

    font-size:20px;

    line-height:1.6;

    color:#7A6C65;

}

.guess label{

    display:block;

    margin-bottom:12px;

    font-size:18px;

    font-style:italic;

    color:#8A7A73;

}

.guess input{

    width:100%;

    margin-bottom:15px;

    padding:16px 18px;

    border:none;

    border-bottom:1px solid rgba(105,77,68,.28);

    border-radius:0;

    outline:none;

    background:transparent;

    color:#5F4B45;

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

    text-align:center;

    transition:border-color .3s ease;

}

.guess input:focus{

    border-bottom-color:#B88784;

}

.guess input::placeholder{

    color:#B4A7A0;

}

.guess-message{

    min-height:28px;

    margin-bottom:20px;

    font-size:17px;

    font-style:italic;

    color:#A17370;

}

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

.reveal{

    overflow:hidden;

    padding:32px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 42%,
            #FFFDFB 0%,
            #F8EDEB 48%,
            #EFD8D5 100%
        );

    z-index:60;

}

.reveal::before,
.reveal::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

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

    filter:blur(12px);

    pointer-events:none;

}

.reveal::before{

    top:-160px;
    left:-110px;

}

.reveal::after{

    right:-120px;
    bottom:-170px;

}

.reveal-content{

    position:relative;

    width:min(900px, 94vw);

    z-index:2;

    opacity:0;

    transform:
        translateY(28px)
        scale(.96);

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.19,1,.22,1);

}

.reveal.show .reveal-content{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}

.reveal-kicker{

    margin-bottom:18px;

    font-size:15px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#A9827E;

    opacity:0;

}

.reveal.show .reveal-kicker{

    animation:softAppear .9s .2s forwards;

}

/* ==========================================================
   NAME
========================================================== */

.name-reveal{

    position:relative;

    display:inline-block;

    margin:4px 0 10px;

}

.reveal h1{

    display:flex;

    justify-content:center;

    gap:.08em;

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(82px,16vw,170px);

    font-weight:500;

    letter-spacing:.04em;

    line-height:1;

    color:#9F6668;

}

.reveal h1 span{

    display:inline-block;

    opacity:0;

    transform:
        translateY(24px)
        scale(.88);

}

.reveal.show h1 span{

    animation:
        nameLetter .8s cubic-bezier(.19,1,.22,1) forwards;

}

.reveal.show h1 span:nth-child(1){ animation-delay:.75s; }
.reveal.show h1 span:nth-child(2){ animation-delay:.95s; }
.reveal.show h1 span:nth-child(3){ animation-delay:1.15s; }
.reveal.show h1 span:nth-child(4){ animation-delay:1.35s; }
.reveal.show h1 span:nth-child(5){ animation-delay:1.55s; }

@keyframes nameLetter{

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

/* ==========================================================
   BUTTERFLY
========================================================== */

.reveal-butterfly{

    position:absolute;

    left:-8%;

    top:55%;

    font-size:30px;

    opacity:0;

    filter:
        drop-shadow(0 7px 8px rgba(97,64,71,.18));

    pointer-events:none;

}

.reveal.show .reveal-butterfly{

    animation:
        butterflyJourney 5.4s 1.45s ease-in-out forwards;

}

@keyframes butterflyJourney{

    0%{

        opacity:0;

        transform:
            translate(-70px,35px)
            rotate(-18deg)
            scale(.68);

    }

    10%{

        opacity:1;

    }

    28%{

        transform:
            translate(75px,-70px)
            rotate(12deg)
            scale(.88);

    }

    48%{

        transform:
            translate(250px,-38px)
            rotate(-10deg)
            scale(1);

    }

    68%{

        transform:
            translate(405px,24px)
            rotate(13deg)
            scale(.88);

    }

    84%{

        transform:
            translate(315px,-20px)
            rotate(-6deg)
            scale(.76);

    }

    100%{

        opacity:1;

        transform:
            translate(330px,-13px)
            rotate(2deg)
            scale(.7);

    }

}

/* ==========================================================
   NAME MEANING
========================================================== */

.name-meaning{

    max-width:760px;

    margin:6px auto 25px;

    font-family:"Cormorant Garamond",serif;

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

    font-style:italic;

    letter-spacing:.04em;

    line-height:1.6;

    color:#98736F;

    opacity:0;

}

.name-meaning span{

    display:inline-block;

    margin:0 9px;

    color:#C09A97;

}

.reveal.show .name-meaning{

    animation:softAppear 1s 2.15s forwards;

}

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

.reveal-note{

    margin-bottom:27px;

    font-size:21px;

    font-style:italic;

    color:#7E6B65;

    opacity:0;

}

.reveal.show .reveal-note{

    animation:softAppear 1s 2.55s forwards;

}

.reveal-signature{

    font-size:19px;

    line-height:1.7;

    color:#725F58;

    opacity:0;

}

.reveal-signature strong{

    font-family:"Cormorant Garamond",serif;

    font-size:27px;

    font-weight:500;

    color:#9F6668;

}

.reveal.show .reveal-signature{

    animation:softAppear 1s 2.95s forwards;

}

.reveal-closing{

    margin-top:30px;

    font-family:"Cormorant Garamond",serif;

    font-size:18px;

    font-style:italic;

    color:#A1847E;

    opacity:0;

}

.reveal.show .reveal-closing{

    animation:softAppear 1s 3.5s forwards;

}

@keyframes softAppear{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   REVEAL — MOBILE
========================================================== */

@media (max-width:600px){

    .reveal{

        padding:22px;

    }

    .reveal-content{

        width:100%;

    }

    .name-meaning span{

        margin:0 4px;

    }

    .reveal-butterfly{

        font-size:25px;

    }

    @keyframes butterflyJourney{

        0%{

            opacity:0;

            transform:
                translate(-35px,30px)
                rotate(-18deg)
                scale(.65);

        }

        25%{

            opacity:1;

            transform:
                translate(55px,-55px)
                rotate(12deg)
                scale(.82);

        }

        50%{

            transform:
                translate(160px,-28px)
                rotate(-9deg)
                scale(.9);

        }

        75%{

            transform:
                translate(250px,18px)
                rotate(12deg)
                scale(.78);

        }

        100%{

            opacity:1;

            transform:
                translate(205px,-9px)
                rotate(2deg)
                scale(.68);

        }

    }

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

@media (max-width:700px){

    .hero{

        padding:28px;

    }

    .hero h1{

        font-size:clamp(46px, 13vw, 62px);

    }

    .hero p{

        font-size:21px;

    }

    .story,
    .guess,
    .reveal{

        padding:20px;

    }

    .story-paper{

        padding:46px 28px;

    }

    .story-copy p{

        font-size:19px;

    }

    .guess-card{

        padding:48px 28px;

    }

    .guess-intro{

        font-size:18px;

    }

    .reveal-intro{

        font-size:20px;

    }

}

@media (max-height:720px){

    .story-paper{

        max-height:92vh;

        padding-top:38px;

        padding-bottom:38px;

    }

    .story-copy p{

        margin-bottom:17px;

        line-height:1.55;

    }

}
/* ==========================================================
   FINAL TRANSITION POLISH
========================================================== */

.scene-envelope{

    transition:
        opacity .9s ease,
        filter 1s ease;

}

.envelope-wrapper{

    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(.19,1,.22,1);

}

.scene-envelope.is-leaving{

    opacity:0;

    filter:blur(7px);

    pointer-events:none;

}

.scene-envelope.is-leaving .envelope-wrapper{

    opacity:0;

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

}

/* The story paper gently arrives as the envelope fades away */

.story-paper{

    transform:
        translateY(30px)
        scale(.94);

    transform-origin:center center;

}

.story.show .story-paper{

    transform:
        translateY(0)
        scale(1);

}


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

.music-toggle{

    position:fixed;

    top:22px;
    right:24px;

    z-index:100;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 15px;

    border:1px solid rgba(133,96,90,.13);

    border-radius:999px;

    background:rgba(255,253,250,.78);

    color:#8E6B67;

    font-family:"EB Garamond",serif;

    font-size:15px;

    cursor:pointer;

    box-shadow:
        0 8px 24px rgba(79,52,45,.08);

    backdrop-filter:blur(10px);

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

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

}

.music-toggle:hover{

    transform:translateY(-2px);

    background:rgba(255,253,250,.96);

}

.music-toggle.is-playing{

    background:#C9A6A3;

    color:#FFFFFF;

}

.music-toggle__icon{

    display:inline-block;

    font-size:17px;

    transform-origin:center;

}

.music-toggle.is-playing .music-toggle__icon{

    animation:musicPulse 1.8s ease-in-out infinite;

}

@keyframes musicPulse{

    0%,
    100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

}


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

@media (max-width:780px){

    body{

        min-height:100svh;

    }

    .hero{

        padding:
            max(28px, env(safe-area-inset-top))
            24px
            max(28px, env(safe-area-inset-bottom));

    }

    .hero h1{

        font-size:clamp(45px,13vw,62px);

        margin-bottom:30px;

    }

    .hero p{

        font-size:20px;

        margin-bottom:42px;

    }

    .hero button{

        padding:14px 46px;

        font-size:16px;

    }

    .envelope-wrapper{

        width:96vw;

    }

    .letter-content{

        padding-top:10%;

    }

    .letter h2{

        font-size:clamp(26px,7vw,38px);

    }

    .letter-subtitle{

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

    }

    .story,
    .guess,
    .reveal{

        padding:
            max(18px, env(safe-area-inset-top))
            18px
            max(18px, env(safe-area-inset-bottom));

    }

    .story-paper{

        width:94vw;

        max-height:90svh;

        padding:42px 25px;

    }

    .story-kicker,
    .guess-kicker,
    .reveal-kicker{

        font-size:12px;

    }

    .story h2{

        font-size:clamp(36px,10vw,48px);

        margin-bottom:25px;

    }

    .story-copy p{

        margin-bottom:19px;

        font-size:18px;

        line-height:1.58;

    }

    .guess-card{

        width:94vw;

        padding:42px 25px;

    }

    .guess h2{

        font-size:clamp(35px,9vw,46px);

    }

    .guess-intro{

        margin-bottom:26px;

        font-size:17px;

    }

    .guess input{

        font-size:25px;

    }

    .reveal-content{

        width:100%;

    }

    .reveal h1{

        font-size:clamp(72px,22vw,115px);

    }

    .name-meaning{

        max-width:92vw;

        font-size:15px;

        line-height:1.8;

    }

    .name-meaning span{

        margin:0 3px;

    }

    .reveal-note{

        margin-bottom:22px;

        font-size:18px;

    }

    .reveal-signature{

        font-size:17px;

    }

    .reveal-closing{

        margin-top:22px;

        font-size:16px;

    }

    .music-toggle{

        top:
            max(14px, env(safe-area-inset-top));

        right:14px;

        padding:9px 12px;

    }

    .music-toggle__text{

        display:none;

    }

}


/* Short phone screens */

@media (max-height:700px) and (max-width:780px){

    .story-paper{

        padding-top:30px;
        padding-bottom:30px;

    }

    .story h2{

        margin-bottom:18px;

    }

    .story-copy p{

        margin-bottom:13px;

        font-size:16px;

        line-height:1.45;

    }

    .guess-card{

        padding-top:32px;
        padding-bottom:32px;

    }

    .reveal h1{

        font-size:clamp(68px,18vw,100px);

    }

    .reveal-kicker{

        margin-bottom:10px;

    }

    .name-meaning{

        margin-bottom:16px;

    }

    .reveal-note{

        margin-bottom:16px;

    }

    .reveal-closing{

        margin-top:15px;

    }

}


/* Respect reduced-motion accessibility preferences */

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

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

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
        transition-delay:0ms !important;

    }

}