/* =======================================
   GENERAL SETTINGS
======================================= */

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

html{
    scroll-behavior:smooth;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background: #ffdcea;
}

body {
    font-family: 'Quicksand', sans-serif;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    color: #b85d82;

    position: relative;
}


/* =======================================
      Animated Background
======================================= */

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}


#background {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;

    /* Better support for mobile browser bars */
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.75) 0%,
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(239, 159, 195, 0.40) 0%,
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #fff8fc 0%,
            #ffe9f3 22%,
            #ffd6e8 48%,
            #fbc6df 72%,
            #fff0f7 100%
        );

    background-size:
        140% 140%,
        140% 140%,
        220% 220%;

    animation:
        gradientMove 18s ease-in-out infinite;
}


/* =======================================
      White doodles
======================================= */

#background::before{

content:"";

position:absolute;

inset:0;

opacity:.10;

background-image:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='white' stroke-width='2' fill='none'%3E%3Cpath d='M55 42 C46 26 20 26 20 52 C20 78 55 92 55 92 C55 92 90 78 90 52 C90 26 64 26 55 42Z'/%3E%3Cpath d='M160 120 C155 108 138 108 138 125 C138 142 160 152 160 152 C160 152 182 142 182 125 C182 108 165 108 160 120Z'/%3E%3Cpath d='M90 170 l8 8 l-8 8 l8-8 l8 8 l-8-8 l8-8 l-8 8z'/%3E%3Ccircle cx='185' cy='50' r='4'/%3E%3Cpath d='M120 55 q12 -14 24 0'/%3E%3C/g%3E%3C/svg%3E");

background-size:260px;

animation:doodleFloat 40s linear infinite;

}


@keyframes doodleFloat{

from{

transform:translateY(0px);

}

to{

transform:translateY(-70px);

}

}


/* =======================================
      Scene Layout
======================================= */

.scene{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

padding:25px;

opacity:0;

pointer-events:none;

transform:translateY(40px);

transition:

opacity .9s ease,

transform .9s ease,

filter .9s ease;

filter:blur(10px);

}


.scene.active{

opacity:1;

pointer-events:auto;

transform:translateY(0);

filter:blur(0);

}


.content{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:22px;

width:100%;

}


/* =======================================
      Title
======================================= */

#title{

font-size:clamp(2.5rem,6vw,4.7rem);

font-weight:700;

color:#cc5f8f;

letter-spacing:1px;

text-align:center;

text-shadow:

0 2px 10px rgba(255,255,255,.7);

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

}


.subtitle{

font-size:1.2rem;

color:#c9799d;

opacity:.9;

animation:fadeUp 1.8s;

}


@keyframes titleFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* =======================================
      Birthday Button
======================================= */

#buttonArea{

position:relative;

display:flex;

justify-content:center;

align-items:center;

margin-top:40px;

width:260px;

height:120px;

}


/* Decorative rotating ring */

.buttonRing {
    position: absolute;

    width: 210px;
    height: 80px;

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

    border-radius: 100px;

    /* no spinning */
    animation: none;

    opacity: .75;
}



@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


#birthdayButton{

position:absolute;

padding:18px 45px;

border:none;

border-radius:999px;

cursor:pointer;

font-size:1.15rem;

font-weight:700;

background:#fffdfd;

color:#d15b90;

border:3px solid #f5aac9;

box-shadow:

0 15px 35px rgba(214,90,143,.20),

0 0 30px rgba(255,255,255,.6);

transition:

transform .4s,

box-shadow .4s,

left .55s cubic-bezier(.22,1,.36,1),

top .55s cubic-bezier(.22,1,.36,1);

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

}


#birthdayButton:hover{

transform:scale(1.06);

box-shadow:

0 20px 40px rgba(214,90,143,.28);

}


@keyframes buttonBreath{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

}


/* =======================================
      Envelope placeholder
======================================= */

#envelopeContainer{

display:flex;

justify-content:center;

align-items:center;

width:100%;

height:340px;

}


/* This will become a proper animated envelope
   in Part 4 */

#envelope{

width:320px;

height:220px;

position:relative;

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

}


@keyframes envelopeFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}


/* =======================================
      Letter
======================================= */

.paper{

width:min(430px,90vw);

background:#fffdfb;

padding:35px;

border-radius:16px;

box-shadow:

0 18px 45px rgba(0,0,0,.15);

line-height:1.8;

color:#8b5b68;

}


/* =======================================
      Buttons
======================================= */

button{

font-family:inherit;

}


#retryButton{

padding:16px 35px;

border:none;

border-radius:999px;

background:#ffe4f0;

font-size:1rem;

font-weight:700;

color:#ca5f8f;

box-shadow:

0 10px 30px rgba(0,0,0,.10);

display:none;

}


/* =======================================
      Whoopsie
======================================= */

#whoopsie{

font-size:3rem;

color:#ff6d99;

opacity:0;

transform:scale(.5);

}


/* =======================================
      Sparkles
======================================= */

#sparkleContainer{

position:fixed;

inset:0;

pointer-events:none;

z-index:-5;

}


/* =======================================
      Responsive
======================================= */

@media(max-width:768px){

#title{

font-size:2.7rem;

}

.subtitle{

font-size:1rem;

padding:0 20px;

text-align:center;

}

#buttonArea{

width:100%;

}

.buttonRing{

width:180px;

height:72px;

}

#birthdayButton{

padding:16px 35px;

font-size:1rem;

}

.paper{

padding:25px;

}

}/* =====================================================
   PART 3
   Premium Effects & Decorative Animations
===================================================== */


/* ============================
   Floating Doodles
============================ */

.doodle{

    position:absolute;

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

    font-size:26px;

    pointer-events:none;

    animation:doodleFloatRandom linear infinite;

    user-select:none;

}

@keyframes doodleFloatRandom{

    0%{

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

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        transform:
        translateY(-60px)
        rotate(18deg);

        opacity:0;

    }

}


/* ============================
   Hearts
============================ */

.heart{

    position:fixed;

    width:18px;

    height:18px;

    background:#ff7cab;

    transform:rotate(45deg);

    pointer-events:none;

    z-index:300;

}

.heart::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:inherit;

    left:-9px;

}

.heart::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:inherit;

    top:-9px;

}

@keyframes explodeHeart{

    from{

        opacity:1;

        transform:
        translate(0,0)
        rotate(45deg)
        scale(.2);

    }

    to{

        opacity:0;

        transform:
        translate(var(--x),var(--y))
        rotate(400deg)
        scale(2);

    }

}


/* ============================
   Orbit Hearts
============================ */

.orbitHeart{

    position:absolute;

    width:12px;

    height:12px;

    background:#ff8fb8;

    border-radius:50%;

    pointer-events:none;

}

.orbitHeart::before{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    background:inherit;

    border-radius:50%;

    left:-6px;

}

.orbitHeart::after{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    background:inherit;

    border-radius:50%;

    top:-6px;

}

.orbiting{

    animation:orbit 2s linear infinite;

}

@keyframes orbit{

    from{

        transform:
        rotate(0deg)
        translateX(55px);

    }

    to{

        transform:
        rotate(360deg)
        translateX(55px);

    }

}


/* ============================
   Scene Transition
============================ */

.scene.hide{

    opacity:0;

    transform:
    scale(.96)
    translateY(-35px);

    filter:blur(12px);

}

.scene.show{

    opacity:1;

    transform:
    scale(1)
    translateY(0);

    filter:blur(0);

}


/* ============================
   Background Glow
============================ */

#backgroundGlow{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.65),
    transparent 70%);

    transition:1.2s;

}

.glow{

    opacity:1 !important;

}


/* ============================
   Envelope Pieces
============================ */

.env-back{

    position:absolute;

    inset:0;

    background:#ffe8f2;

    border-radius:12px;

    box-shadow:
    0 18px 40px rgba(0,0,0,.12);

}

.env-left{

    position:absolute;

    left:0;

    bottom:0;

    width:50%;

    height:100%;

    background:#ffd9e9;

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

}

.env-right{

    position:absolute;

    right:0;

    bottom:0;

    width:50%;

    height:100%;

    background:#ffd9e9;

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

}

.env-bottom{

    position:absolute;

    bottom:0;

    width:100%;

    height:58%;

    background:#ffc8df;

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

}

.env-top{

    position:absolute;

    top:0;

    width:100%;

    height:60%;

    background:#ffd6e8;

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

    transform-origin:top;

}

.seal{

    position:absolute;

    left:50%;

    top:53%;

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

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f08db7;

    box-shadow:
    0 0 15px rgba(240,141,183,.4);

}


/* ============================
   Envelope Animations
============================ */

@keyframes flapOpen{

    to{

        transform:
        rotateX(180deg);

    }

}

@keyframes ripEnvelope{

    20%{

        transform:rotate(-2deg);

    }

    40%{

        transform:rotate(2deg);

    }

    60%{

        transform:rotate(-3deg);

    }

    100%{

        transform:
        scale(.85);

        opacity:0;

    }

}

.rip{

    animation:ripEnvelope .8s forwards;

}


/* ============================
   Letter
============================ */

#letter{

    transform:
    translateY(80px)
    scale(.8);

    opacity:0;

    transition:1s;

}

#letter.show{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

}


/* ============================
   Paper
============================ */

.paper{

    position:relative;

    overflow:hidden;

}

.paper::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        transparent,

        transparent 26px,

        rgba(255,182,205,.10) 27px,

        transparent 28px

    );

}


/* ============================
   Whoopsie Animation
============================ */

.showWhoopsie{

    animation:whoopsie .9s;

}

@keyframes whoopsie{

0%{

opacity:0;

transform:scale(.4);

}

35%{

opacity:1;

transform:scale(1.2);

}

70%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

transform:scale(.8);

}

}


/* ============================
   Tiny Screen Shake
============================ */

.shake{

    animation:shake .45s;

}

@keyframes shake{

0%{transform:translateX(0);}

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

40%{transform:translateX(5px);}

60%{transform:translateX(-4px);}

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

100%{transform:translateX(0);}

}/* =====================================================
   PART 5 — ENVELOPE INTERACTION
===================================================== */


/* Make the envelope clearly clickable */

#envelope {
    cursor: pointer;
    transform-style: preserve-3d;
    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1),
        opacity .5s ease,
        filter .5s ease;
    -webkit-tap-highlight-color: transparent;
}


/* Small hint underneath the envelope */

#envelopeContainer::after {
    content: "tap the envelope ♡";
    position: absolute;

    margin-top: 310px;

    color: rgba(174, 86, 126, .65);

    font-size: .9rem;
    letter-spacing: .5px;

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


@keyframes hintPulse {

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

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

}


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

@media (hover:hover) {

    #envelope:hover {
        transform: translateY(-8px) rotate(-1deg);
    }

}


/* =====================================================
   FIRST FAILED OPENING
===================================================== */

#envelope.first-rip {
    animation:
        envelopePanic .9s ease,
        envelopeBreak 1.6s .75s
        cubic-bezier(.22,.75,.25,1)
        forwards;
}


@keyframes envelopePanic {

    0% {
        transform: translate(0, 0) rotate(0);
    }

    15% {
        transform: translate(-5px, 1px) rotate(-2deg);
    }

    30% {
        transform: translate(6px, -2px) rotate(2deg);
    }

    45% {
        transform: translate(-7px, 1px) rotate(-3deg);
    }

    60% {
        transform: translate(6px, 2px) rotate(3deg);
    }

    80% {
        transform: translate(-3px, 0) rotate(-1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0);
    }

}


@keyframes envelopeBreak {

    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    40% {
        transform: scale(1.05) rotate(2deg);
    }

    100% {
        opacity: 0;
        transform:
            scale(.72)
            rotate(-8deg)
            translateY(45px);

        filter: blur(4px);
    }

}


/* Top flap flies away */

#envelope.first-rip .env-top {
    animation:
        rippedFlap 1.5s .65s
        cubic-bezier(.22,.75,.25,1)
        forwards;
}


@keyframes rippedFlap {

    0% {
        transform: translate(0,0) rotate(0);
        opacity: 1;
    }

    35% {
        transform:
            translate(-10px,-20px)
            rotate(-8deg);

        opacity: 1;
    }

    100% {
        transform:
            translate(-150px,-220px)
            rotate(-55deg);

        opacity: 0;
    }
}


/* Left side tears away */

#envelope.first-rip .env-left {

    animation:
        ripLeft .75s .45s forwards;

}


@keyframes ripLeft {

    0% {
        transform:
            translate(0,0)
            rotate(0);

        opacity: 1;
    }

    35% {
        transform:
            translate(-20px,15px)
            rotate(-8deg);
    }

    100% {
        transform:
            translate(-220px,160px)
            rotate(-50deg);

        opacity: 0;
    }
}




/* Right side tears away */

#envelope.first-rip .env-right {

    animation:
        ripRight .75s .45s forwards;

}


@keyframes ripRight {

    0% {
        transform:
            translate(0,0)
            rotate(0);

        opacity: 1;
    }

    35% {
        transform:
            translate(20px,15px)
            rotate(8deg);
    }

    100% {
        transform:
            translate(220px,160px)
            rotate(50deg);

        opacity: 0;
    }
}


/* Seal pops forward */

#envelope.first-rip .seal {

    animation:
        sealPop .55s .2s forwards;

}


@keyframes sealPop {

    40% {
        transform:
            translate(-50%,-50%)
            scale(1.4);
    }

    100% {
        transform:
            translate(-50%,-50%)
            scale(.2)
            rotate(30deg);

        opacity: 0;
    }

}


/* =====================================================
   PAPER SCRAPS
===================================================== */

.paper-scrap {

    position: fixed;

    width: 14px;
    height: 10px;

    background: #ffe2ef;

    pointer-events: none;

    z-index: 500;

    border-radius: 2px;

    animation:
        scrapFly var(--duration)
        cubic-bezier(.18,.67,.32,1)
        forwards;

}


@keyframes scrapFly {

    from {

        opacity: 1;

        transform:
            translate(0,0)
            rotate(0);

    }

    to {

        opacity: 0;

        transform:
            translate(
                var(--scrapX),
                var(--scrapY)
            )
            rotate(var(--rotation));

    }

}


/* =====================================================
   WHOOPSIE
===================================================== */

#whoopsie {

    position: absolute;

    z-index: 600;

    pointer-events: none;

}


#whoopsie.showWhoopsie {

    animation:
        whoopsieFinal 1.2s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes whoopsieFinal {

    0% {

        opacity: 0;

        transform:
            scale(.3)
            rotate(-8deg);

    }

    30% {

        opacity: 1;

        transform:
            scale(1.25)
            rotate(3deg);

    }

    50% {

        transform:
            scale(.95)
            rotate(-1deg);

    }

    70% {

        opacity: 1;

        transform:
            scale(1)
            rotate(0);

    }

    100% {

        opacity: 0;

        transform:
            scale(.85)
            translateY(-15px);

    }

}


/* =====================================================
   TRY AGAIN BUTTON
===================================================== */

#retryButton {

    cursor: pointer;

    border: 2px solid rgba(226, 128, 169, .45);

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

    -webkit-tap-highlight-color: transparent;

}


#retryButton.visible {

    display: block;

    animation:
        retryAppear .7s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes retryAppear {

    from {

        opacity: 0;

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

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


#retryButton:hover {

    transform: translateY(-3px);

    background: #fff0f6;

    box-shadow:
        0 14px 30px
        rgba(205, 91, 142, .16);

}


/* =====================================================
   NEW ENVELOPE ARRIVES
===================================================== */

#envelope.fresh-envelope {

    opacity: 1;

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

}


@keyframes freshEnvelopeDrop {

    0% {

        opacity: 0;

        transform:
            translateY(-70vh)
            rotate(-8deg)
            scale(.8);

    }

    65% {

        opacity: 1;

        transform:
            translateY(12px)
            rotate(2deg)
            scale(1.03);

    }

    82% {

        transform:
            translateY(-8px)
            rotate(-1deg)
            scale(.99);

    }

    100% {

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

    }

}


/* =====================================================
   CORRECT ENVELOPE OPENING
===================================================== */

#envelope.opening {

    animation: stopEnvelopeFloat .2s forwards;

}


@keyframes stopEnvelopeFloat {

    to {
        transform: translateY(0);
    }

}


#envelope.opening .env-top {

    animation:
        correctFlapOpen
        .9s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes correctFlapOpen {

    0% {

        transform:
            rotateX(0deg);

        z-index: 10;

    }

    50% {

        transform:
            rotateX(90deg);

    }

    100% {

        transform:
            rotateX(180deg);

        z-index: 0;

    }

}


#envelope.opening .seal {

    animation:
        gentleSealOpen
        .45s
        forwards;

}


@keyframes gentleSealOpen {

    to {

        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(.6);

    }

}


/* =====================================================
   SCENE 2 LEAVES
===================================================== */

#scene2.letter-transition {

    opacity: 0;

    transform:
        translateY(-30px)
        scale(.97);

    filter: blur(8px);

}


/* =====================================================
   SCENE 3 LETTER
===================================================== */

#scene3 {

    z-index: 8;

}


#scene3.active {

    z-index: 20;

}


#letterContainer {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    perspective: 1000px;

}


#letter {

    transform:
        translateY(130px)
        scale(.78);

    opacity: 0;

}


#letter.letter-arrive {

    animation:
        letterRise
        1.2s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes letterRise {

    0% {

        opacity: 0;

        transform:
            translateY(150px)
            scale(.75);

    }

    60% {

        opacity: 1;

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

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =====================================================
   PAPER UNFOLD
===================================================== */

.paper {

    transform-origin: top center;

}


#letter.letter-arrive .paper {

    animation:
        unfoldPaper
        1.1s .25s
        cubic-bezier(.22,1,.36,1)
        both;

}


@keyframes unfoldPaper {

    0% {

        transform:
            scaleY(.18)
            rotateX(-20deg);

        opacity: .4;

    }

    55% {

        transform:
            scaleY(1.04)
            rotateX(3deg);

        opacity: 1;

    }

    100% {

        transform:
            scaleY(1)
            rotateX(0);

        opacity: 1;

    }

}


/* =====================================================
   MOBILE ENVELOPE SIZE
===================================================== */

@media(max-width:600px) {

    #envelopeContainer {

        height: 300px;

    }


    #envelope {

        width: min(82vw, 320px);

        height: min(55vw, 220px);

    }


    #envelopeContainer::after {

        margin-top: 275px;

    }


    #whoopsie {

        font-size: 2.4rem;

    }



}/* =========================================
   MOBILE BACKGROUND / LAYER FIX
========================================= */

.scene {
    z-index: 10;
}

#scene1 {
    z-index: 10;
}

#scene2 {
    z-index: 9;
}

#scene2.active {
    z-index: 11;
}

#scene3 {
    z-index: 8;
}

#scene3.active {
    z-index: 20;
}

#doodles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

#sparkleContainer {
    z-index: 5;
}/* =====================================================
   BACKUP MESSAGE
===================================================== */

#backupMessage {
    max-width: 340px;

    text-align: center;

    color: #b96d8d;

    font-size: 1rem;

    line-height: 1.6;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

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

    pointer-events: none;
}


#backupMessage.visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}/* =====================================================
   SCROLLABLE LETTER
===================================================== */

#scene3 .content {
    height: 100%;
    padding: 20px 0;
}

#letterContainer {
    width: 100%;
    height: 100%;

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

    padding: 20px;
}

#letter {
    width: min(92vw, 520px);
    max-height: 88vh;
    max-height: 88dvh;
}

.paper {
    width: 100%;

    /*
       Keeps the letter inside the visible screen.
    */
    max-height: 82vh;
    max-height: 82dvh;

    /*
       Scroll inside the paper.
    */
    overflow-y: auto;
    overflow-x: hidden;

    padding: 38px 34px;

    /*
       Makes scrolling feel smoother on phones.
    */
    -webkit-overflow-scrolling: touch;

    /*
       Prevents the page itself from moving.
    */
    overscroll-behavior: contain;

    scrollbar-width: thin;

    scroll-behavior: smooth;
}


/* Letter title */

.paper h2 {
    font-size: clamp(1.25rem, 4vw, 1.7rem);

    line-height: 1.35;

    margin-bottom: 25px;

    color: #bd6288;

    text-align: center;
}


/* Letter body */

.paper p {
    font-size: 1rem;

    line-height: 1.9;

    color: #845d69;

    position: relative;

    z-index: 2;
}


/* Small fade at the bottom to hint that she can scroll */

.paper::after {
    content: "";

    position: sticky;

    display: block;

    bottom: -1px;

    height: 30px;

    margin-top: -30px;

    pointer-events: none;

    background: linear-gradient(
        transparent,
        rgba(255, 253, 251, .95)
    );
}


/* Phone adjustments */

@media(max-width:600px) {

    #letterContainer {
        padding: 12px;
    }

    #letter {
        width: 94vw;

        max-height: 90vh;
        max-height: 90dvh;
    }

    .paper {
        max-height: 84vh;
        max-height: 84dvh;

        padding: 30px 22px;

        border-radius: 14px;
    }

    .paper p {
        font-size: .95rem;

        line-height: 1.85;
    }

}/* =====================================================
   MINI GAMES
===================================================== */

.gameContent {
    position: relative;
    text-align: center;
    padding: 24px;
}

.gameTitle {
    font-size: clamp(2rem, 7vw, 3.5rem);
    color: #c85f8d;
    margin-bottom: 5px;
}

.gameSubtitle {
    color: #b87494;
    font-size: 1rem;
    opacity: .9;
}

.gameInstruction {
    margin-top: 10px;
    font-weight: 600;
    color: #a95f7e;
}


/* =====================================================
   CATCH MY HEART
===================================================== */

#heartScore {
    font-size: 1.3rem;
    font-weight: 700;

    color: #d6578e;

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

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

    padding: 10px 22px;

    border-radius: 999px;

    box-shadow:
        0 8px 25px rgba(190,90,130,.12);
}


#catchArea {
    position: fixed;
    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 30;
}


.catchHeart {
    position: fixed;

    width: 38px;
    height: 38px;

    background: #ed78a7;

    transform: rotate(45deg);

    cursor: pointer;

    pointer-events: auto;

    z-index: 40;

    animation:
        catchHeartFloat
        4.5s
        linear
        forwards;

    filter:
        drop-shadow(
            0 5px 6px
            rgba(175,70,115,.18)
        );

    -webkit-tap-highlight-color: transparent;
}


.catchHeart::before,
.catchHeart::after {
    content: "";

    position: absolute;

    width: 38px;
    height: 38px;

    background: inherit;

    border-radius: 50%;
}


.catchHeart::before {
    left: -19px;
}


.catchHeart::after {
    top: -19px;
}


@keyframes catchHeartFloat {

    0% {
        transform:
            translateY(0)
            rotate(45deg)
            scale(.8);

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(-110vh)
            rotate(80deg)
            scale(1.05);

        opacity: 0;
    }
}


.catchHeart.caught {
    animation:
        heartCaught
        .4s
        ease-out
        forwards;
}


@keyframes heartCaught {

    0% {
        transform:
            rotate(45deg)
            scale(1);
    }

    50% {
        transform:
            rotate(45deg)
            scale(1.7);
    }

    100% {
        transform:
            rotate(45deg)
            scale(0);

        opacity: 0;
    }
}


#caughtMessage {
    opacity: 0;

    transform:
        translateY(15px)
        scale(.95);

    font-weight: 700;

    color: #c65d8a;

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


#caughtMessage.visible {
    opacity: 1;

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


#catchContinueButton {
    display: none;

    padding: 15px 34px;

    border-radius: 999px;

    border: 2px solid #ed9fbe;

    background: #fff9fc;

    color: #c95e8c;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(195,78,127,.12);
}


#catchContinueButton.visible {
    display: block;

    animation:
        miniButtonAppear
        .7s
        ease
        forwards;
}


/* =====================================================
   CHOOSE ONE
===================================================== */

#choiceButtons {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    justify-content: center;

    margin-top: 20px;
}


.choiceButton {
    min-width: 110px;

    padding: 16px 24px;

    border-radius: 999px;

    border: 2px solid #efa5c2;

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

    color: #c35b87;

    font-weight: 700;

    font-size: 1rem;

    cursor: pointer;

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

    -webkit-tap-highlight-color: transparent;
}


.choiceButton:hover {
    transform: translateY(-4px);

    background: white;

    box-shadow:
        0 12px 25px
        rgba(190,80,125,.13);
}


.choiceButton.selected {
    background: #f5bfd4;

    transform: scale(1.05);

    color: #9f456d;
}


#choiceResult {
    min-height: 70px;

    max-width: 380px;

    padding: 10px;

    font-size: 1.05rem;

    line-height: 1.6;

    font-weight: 600;

    color: #ac5c7d;

    opacity: 0;

    transform: translateY(10px);

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


#choiceResult.visible {
    opacity: 1;
    transform: translateY(0);
}


#choiceContinueButton {
    display: none;

    padding: 15px 30px;

    border-radius: 999px;

    border: none;

    background: #fff8fb;

    color: #c45c88;

    font-weight: 700;

    cursor: pointer;

    border: 2px solid #efa5c2;
}


#choiceContinueButton.visible {
    display: block;

    animation:
        miniButtonAppear
        .7s
        ease;
}


@keyframes miniButtonAppear {

    from {
        opacity: 0;
        transform:
            translateY(15px)
            scale(.9);
    }

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

}


/* Phone adjustments */

@media(max-width:600px) {

    #choiceButtons {
        flex-direction: column;

        width: min(80vw, 280px);
    }

    .choiceButton {
        width: 100%;
    }

    .catchHeart {
        width: 30px;
        height: 30px;
    }

    .catchHeart::before,
    .catchHeart::after {
        width: 30px;
        height: 30px;
    }

    .catchHeart::before {
        left: -15px;
    }

    .catchHeart::after {
        top: -15px;
    }

}