/* PART 1: Foundation, variables, layout, background */
:root{
 --pink:#ffd6e7;--cream:#fffaf4;--peach:#ffe7d6;--lav:#efe3ff;--brown:#8a6a58;
 --shadow:0 10px 30px rgba(0,0,0,.12);--radius:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:Verdana,sans-serif}
body{
 background:linear-gradient(180deg,var(--cream),#fff,var(--pink));
 color:#6d4d5b;
}
#app{width:100vw;height:100vh;display:grid;place-items:center;position:relative}
.screen{
 position:absolute;inset:0;
 display:flex;flex-direction:column;
 justify-content:center;align-items:center;
 gap:1rem;
 opacity:0;pointer-events:none;
 transition:.6s ease;
}
.screen.active{opacity:1;pointer-events:auto}
button,input{
 border:none;border-radius:999px;padding:.9rem 1.5rem;
 box-shadow:var(--shadow);font-size:1rem;
}
button{
 background:var(--pink);cursor:pointer;
 transition:.25s transform,.25s background;
}
button:hover{transform:translateY(-3px) scale(1.04)}
input{min-width:280px;text-align:center}
#background{position:fixed;inset:0;overflow:hidden;z-index:-1}
.hearts::before,.sparkles::before,.clouds::before{
 content:"";position:absolute;inset:-20%;
 background-repeat:repeat;
 animation:float 25s linear infinite;
 opacity:.4;
}
.hearts::before{
 background-image:radial-gradient(circle at 30% 30%,#ff8eb8 0 6px,transparent 7px);
}
.sparkles::before{
 animation-duration:18s;
 background-image:radial-gradient(circle,#fff 0 2px,transparent 3px);
}
.clouds::before{
 animation-duration:40s;
 background-image:radial-gradient(circle at 50% 50%,#fff 0 28px,transparent 29px);
 opacity:.25;
}
@keyframes float{
 from{transform:translateY(0)}
 to{transform:translateY(-120px)}
}

/* ===========================
   PART 2 - Cute CSS Bear
   Append this below Part 1
=========================== */

.bear{
    position:relative;
    width:220px;
    height:260px;
    animation:bounce 2.5s ease-in-out infinite;
}

.bear .head{
    position:absolute;
    width:160px;
    height:150px;
    left:30px;
    top:0;
    background:#b88a72;
    border-radius:50%;
    box-shadow:var(--shadow);
}

.bear .ear{
    position:absolute;
    width:55px;
    height:55px;
    background:#b88a72;
    border-radius:50%;
    top:-15px;
}

.bear .ear::after{
    content:"";
    position:absolute;
    inset:12px;
    background:#ffd7e5;
    border-radius:50%;
}

.bear .ear.left{left:18px;}
.bear .ear.right{right:18px;}

.eye{
    position:absolute;
    width:12px;
    height:18px;
    background:#222;
    border-radius:999px;
    top:58px;
    animation:blink 4s infinite;
}

.eye.left{left:48px;}
.eye.right{right:48px;}

.nose{
    position:absolute;
    width:28px;
    height:22px;
    background:#5f4539;
    left:50%;
    top:72px;
    transform:translateX(-50%);
    border-radius:50%;
}

.nose::after{
    content:"";
    position:absolute;
    width:30px;
    height:16px;
    left:50%;
    top:16px;
    transform:translateX(-50%);
    border-bottom:3px solid #5f4539;
    border-radius:0 0 30px 30px;
}

.blush{
    position:absolute;
    width:26px;
    height:16px;
    background:#ffb8cf;
    opacity:.75;
    border-radius:50%;
    top:84px;
}

.blush.left{left:22px;}
.blush.right{right:22px;}

.body{
    position:absolute;
    width:150px;
    height:115px;
    left:35px;
    bottom:0;
    background:#b88a72;
    border-radius:70px;
    box-shadow:var(--shadow);
}

.body::before,
.body::after{
    content:"";
    position:absolute;
    width:42px;
    height:42px;
    background:#b88a72;
    border-radius:50%;
    bottom:-8px;
}

.body::before{left:18px;}
.body::after{right:18px;}

@keyframes bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

@keyframes blink{
    0%,46%,100%{
        transform:scaleY(1);
    }
    48%,50%{
        transform:scaleY(.08);
    }
}

/* ===========================
   PART 3 - UI & SCREEN STYLING
=========================== */

h1{
    font-size:3rem;
    color:#ff6fa6;
    text-shadow:2px 2px 0 rgba(255,255,255,.7);
}

h2{
    font-size:2.2rem;
    color:#b35b84;
}

h3{
    font-size:2rem;
    color:#ff6fa6;
}

p{
    font-size:1.05rem;
    line-height:1.6;
    max-width:700px;
    text-align:center;
}

#startBtn,
#submitName,
#yesBtn,
#noBtn,
#nextPage,
#finishBtn{
    min-width:220px;
    padding:14px 28px;
    font-size:1.1rem;
    font-weight:bold;
    background:linear-gradient(135deg,#ffd7ea,#ffc4de);
    color:#7a4c5d;
    border:3px solid rgba(255,255,255,.8);
}

#startBtn:hover,
#submitName:hover,
#yesBtn:hover,
#nextPage:hover,
#finishBtn:hover{
    transform:translateY(-4px) scale(1.05);
}

#noBtn{
    position:absolute;
    transition:
        left .35s ease,
        top .35s ease,
        transform .25s ease;
}

#nameInput{
    font-size:1.1rem;
    padding:14px;
    background:#fff;
    color:#555;
    border:3px solid #ffd6e7;
    outline:none;
}

#nameInput:focus{
    border-color:#ff9fc8;
    box-shadow:0 0 15px rgba(255,182,210,.45);
}

#nameError{
    color:#d95b7c;
    font-weight:bold;
    min-height:24px;
}

.choices{
    display:grid;
    grid-template-columns:repeat(2,220px);
    gap:18px;
    margin-top:20px;
}

.food{
    background:linear-gradient(180deg,#fff,#ffe6ef);
    border:3px solid #ffd3e5;
}

.food:hover{
    transform:scale(1.08);
}

#screen4{
    position:relative;
}

#screen5,
#screen6,
#screen7{
    padding:30px;
}

.fade-out{
    opacity:0;
    transform:scale(.96);
    transition:.6s;
}

.fade-in{
    opacity:1;
    transform:scale(1);
    transition:.6s;
}

.hidden{
    display:none !important;
}

/* PART 4 - Envelope & Letter */

#envelope{
position:relative;
width:340px;
height:220px;
cursor:pointer;
transition:.8s;
}
#envelope .back{
position:absolute;inset:0;
background:#f5bfd2;
border-radius:12px;
box-shadow:var(--shadow);
}
#envelope .front{
position:absolute;
left:0;right:0;bottom:0;
height:120px;
background:#ffcfe0;
clip-path:polygon(0 0,50% 70%,100% 0,100% 100%,0 100%);
z-index:3;
}
#envelope .flap{
position:absolute;
left:0;right:0;top:0;
height:120px;
background:#ffd9e8;
transform-origin:top;
clip-path:polygon(0 0,100% 0,50% 100%);
transition:transform .8s;
z-index:4;
}
#envelope .paper{
position:absolute;
left:20px;
top:18px;
width:300px;
height:180px;
background:
repeating-linear-gradient(#fff,#fff 27px,#dfe8ff 28px);
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.12);
z-index:2;
transition:all 1s ease;
overflow:hidden;
padding:30px;
}

#envelope.open .flap{
transform:rotateX(180deg);
}
#envelope.open .paper{
transform:translateY(-170px);
}

#envelope.expand{
opacity:0;
pointer-events:none;
}

#letterPaper{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:700px;
height:500px;
padding:40px;
background:
repeating-linear-gradient(#fff,#fff 31px,#dce8ff 32px);
border-radius:18px;
box-shadow:var(--shadow);
border:2px solid #f4d2df;
transform:scale(.8);
opacity:0;
transition:1s;
}

#letterPaper.show{
opacity:1;
transform:scale(1);
}

#typedText{
width:100%;
height:330px;
white-space:pre-wrap;
font-family:"Comic Sans MS",cursive;
font-size:1.15rem;
line-height:2rem;
color:#65484f;
overflow:hidden;
}

.page-turn{
animation:pageTurn .7s ease;
}

@keyframes pageTurn{
0%{transform:rotateY(0)}
50%{transform:rotateY(90deg);opacity:.2}
100%{transform:rotateY(0);opacity:1}
}

/* ===========================
   PART 5 - Final Screen, Popup,
   Floating Hearts & Responsive
=========================== */

/* Final screen glow */
#screen7{
    background:radial-gradient(circle at top,#fff8fc 0%,#fff3f8 45%,#ffe6f0 100%);
}

#screen7::before,
#screen7::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.35);
    border-radius:50%;
    filter:blur(18px);
    z-index:-1;
    animation:floatGlow 8s ease-in-out infinite;
}

#screen7::before{
    top:12%;
    left:10%;
}

#screen7::after{
    right:10%;
    bottom:12%;
    animation-delay:4s;
}

@keyframes floatGlow{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-12px) scale(1.08);}
}

/* Floating heart particles */
.floating-heart{
    position:fixed;
    width:14px;
    height:14px;
    background:#ff8fb8;
    transform:rotate(45deg);
    pointer-events:none;
    z-index:30;
    animation:heartRise 4.8s linear forwards;
}

.floating-heart::before,
.floating-heart::after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    background:#ff8fb8;
    border-radius:50%;
}

.floating-heart::before{
    left:-7px;
}

.floating-heart::after{
    top:-7px;
}

@keyframes heartRise{
    0%{
        opacity:0;
        transform:translateY(0) rotate(45deg) scale(.7);
    }
    15%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translateY(-170px) rotate(45deg) scale(1.2);
    }
}

/* Cute popup */
#cutePopup{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,244,248,.72);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:.35s ease;
    z-index:100;
}

#cutePopup.show{
    opacity:1;
    pointer-events:auto;
}

.popup-card{
    width:min(90vw,420px);
    background:#fffaf6;
    border:3px solid #ffd6e7;
    border-radius:28px;
    padding:28px 24px;
    text-align:center;
    box-shadow:var(--shadow);
    animation:popupBounce .45s ease;
}

.popup-card h3{
    margin-bottom:10px;
    color:#ff6fa6;
}

.popup-card p{
    margin-bottom:18px;
    color:#7a5a66;
}

.popup-card button{
    min-width:170px;
}

@keyframes popupBounce{
    0%{
        transform:scale(.82) translateY(18px);
        opacity:0;
    }
    70%{
        transform:scale(1.03) translateY(-4px);
        opacity:1;
    }
    100%{
        transform:scale(1) translateY(0);
    }
}

/* Sparkle helper */
.sparkle{
    position:fixed;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 12px rgba(255,255,255,.9);
    pointer-events:none;
    animation:sparklePop 1.2s ease forwards;
    z-index:40;
}

@keyframes sparklePop{
    0%{
        opacity:0;
        transform:scale(.3);
    }
    40%{
        opacity:1;
        transform:scale(1);
    }
    100%{
        opacity:0;
        transform:scale(.2) translateY(-18px);
    }
}

/* Responsive scaling */
@media (max-width:900px){
    h1{font-size:2.4rem;}
    h2{font-size:1.8rem;}
    .bear{
        transform:scale(.88);
    }
    #letterPaper{
        width:90vw;
        height:72vh;
        padding:28px;
    }
    #typedText{
        height:48vh;
        font-size:1rem;
        line-height:1.8rem;
    }
    .choices{
        grid-template-columns:1fr;
        width:min(90vw,320px);
    }
}

@media (max-width:560px){
    h1{font-size:2rem;}
    p{font-size:.96rem;}
    button,input{
        width:min(84vw,300px);
    }
    .bear{
        transform:scale(.72);
    }
    #envelope{
        transform:scale(.9);
    }
    #letterPaper{
        width:92vw;
        height:74vh;
    }
    #typedText{
        font-size:.95rem;
        line-height:1.65rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}
#videoLink{

    margin-top:25px;

    opacity:0;

    transform:translateY(20px);

    transition:.6s;

}

#videoLink.show{

    opacity:1;

    transform:translateY(0);

}

#watchVideoBtn{

    display:inline-block;

    margin-top:15px;

    padding:14px 28px;

    text-decoration:none;

    color:#6b4757;

    background:linear-gradient(
        135deg,
        #ffd6e7,
        #ffc4de
    );

    border-radius:999px;

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

    transition:.25s;

}

#watchVideoBtn:hover{

    transform:scale(1.08);

}
/* ===========================
   Floating Hearts Background
=========================== */

.heart-container{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.heart{
    position:absolute;
    bottom:-40px;
    width:18px;
    height:18px;
    background:#ffb6cf;
    transform:rotate(45deg);
    opacity:.75;
    animation:floatHeart linear forwards;
}
.heart::before,
.heart::after{
    background:inherit;
}

.heart::before,
.heart::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    background:#ffb6cf;
    border-radius:50%;
}

.heart::before{
    top:-9px;
    left:0;
}

.heart::after{
    left:-9px;
    top:0;
}

@keyframes floatHeart{

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

    10%{
        opacity:.8;
    }

    100%{
        transform:
            translateY(-120vh)
            rotate(405deg)
            scale(1.2);

        opacity:0;
    }

}.