/* ========= BIRTHDAY LETTER — light & warm ========= */
:root{
  /* seal = orange wax, matches the real letters. Never themed. */
  --seal:#E8701A;
  --seal-dark:#B4500C;
  --seal-deep:#7d3606;

  /* birthday palette — green led, warm & bright */
  --green:#6FAF8B;
  --green-deep:#4E8C6A;
  --green-soft:#D9ECE0;
  --gold:#F0B94B;
  --gold-soft:#FBEBC8;
  --blush:#F3A3A6;
  --blush-soft:#FBE0E1;
  --sky:#A8CBE0;

  --paper:#FFFDF8;
  --ink:#2C3B32;
  --ink-soft:#6B7F73;
  --line:rgba(78,140,106,.18);
  --fg:#2C3B32;
  --dim:#7E9388;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  background:
    radial-gradient(760px 560px at 12% 6%,  rgba(217,236,224,.95) 0%, transparent 60%),
    radial-gradient(700px 520px at 90% 10%, rgba(251,235,200,.95) 0%, transparent 62%),
    radial-gradient(720px 560px at 82% 94%, rgba(251,224,225,.92) 0%, transparent 62%),
    radial-gradient(640px 520px at 10% 92%, rgba(168,203,224,.55) 0%, transparent 60%),
    linear-gradient(165deg,#FEFDF9 0%,#F6FAF6 55%,#FFF8F0 100%);
  background-attachment:fixed;
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.hidden{display:none !important;}

/* floating confetti dots — gentle, not noisy */
body::before,body::after{
  content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0;
}
body::before{
  width:14px;height:14px;background:var(--blush);opacity:.5;
  top:16%;left:9%;animation:float1 9s ease-in-out infinite;
  box-shadow:120px 60px 0 -3px var(--gold), 240px -20px 0 -5px var(--green),
             60px 220px 0 -4px var(--sky),  300px 180px 0 -6px var(--blush);
}
body::after{
  width:11px;height:11px;background:var(--green);opacity:.45;
  bottom:18%;right:11%;animation:float2 11s ease-in-out infinite;
  box-shadow:-130px -70px 0 -2px var(--gold), -250px 40px 0 -4px var(--blush),
             -70px -200px 0 -3px var(--sky);
}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}

/* ---- acts ---- */
.act{
  position:fixed;inset:0;z-index:2;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;padding:24px;
}
.act.active{display:flex;animation:fade .45s ease both;}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- counters ---- */
.counters{
  position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;
  z-index:60;text-align:right;line-height:1.55;pointer-events:none;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;
  padding:8px 12px;
  box-shadow:0 4px 16px rgba(78,140,106,.10);
}
.c-label{color:var(--ink-soft);font-size:11px;}
.c-val{color:var(--ink);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;
  display:inline-block;transition:transform .2s ease,color .2s ease;}
.c-val.love{color:var(--green-deep);font-size:13px;}
.counters.fading{transition:opacity 1.2s ease;opacity:0;}

/* ---- narrator ---- */
.narrator{
  position:fixed;left:50%;transform:translate(-50%,8px);
  bottom:calc(34px + env(safe-area-inset-bottom));
  width:max-content;max-width:min(86vw,440px);
  text-align:center;font-size:16px;font-weight:500;color:var(--ink);
  padding:12px 20px;z-index:70;pointer-events:none;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 26px rgba(78,140,106,.16);
  opacity:0;
  transition:opacity .3s ease,transform .3s ease;
}
.narrator.show{opacity:1;transform:translate(-50%,0);}

/* ================= COOKIE GATE ================= */
.gate{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(44,59,50,.22);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:16px;
}
.gate.out{animation:gateOut .45s ease forwards;}
@keyframes gateOut{to{opacity:0;transform:translateY(14px);}}
.cookie{
  width:100%;max-width:460px;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 18px 50px rgba(78,140,106,.22);
  animation:up .45s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie-title{font-size:18px;font-weight:700;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;}
.cookie-body{font-size:14px;color:var(--ink-soft);margin:0 0 18px;line-height:1.55;}

.pref-rows{margin-bottom:18px;}
.pref-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 2px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink);cursor:pointer;
  border-radius:8px;
}
.pref-row:last-child{border-bottom:1px solid var(--line);}
.pref-row:active{background:var(--green-soft);}
.pref-row.locked{color:var(--ink-soft);}
.pref-row-label{flex:1;}

/* ---- toggle switches: these resist being turned off ---- */
.toggle{
  position:relative;flex-shrink:0;
  width:50px;height:30px;border-radius:16px;
  background:var(--green);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12);
  touch-action:none;cursor:pointer;
  transition:background .22s ease;
}
.toggle.locked{background:#CFDDD4;}
.toggle-thumb{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.22);
  transform:translateX(20px);           /* resting = ON (right) */
  transition:transform .26s cubic-bezier(.3,1.4,.4,1),background .2s ease;
}
.toggle.dragging .toggle-thumb{transition:none;}
.toggle.locked .toggle-thumb{background:#F3F6F2;}
.toggle.resisting .toggle-thumb{background:#FFE9E3;}
.toggle.snap-back .toggle-thumb{animation:snapBack .38s cubic-bezier(.3,1.5,.4,1);}
@keyframes snapBack{
  0%{transform:translateX(var(--drag-x,0px));}
  60%{transform:translateX(26px);}
  100%{transform:translateX(20px);}
}
.toggle.shake{animation:tshake .3s ease;}
@keyframes tshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ================= BUTTONS ================= */
.btn{
  width:100%;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);
  color:#fff;border:none;border-radius:15px;
  padding:16px 24px;font-size:16px;font-weight:700;
  font-family:inherit;cursor:pointer;
  min-height:54px;
  box-shadow:0 8px 22px rgba(78,140,106,.28);
  transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
}
.btn:active{transform:scale(.985);box-shadow:0 4px 14px rgba(78,140,106,.24);}

/* ================= ACT I ================= */
.envelope{position:relative;width:min(86vw,350px);display:flex;flex-direction:column;align-items:center;margin-top:30px;}
.env-body{
  width:100%;aspect-ratio:1.5/1;
  background:linear-gradient(170deg,#FFFFFF 0%,#FFF7E9 100%);
  border-radius:10px;
  box-shadow:0 18px 44px rgba(78,140,106,.22),0 2px 0 rgba(255,255,255,.9) inset;
  position:relative;
  z-index:1;
  border:1px solid rgba(240,185,75,.35);
}
.env-to{
  position:absolute;bottom:13%;left:0;right:0;z-index:3;
  font-size:16px;color:var(--ink-soft);margin:0;letter-spacing:.01em;text-align:center;
}
.env-flap{
  position:absolute;top:0;left:0;width:100%;height:52%;
  background:linear-gradient(185deg,#FFFBF2,#FDF2DF);
  clip-path:polygon(0 0,100% 0,50% 100%);
  z-index:2;transform-origin:top center;
  transition:transform 1s cubic-bezier(.6,-0.15,.3,1.25);
}
.envelope.open .env-flap{transform:rotateX(178deg);}

/* seal */
.seal-wrap{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:5;width:104px;height:104px;}
.seal{
  position:absolute;inset:0;margin:auto;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#F28A3C 0%,var(--seal) 38%,var(--seal-dark) 76%,var(--seal-deep) 100%);
  box-shadow:0 8px 20px rgba(180,80,12,.38),inset 0 -3px 8px rgba(0,0,0,.26);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  clip-path:polygon(50% 0%,62% 4%,74% 3%,83% 11%,93% 18%,96% 30%,100% 42%,97% 55%,99% 67%,90% 76%,84% 86%,72% 92%,60% 97%,48% 100%,36% 96%,25% 92%,16% 85%,9% 76%,3% 66%,1% 54%,3% 41%,2% 29%,10% 19%,18% 11%,28% 5%,39% 3%);
  transition:transform .1s ease;
}
.seal:active{transform:scale(.97);}
.seal.shake{animation:sshake .3s ease;}
@keyframes sshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.seal.wobble{animation:wob .4s ease;}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

.seal-initials{
  font-size:25px;font-weight:700;color:rgba(70,26,2,.52);
  transform:rotate(-22deg);pointer-events:none;letter-spacing:.02em;
}

.crack{position:absolute;background:rgba(40,14,2,.72);opacity:0;pointer-events:none;}
.crack.show{opacity:1;}
.c1{top:14%;left:49%;width:2px;height:26%;transform:rotate(12deg);}
.c2{top:40%;left:30%;width:24%;height:2px;transform:rotate(-16deg);}
.c3{top:52%;left:52%;width:20%;height:2px;transform:rotate(22deg);}
.c4{top:22%;left:68%;width:2px;height:22%;transform:rotate(-8deg);}
.c5{top:62%;left:34%;width:2px;height:24%;transform:rotate(16deg);}

.heat-ring{position:absolute;inset:-7px;opacity:0;transition:opacity .25s;pointer-events:none;}
.heat-ring.on{opacity:1;}
.heat-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.hr-bg{fill:none;stroke:rgba(78,140,106,.16);stroke-width:3;}
.hr-fill{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset .08s linear;
  filter:drop-shadow(0 0 5px rgba(240,185,75,.75));}

.seal.melting{animation:melt 1.5s ease-in forwards;}
@keyframes melt{
  0%{opacity:1;}
  40%{filter:brightness(1.2);}
  100%{transform:scale(1.08) translateY(10px);opacity:0;filter:blur(3px);}
}

.seal-prompt{
  margin-top:26px;font-size:14px;color:var(--ink-soft);font-weight:500;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ================= PANELS ================= */
.panel{
  width:min(88vw,400px);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:22px;padding:28px 22px;
  text-align:center;
  box-shadow:0 18px 46px rgba(78,140,106,.18);
}
.panel-title{font-size:17px;color:var(--ink);margin:0 0 20px;line-height:1.45;font-weight:600;}

.dodge-btn{position:relative;transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .2s;}

/* ---- age: form field ---- */
.field-wrap{text-align:left;position:relative;}
.field-label{
  display:block;font-size:12px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px 2px;
}
.select-field{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;min-height:54px;
  background:#fff;border:1.5px solid #CFDDD4;border-radius:14px;
  font-family:inherit;font-size:16px;color:var(--ink);text-align:left;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(78,140,106,.06);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.select-field:active{border-color:var(--green);}
.select-field.open{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(111,175,139,.16);
}
.select-value{flex:1;font-variant-numeric:tabular-nums;}
.select-value.placeholder{color:#9AAEA2;}
.select-chevron{
  width:10px;height:10px;flex-shrink:0;margin-right:2px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .22s ease;
}
.select-field.open .select-chevron{transform:rotate(225deg) translateY(-2px);}

.age-list-wrap{
  margin-top:8px;display:flex;gap:8px;align-items:stretch;
  animation:listOpen .22s ease both;
}
@keyframes listOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.age-list{
  flex:1;min-width:0;
  max-height:228px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1.5px solid var(--green);border-radius:14px;background:#fff;
  box-shadow:0 12px 30px rgba(78,140,106,.18);
  scrollbar-width:none;
}
.age-list::-webkit-scrollbar{display:none;}
.age-opt{
  padding:14px 18px;font-size:16px;color:var(--ink);cursor:pointer;
  border-bottom:1px solid rgba(78,140,106,.10);text-align:left;
  font-variant-numeric:tabular-nums;
}
.age-opt:last-child{border-bottom:none;}
.age-opt:active{background:var(--green-soft);}
.age-opt.range{color:#9A6B12;font-weight:700;background:var(--gold-soft);}

/* a real, visible scrollbar track so the list unmistakably reads as scrollable */
.age-scrollbar{
  width:7px;border-radius:4px;background:var(--green-soft);
  position:relative;flex-shrink:0;overflow:hidden;
}
.age-scrollbar-thumb{
  position:absolute;left:0;right:0;top:0;
  width:7px;border-radius:4px;background:var(--green);
  transition:top .05s linear;
}
.age-scrollbar-thumb.nudging{animation:scrollNudge 1.1s ease-in-out 2;}
@keyframes scrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ================= ACT IV ================= */
.final-seal-stage{display:flex;align-items:center;justify-content:center;}
.seal.final{position:relative;width:104px;height:104px;cursor:default;}
.seal.final.breaking{animation:finalBreak 1.4s cubic-bezier(.5,0,.4,1) forwards;}
@keyframes finalBreak{
  0%{transform:scale(1);opacity:1;}
  30%{transform:scale(1.06);}
  100%{transform:scale(1.4) rotate(-6deg);opacity:0;filter:blur(5px);}
}

.paper{
  width:min(90vw,540px);max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(175deg,#FFFFFF 0%,#FFFCF4 100%);
  color:var(--ink);border-radius:18px;padding:40px 30px 44px;
  box-shadow:0 22px 64px rgba(78,140,106,.24);
  border-top:4px solid var(--green);
  animation:unfold 1.1s cubic-bezier(.3,.9,.3,1) both;
  -webkit-user-select:text;user-select:text;
}
@keyframes unfold{
  0%{transform:scaleY(.04) translateY(24px);opacity:0;}
  50%{opacity:1;}
  100%{transform:scaleY(1) translateY(0);opacity:1;}
}

/* content reveals as she scrolls to it — text and photos share one timeline */
.letter-scroll{display:flex;flex-direction:column;gap:22px;}
.l-text{
  font-size:17px;line-height:1.75;margin:0;color:var(--ink);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s ease;
}
.l-text.in{opacity:1;transform:translateY(0);}
.l-photo{margin:4px 0;opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity .8s ease,transform .8s ease;}
.l-photo.in{opacity:1;transform:none;}
.l-photo img{width:100%;border-radius:12px;display:block;
  box-shadow:0 10px 26px rgba(78,140,106,.18);}
.ph-placeholder{
  width:100%;aspect-ratio:4/3;border-radius:12px;
  background:var(--green-soft);border:1px dashed #AFC9B9;
  display:flex;align-items:center;justify-content:center;
  color:#7E9388;font-size:12px;text-align:center;padding:10px;
}
.l-photo figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px;text-align:center;}
.signoff{font-size:17px;color:var(--ink);margin:10px 0 0;text-align:right;font-weight:600;
  opacity:0;transition:opacity 1.4s ease;}
.signoff.in{opacity:1;}

@media (max-height:620px){
  .paper{padding:28px 22px 32px;}
  .envelope{width:min(76vw,300px);}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none;}
}


/* ---- the hug: heartbeat while she holds the seal ---- */
.seal-wrap::before{
  content:'';position:absolute;inset:-26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,170,90,.55) 0%,rgba(255,140,60,.22) 45%,rgba(255,140,60,0) 70%);
  opacity:0;transform:scale(.7);transition:opacity .4s ease,transform .4s ease;
}
.seal-wrap.hugging::before{opacity:1;transform:scale(1);animation:hugGlow .85s ease-in-out infinite;}
.seal.hugging{animation:heartbeat .85s ease-in-out infinite;}
@keyframes heartbeat{
  0%{transform:scale(1);filter:brightness(1);}
  12%{transform:scale(1.07);filter:brightness(1.12);}
  24%{transform:scale(1.01);}
  36%{transform:scale(1.05);filter:brightness(1.08);}
  60%,100%{transform:scale(1);filter:brightness(1);}
}
@keyframes hugGlow{0%,60%,100%{opacity:.7}12%,36%{opacity:1}}

/* ---- dodge: the button leaps around the screen ---- */
.dodge-btn.loose{
  transition:left .42s cubic-bezier(.3,1.35,.5,1),top .42s cubic-bezier(.3,1.35,.5,1),transform .42s ease;
}