:root{
  --paper:#FFFDF6;
  --cream:#FFF6E0;
  --butter:#FFF1C4;
  --yellow:#FFD95E;
  --gold:#F5B83D;
  --ink:#473F36;
  --soft:#8C8273;
  --green:#A7C4A0;
  --blue:#BFDDE8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Quicksand',sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}

#wash{
  position:fixed;inset:0;z-index:0;
  background:linear-gradient(to bottom,#FFFDF6 0%,#FFF6E0 100%);
  transition:background 1.4s ease;
}
#wash.morning{background:linear-gradient(to bottom,#FFFDF6 0%,#FFF1CE 100%)}
#wash.rain{background:linear-gradient(to bottom,#F7FBFC 0%,#E8F2F5 100%)}
#wash.peach{background:linear-gradient(to bottom,#FFFDF6 0%,#FFEEDA 100%)}
#wash.glow{background:linear-gradient(to bottom,#FFFDF6 0%,#FFE9AE 100%)}

/* smiling sun, gently floating */
#sunny{position:fixed;top:16px;left:16px;z-index:9;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* drifting clouds & birds */
.cloud,.bird{position:fixed;z-index:1;pointer-events:none}
.cloud{animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.bird{animation:fly linear infinite}
.bird svg{animation:flap 1.4s ease-in-out infinite}
@keyframes fly{from{transform:translateX(-15vw)}to{transform:translateX(115vw)}}
@keyframes flap{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* grass strip along the bottom */
#grass{position:fixed;left:0;right:0;bottom:0;height:16px;z-index:3;pointer-events:none}

#petals{position:fixed;inset:0;z-index:2;pointer-events:none}

/* ---------- odometer ---------- */
#odometer{
  position:fixed;top:14px;right:14px;z-index:10;
  font-family:'Pixelify Sans',monospace;font-size:15px;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:4px;
  padding:7px 13px;box-shadow:3px 3px 0 var(--yellow);
  opacity:0;transition:opacity .9s ease;
}
#odometer.show{opacity:1}
#odometer .lbl{font-size:10px;color:var(--soft);display:block;letter-spacing:.12em}

/* ---------- play & music buttons ---------- */
#playBtn,#musicBtn{
  position:fixed;bottom:24px;z-index:10;
  font-family:'Pixelify Sans',monospace;font-size:14px;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:4px;
  padding:9px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--gold);
}
#playBtn{right:16px}
#musicBtn{right:138px;display:none;padding:9px 13px}
#playBtn:active,#musicBtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gold)}

/* ---------- scenes ---------- */
main{position:relative;z-index:5}
.scene{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:14vh 8vw 16vh;
}
.eyebrow{
  font-family:'Pixelify Sans',monospace;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.scene h1{
  font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(3.6rem,15vw,7rem);line-height:.95;color:var(--ink);
}
.scene h2{
  font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(2.3rem,9.5vw,3.8rem);line-height:1.08;
}
.scene p{
  font-size:clamp(1.05rem,4.2vw,1.25rem);line-height:1.7;max-width:32ch;
  margin-top:14px;color:var(--soft);font-weight:500;
}
.art{margin:26px 0 6px;position:relative}
.art svg{display:block;margin:0 auto;image-rendering:pixelated}
.arttags{
  display:flex;justify-content:space-between;margin:2px auto 0;
  font-family:'Pixelify Sans',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--soft);text-transform:uppercase;
}

/* read-along highlight */
.w{border-radius:4px;padding:0 .07em;transition:background .22s ease}
.w.lit{background:var(--yellow)}
.w.read{background:var(--butter)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.15s}.d2{transition-delay:.4s}.d3{transition-delay:.7s}

#hero .for{
  font-family:'Caveat',cursive;font-weight:500;
  font-size:clamp(1.5rem,6vw,1.9rem);color:var(--soft);margin-bottom:14px;
}
#hero .hint{
  margin-top:6vh;font-family:'Pixelify Sans',monospace;font-size:12px;
  letter-spacing:.25em;color:var(--soft);animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.flightbox{position:relative;width:min(86vw,460px);height:96px;overflow:hidden;margin:26px auto 0}
.plane{position:absolute;top:22px;left:-25%;}
.scene.in-view .plane.fly-right{animation:flyR 4.5s ease-in-out forwards}
.scene.in-view .plane.fly-left{animation:flyL 4.5s ease-in-out forwards}
@keyframes flyR{from{left:-25%}to{left:104%}}
@keyframes flyL{from{left:104%;transform:scaleX(-1)}to{left:-25%;transform:scaleX(-1)}}

.busbox{position:relative;width:min(86vw,460px);height:96px;overflow:hidden;margin:24px auto 0}
.bus{position:absolute;left:6%;top:6px}
.scene.in-view .bus{animation:busgo 5s ease-in 1s forwards}
@keyframes busgo{to{left:112%}}
.busbox .road{position:absolute;left:0;right:0;bottom:16px;height:3px;background:var(--ink);opacity:.16;border-radius:2px}

.pathbox{position:relative;width:min(88vw,480px);height:140px;margin:30px auto 0}
.pathbox .ground{position:absolute;left:0;right:0;bottom:26px;height:3px;background:var(--ink);opacity:.14;border-radius:2px}
.pathbox .flowerrow{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 8px}
.pathbox .walker{position:absolute;bottom:29px;left:2%;transition:left 3.2s ease 1s}
.pathbox.go .walker{left:64%}
.pathbox.arrive .walker{left:80%;transition:left 4s ease .2s}
.pathbox .door{position:absolute;bottom:29px;right:2%}
.pathbox .tag{
  position:absolute;font-family:'Pixelify Sans',monospace;font-size:10px;
  letter-spacing:.14em;color:var(--soft);bottom:0;text-transform:uppercase;
}
.pathbox .tag.l{left:0}.pathbox .tag.r{right:0}

#final{padding-top:9vh;padding-bottom:10vh}
#final .sign{
  margin-top:30px;font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(2rem,8vw,2.6rem);color:var(--ink);
}

/* ---------- mithila touches ---------- */
.mai{font-family:'Kalam','Caveat',cursive;font-weight:400}
.mstrip{width:100%;height:14px;opacity:.85}
.mstrip.flip{transform:scaleY(-1)}
.fishpair{margin:2px 0 4px}
.askq-mai{
  font-size:clamp(1.15rem,5vw,1.45rem);color:var(--soft) !important;
  margin-top:-6px !important;line-height:1.3;
}

/* ---------- the ask box ---------- */
.askbox{
  position:relative;
  margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:rgba(255,255,255,.6);border:2px solid var(--ink);border-radius:10px;
  box-shadow:4px 4px 0 var(--yellow);padding:26px 24px 30px;width:min(88vw,420px);
}
.askq{
  font-family:'Caveat','Kalam',cursive;font-weight:600;
  font-size:clamp(1.9rem,8vw,2.5rem);color:var(--ink) !important;
  margin-top:0 !important;line-height:1.15;
}
.chances{display:none;gap:6px;align-items:center;justify-content:center}
.chances.on{display:flex}
.chances .ch{
  font-family:'Pixelify Sans',monospace;font-size:16px;color:var(--ink);
  background:var(--butter);border:2px solid var(--ink);border-radius:4px;
  padding:3px 7px;box-shadow:2px 2px 0 var(--yellow);
  transition:opacity .7s ease,filter .7s ease,transform .7s ease;
}
.chances .ch.spent{opacity:.18;filter:grayscale(1);transform:translateY(3px);box-shadow:none}
.chlbl{
  display:none;font-family:'Pixelify Sans',monospace;font-size:11px;
  letter-spacing:.18em;color:var(--soft);text-transform:uppercase;
}
.chlbl.on{display:block}
.askbtns{display:flex;gap:18px;align-items:center}
.askbtn{
  font-family:'Pixelify Sans',monospace;font-size:15px;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:6px;
  padding:11px 26px;cursor:pointer;box-shadow:3px 3px 0 var(--gold);
  transition:scale .35s ease;
}
#btnYes{background:var(--yellow)}
.askbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gold)}
.askmsg{
  font-family:'Caveat','Kalam',cursive;font-weight:500;
  font-size:clamp(1.4rem,6vw,1.8rem);color:var(--ink) !important;
  margin-top:0 !important;line-height:1.3;min-height:1.2em;max-width:26ch;
}
.askmsg.wob{animation:wob .5s ease}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.bouquet{display:flex;align-items:flex-end;gap:8px;justify-content:center;animation:bloom 1.2s ease}
@keyframes bloom{from{opacity:0;transform:scale(.6) translateY(14px)}to{opacity:1;transform:none}}

/* crying boy + loves-me-not daisy (while she clicks no) */
.cryrow{display:none;gap:20px;align-items:flex-end;justify-content:center;animation:bloom .8s ease}
.cryrow.on{display:flex}
#cryboy svg{animation:sob 1.7s ease-in-out infinite}
@keyframes sob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.fallpetal{
  position:absolute;width:9px;height:9px;background:#fff;
  border:2px solid #D9CDB2;border-radius:2px;pointer-events:none;z-index:3;
  animation:fallp 2.2s ease-in forwards;
}
@keyframes fallp{
  0%{opacity:1;transform:translate(0,0) rotate(0deg)}
  60%{opacity:.9;transform:translate(-12px,90px) rotate(80deg)}
  100%{opacity:0;transform:translate(14px,170px) rotate(170deg)}
}
@media (prefers-reduced-motion:reduce){
  .fallpetal{animation:none;display:none}
  #cryboy svg{animation:none !important}
}

/* ---------- when & where (after yes) ---------- */
.planbox{display:none;flex-direction:column;align-items:center;gap:12px;width:100%;animation:bloom 1s ease}
.planbox.on{display:flex}
.planq{
  font-family:'Caveat','Kalam',cursive;font-weight:600;
  font-size:clamp(1.6rem,7vw,2.1rem);color:var(--ink) !important;
  margin-top:6px !important;
}
#planInput{
  font-family:'Quicksand',sans-serif;font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:6px;
  padding:11px 14px;width:100%;max-width:320px;box-shadow:2px 2px 0 var(--yellow);
  outline:none;text-align:center;
}
#planInput::placeholder{color:var(--soft);opacity:.7}
.planbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.planbtns .askbtn{font-size:13px;padding:10px 16px}

@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .cloud,.bird,#sunny,#hero .hint{animation:none !important}
  .bird svg{animation:none !important}
  .plane,.bus{animation:none !important}
}