:root {
  --ink:#30282a;
  --paper:#f8eee8;
  --rose:#dc8e90;
  --rust:#b85f48;
  --green:#70847a;
  --violet:#857293;
  --pad-x:clamp(18px,5.5vw,100px);
  --pad-y:clamp(24px,6vw,72px);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

.age-gag { position:relative; z-index:2; margin:18px 0 10px; max-width:100%; opacity:0; transform:translateY(22px); }
.age-gag.playing { animation:gag-in .85s cubic-bezier(.16,.8,.2,1) forwards; }
.age-gag.nudge .gag-age { animation:gag-wiggle .55s ease-in-out; }
.age-gag.milestone .gag-number { filter:saturate(1.2); }
.age-gag.landed .gag-age { animation:gag-fade-out .55s .15s ease forwards; }
.age-gag.landed .gag-number {
  background:linear-gradient(135deg,#8a3f2e 0%,#c9784a 42%,#e0b25a 78%,#b85f48 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 10px 24px #b85f4833);
}
.age-gag.finale .gag-age { opacity:0; pointer-events:none; visibility:hidden; position:absolute; }
.age-gag.finale .gag-finale {
  display:block;
  animation:gag-finale-in .75s cubic-bezier(.16,.8,.2,1) both;
}
.gag-finale[hidden] { display:none !important; }
.age-gag.finale .gag-aside { opacity:0; height:0; margin:0; overflow:hidden; }
.gag-label {
  margin:0 0 10px;
  font-family:"DM Serif Display",Georgia,serif;
  font-style:italic;
  font-size:clamp(28px,7.5vw,44px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1;
  text-transform:none;
  color:#4a3532;
}
.gag-label::after {
  content:"";
  display:block;
  width:min(120px,30vw);
  height:2px;
  margin-top:12px;
  background:linear-gradient(90deg,#d4a43e,#b85f48,#d4a43e00);
}
.gag-age {
  margin:0;
  font-family:"DM Serif Display",Georgia,serif;
  font-size:clamp(84px,26vw,148px);
  line-height:.84;
  letter-spacing:-.05em;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
}
.gag-number {
  display:inline-block;
  min-width:.95em;
  color:var(--ink);
  transform-origin:center bottom;
  transition:filter .3s ease;
}
.gag-number.tick { animation:age-tick .18s cubic-bezier(.2,.9,.3,1); }
.gag-number.final-tick { animation:age-final .9s cubic-bezier(.18,1.25,.28,1); }
.gag-suffix { font-size:.4em; letter-spacing:-.03em; padding-bottom:.1em; color:#4a3532; }
.gag-aside {
  margin:18px 0 0;
  font-size:clamp(15px,4vw,18px);
  line-height:1.45;
  max-width:340px;
  min-height:1.45em;
  color:#6a5048;
  font-style:italic;
  transition:opacity .35s ease, height .35s ease, margin .35s ease;
}
.gag-finale {
  display:none;
  margin:6px 0 0;
  max-width:min(20ch,92vw);
  font-family:"DM Serif Display",Georgia,serif;
  font-size:clamp(42px,12vw,72px);
  line-height:.95;
  letter-spacing:-.04em;
  color:transparent;
  background:linear-gradient(135deg,#8a3f2e 0%,#c9784a 40%,#e0b25a 78%,#b85f48 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 10px 24px #b85f4833);
}
.hero-after { opacity:0; transform:translateY(16px); pointer-events:none; margin-top:14px; position:relative; z-index:2; }
.hero-after.visible { opacity:1; transform:none; pointer-events:auto; animation:hero-in .75s cubic-bezier(.16,.8,.2,1) both; }
.hero.gag-done .scroll-hint { animation:pulse 2s .35s infinite; opacity:1; }
.hero-kicker {
  position:relative;
  z-index:2;
  margin:0 0 8px;
  max-width:18ch;
  font-family:"DM Serif Display",Georgia,serif;
  font-size:clamp(22px,6.2vw,34px);
  line-height:1.15;
  letter-spacing:-.03em;
  color:#3a2c2a;
  opacity:0;
  animation:gag-in .8s .15s cubic-bezier(.16,.8,.2,1) forwards;
}
.hero-kicker em {
  color:var(--rust);
  font-style:italic;
}
.kicker-ornament {
  display:inline-block;
  width:28px;
  height:1px;
  margin:0 10px 4px;
  vertical-align:middle;
  background:linear-gradient(90deg,transparent,#d4a43e,transparent);
}
.hero-tap-hint {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:calc(18px + var(--safe-bottom));
  transform:translateX(-50%);
  border:0;
  background:transparent;
  color:#8a6a5c;
  font:600 10px/1 Manrope,system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.55;
  cursor:pointer;
  transition:opacity .3s ease;
}
.hero-tap-hint.is-hidden { opacity:0; pointer-events:none; }
.hero.gag-done .hero-tap-hint:not(.is-hidden) {
  opacity:.75;
  animation:tap-hint-pulse 2.4s ease-in-out infinite;
}
.hero-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.veil {
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:.55;
  transform:translate3d(calc(var(--mx,0) * 12px), calc(var(--my,0) * 12px), 0);
  transition:transform .4s ease-out;
}
.veil-one {
  width:min(520px,120vw);
  height:min(420px,70vh);
  left:-20%;
  top:-10%;
  background:radial-gradient(circle,#f0b5a688,#f0b5a600 70%);
}
.veil-two {
  width:min(480px,110vw);
  height:min(480px,70vh);
  right:-25%;
  bottom:-15%;
  background:radial-gradient(circle,#e8c77a66,#e8c77a00 68%);
}
.hero-sparks,.panel-sparks {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.hero-spark,.panel-spark {
  position:absolute;
  width:var(--spark-size,6px);
  height:var(--spark-size,6px);
  margin:calc(var(--spark-size,6px) / -2);
  border-radius:50%;
  background:var(--spark,#fff6e8);
  box-shadow:0 0 10px 2px var(--spark-glow,#e8c77a88);
  opacity:0;
  pointer-events:none;
  animation:hero-spark-float var(--dur,4s) var(--delay,0s) ease-in-out infinite;
}
.hero-spark.is-burst,.panel-spark.is-burst {
  animation:hero-spark-burst .9s ease-out forwards;
  box-shadow:0 0 14px 3px var(--spark-glow,#f0c56a99);
}
.memory,.family {
  --spark:#fff8ec;
  --spark-glow:#e0b25a77;
}
.wish-scene {
  --spark:#fffaf2;
  --spark-glow:#ffffff66;
  --spark-size:5px;
}
.gift {
  --spark:#ffe9c4;
  --spark-glow:#f0c56a88;
}
@keyframes gag-in { to { opacity:1; transform:none; } }
@keyframes gag-wiggle { 25% { transform:rotate(-2deg) translateX(-3px); } 50% { transform:rotate(2deg) translateX(3px); } 75% { transform:rotate(-1deg); } }
@keyframes gag-land { 0% { transform:scale(1); } 40% { transform:scale(1.07); } 100% { transform:scale(1); } }
@keyframes gag-fade-out {
  0% { opacity:1; transform:scale(1); filter:blur(0); }
  100% { opacity:0; transform:scale(.92) translateY(-8px); filter:blur(4px); }
}
@keyframes gag-finale-in {
  from { opacity:0; transform:translateY(18px) scale(.94); filter:blur(6px); }
  to { opacity:1; transform:none; filter:blur(0); }
}
@keyframes age-tick { 0% { transform:translateY(8px) scale(.9); opacity:.65; } 100% { transform:none; opacity:1; } }
@keyframes age-final { 0% { transform:scale(.82) rotate(-2deg); } 55% { transform:scale(1.1) rotate(1deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes hero-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes hero-spark-float {
  0%,100% { opacity:.15; transform:translate3d(0,0,0) scale(.7); }
  50% { opacity:.85; transform:translate3d(var(--dx,8px),var(--dy,-18px),0) scale(1.15); }
}
@keyframes hero-spark-burst {
  0% { opacity:1; transform:translate(-50%,-50%) scale(.4); }
  100% { opacity:0; transform:translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0); }
}
@keyframes tap-hint-pulse {
  0%,100% { opacity:.45; transform:translateX(-50%) translateY(0); }
  50% { opacity:.9; transform:translateX(-50%) translateY(-4px); }
}

.gift.winding .gift-instruction { animation:instruction-pulse .5s ease-in-out infinite; }
.gift.celebrating::after { content:""; position:absolute; z-index:3; inset:12% 0 auto; height:70%; pointer-events:none; background:
  radial-gradient(circle at 50% 48%,#fff 0 2.5%,#fff9 7%,#ffe8b855 16%,transparent 42%),
  radial-gradient(circle at 50% 50%,#ffd48a44 0 18%,transparent 48%);
  animation:gift-flash .85s cubic-bezier(.2,.7,.2,1) forwards; }
.gift-box.shaking { animation:gift-shake .55s cubic-bezier(.36,.07,.19,.97); }
.gift.afterglow .gift-ray { opacity:.35; }
.gift-fx { position:absolute; inset:0; z-index:4; overflow:hidden; pointer-events:none; }
.shockwave { position:absolute; z-index:2; top:48%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:3px solid #fff; opacity:0; pointer-events:none; }
.gift.celebrating .shockwave { animation:shockwave 0.85s cubic-bezier(.12,.7,.2,1) forwards; }
.gift.celebrating .shockwave::after { content:""; position:absolute; inset:-18px; border-radius:50%; border:2px solid #ffe7a8aa; animation:shockwave 1s .08s cubic-bezier(.12,.7,.2,1) forwards; }
.party-piece { position:absolute; z-index:4; top:48%; left:50%; width:10px; height:18px; border-radius:3px; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(var(--s,.8)); animation:party-burst var(--dur,1.6s) var(--delay,0ms) cubic-bezier(.12,.82,.22,1) forwards; will-change:transform,opacity; }
.party-piece.shape-dot { width:11px; height:11px; border-radius:50%; }
.party-piece.shape-ribbon { width:5px; height:28px; border-radius:3px; }
.party-piece.shape-star { width:auto; height:auto; background:transparent!important; color:#d4a43e; font-size:18px; line-height:1; text-shadow:0 0 10px #fff8; }
.party-spark { position:absolute; z-index:5; top:46%; left:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:#fff; box-shadow:0 0 12px 4px #ffe7a8; pointer-events:none; opacity:0; animation:spark-pop .55s var(--delay,0ms) ease-out forwards; }
.gift-box.primed { animation:anticipation .98s cubic-bezier(.25,.7,.2,1)!important; pointer-events:none; }
.gift-box.primed .lid { animation:lid-rattle .14s 7; }
.gift-box.primed .bow { animation:bow-jitter .14s 7; }
.gift-box.primed .glow-pulse { animation:glow-build .98s ease-out forwards; }
.gift-box.opened { animation:box-pop .7s cubic-bezier(.16,.85,.25,1) forwards; pointer-events:none; }
.gift-box.opened .box-shine::after { animation:none; opacity:0; }
.gift-box.opened .lid { animation:lid-fly 1.05s cubic-bezier(.18,.75,.2,1) forwards; }
.gift-box.opened .bow { animation:bow-fly .95s .04s cubic-bezier(.18,.75,.2,1) forwards; }
.gift-box.opened .glow-pulse { opacity:0; }
.gift.celebrating .gift-box.opened { animation:box-pop .55s cubic-bezier(.16,.85,.25,1) forwards, box-settle 1.1s .45s cubic-bezier(.22,.8,.25,1) forwards; box-shadow:inset 0 18px 28px #5a2a2033,0 10px 16px #6a343422; }
.gift.celebrating .gift-box.opened .ribbon { opacity:.55; }
.gift.celebrating .gift-ray { animation:rays 1.1s cubic-bezier(.16,.8,.2,1) forwards; }
.gift.celebrating .ray-two { animation-delay:.05s; }
.gift.celebrating .ray-three { animation-delay:.1s; }
.glow-pulse { position:absolute; inset:-18px; border-radius:12px; background:radial-gradient(circle,#ffe7a866,#ffe7a800 68%); opacity:0; pointer-events:none; z-index:0; }
@keyframes anticipation {
  0% { transform:rotate(0) scale(1); }
  12% { transform:rotate(-5deg) translateX(-6px) scale(.98,1.02); }
  24% { transform:rotate(6deg) translateX(7px) scale(1.02,.97); }
  38% { transform:rotate(-8deg) translateX(-10px) scale(.96,1.04); }
  52% { transform:rotate(9deg) translateX(11px) scale(1.05,.94); }
  66% { transform:rotate(-6deg) translateX(-7px) scale(.97,1.03); }
  80% { transform:rotate(4deg) translateX(4px) scale(1.08,.92); }
  92% { transform:rotate(-2deg) scale(1.12,.88); }
  100% { transform:rotate(0) scale(1); }
}
@keyframes lid-rattle {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-10px) rotate(4deg); }
}
@keyframes bow-jitter {
  50% { transform:translateY(-4px) scale(1.08) rotate(-8deg); }
}
@keyframes glow-build {
  0% { opacity:0; transform:scale(.6); }
  70% { opacity:.85; transform:scale(1.15); }
  100% { opacity:1; transform:scale(1.35); }
}
@keyframes lid-fly {
  0% { opacity:1; transform:rotate(0) translate(0,0) scale(1); }
  18% { opacity:1; transform:rotate(-28deg) translate(-18px,-48px) scale(1.08); }
  55% { opacity:.95; transform:rotate(-118deg) translate(-95px,-130px) scale(1.05); }
  100% { opacity:0; transform:rotate(-210deg) translate(-160px,-40px) scale(.7); }
}
@keyframes bow-fly {
  0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  40% { opacity:1; transform:translate(70px,-110px) rotate(140deg) scale(1.2); }
  100% { opacity:0; transform:translate(150px,30px) rotate(320deg) scale(.5); }
}
@keyframes party-burst {
  0% { opacity:0; transform:translate(-50%,-50%) scale(calc(var(--s,.8) * .15)) rotate(0); }
  8% { opacity:1; }
  35% { opacity:1; transform:translate(calc(-50% + var(--x) * .55),calc(-50% + var(--y) * .7)) scale(var(--s,.8)) rotate(calc(var(--r) * .45)); }
  72% { opacity:.95; }
  100% { opacity:0; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 90px)) scale(calc(var(--s,.8) * .55)) rotate(var(--r)); }
}
@keyframes spark-pop {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  30% { opacity:1; transform:translate(calc(-50% + var(--x) * .4),calc(-50% + var(--y) * .4)) scale(1.4); }
  100% { opacity:0; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(0); }
}
@keyframes gift-flash {
  0% { opacity:0; transform:scale(.4); }
  18% { opacity:1; transform:scale(1.05); }
  100% { opacity:0; transform:scale(1.45); }
}
@keyframes shockwave {
  0% { opacity:.95; transform:scale(.2); }
  100% { opacity:0; transform:scale(14); }
}
@keyframes box-pop {
  0% { transform:scale(1.12,.88); }
  28% { transform:translateY(-28px) scale(.9,1.14); }
  52% { transform:translateY(-8px) scale(1.08,.94); }
  74% { transform:translateY(-14px) scale(.97,1.04); }
  100% { transform:none; }
}
@keyframes box-settle {
  0% { transform:translateY(0) scale(1); opacity:1; filter:brightness(1); }
  100% { transform:translateY(12px) scale(.86); opacity:.62; filter:brightness(.92); }
}
@keyframes gift-shake {
  0%,100% { transform:translate(0); }
  15% { transform:translate(-4px,1px); }
  30% { transform:translate(4px,-2px); }
  45% { transform:translate(-3px,-1px); }
  60% { transform:translate(3px,2px); }
  75% { transform:translate(-1px,1px); }
}
@keyframes rays {
  0% { opacity:.15; transform:scale(.2) rotate(0); }
  35% { opacity:.85; }
  100% { opacity:0; transform:scale(1.9) rotate(28deg); }
}
@keyframes instruction-pulse {
  50% { opacity:.45; letter-spacing:.18em; }
}

* { box-sizing:border-box; }
html {
  scroll-behavior:auto;
  scroll-snap-type:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:#332c2b;
  overscroll-behavior-y:none;
  height:100%;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Manrope,system-ui,sans-serif;
  overflow-x:clip;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
  height:100%;
}
main { overflow-x:clip; width:100%; max-width:100%; }
.progress { position:fixed; z-index:9; inset:0 0 auto; height:4px; padding-top:var(--safe-top); background:#fff8; }
.progress span { display:block; height:4px; background:var(--rust); transform:scaleX(0); transform-origin:left; }
.grain { position:fixed; pointer-events:none; z-index:8; inset:0; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.story-nav {
  position:fixed;
  z-index:10;
  right:calc(10px + var(--safe-right));
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px 3px;
}
.story-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff8;
  border:1px solid #30282a44;
  box-shadow:0 0 0 1px #fff4, 0 1px 4px #0002;
  display:block;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.story-dot.is-active {
  background:var(--rust);
  border-color:#fff;
  transform:scale(1.35);
}
.story-dot:focus-visible { outline:2px solid var(--rust); outline-offset:3px; }
.panel {
  min-height:100svh; min-height:100dvh;
  height:100svh; height:100dvh;
  padding:calc(var(--pad-y) + var(--safe-top)) calc(var(--pad-x) + var(--safe-right)) calc(var(--pad-y) + var(--safe-bottom)) calc(var(--pad-x) + var(--safe-left));
  position:relative; display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:none; margin:0;
  overflow:hidden;
  scroll-margin:0;
  touch-action:pan-y;
}
h1,h2 { font-family:"DM Serif Display",Georgia,serif; font-weight:400; letter-spacing:-.055em; line-height:.9; margin:12px 0 20px; overflow-wrap:anywhere; }
h1 { font-size:clamp(56px,15vw,132px); }
h1 span,h1 em { display:inline-block; }
h2 { font-size:clamp(40px,11.5vw,84px); }
em { color:var(--rust); font-weight:400; }
p { font-size:15px; line-height:1.65; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; margin:0; }
.center { text-align:center; }
.section-no { position:absolute; top:calc(28px + var(--safe-top)); right:calc(18px + var(--safe-right)); opacity:.35; letter-spacing:.13em; font-family:"DM Serif Display"; font-size:17px; }
.hero {
  background:
    radial-gradient(ellipse 80% 55% at 15% 20%,#f2c2b888,#f2c2b800 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%,#e8c77a66,#e8c77a00 50%),
    linear-gradient(155deg,#f3cfc8 0%,#f8ebe3 42%,#efe2d4 100%);
  isolation:isolate;
  overflow:hidden;
  cursor:crosshair;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b85f48' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.orb {
  position:absolute;
  border-radius:50%;
  z-index:0;
  will-change:transform;
  transition:transform .35s ease-out;
}
.orb-one {
  width:min(360px,85vw);
  height:min(360px,85vw);
  right:-38%;
  bottom:-12%;
  background:radial-gradient(circle at 35% 35%,#f0a79a99,#d9918c44 55%,#d9918c00);
  filter:blur(2px);
}
.orb-two {
  width:min(180px,42vw);
  height:min(180px,42vw);
  left:-14%;
  top:16%;
  background:radial-gradient(circle at 40% 40%,#edd09a88,#d5ac7c44 60%,#d5ac7c00);
}
.orb-three {
  width:min(120px,28vw);
  height:min(120px,28vw);
  right:18%;
  top:12%;
  background:radial-gradient(circle,#fff6,#fff0 70%);
  filter:blur(1px);
}
.year {
  position:absolute;
  top:calc(52px + var(--safe-top));
  right:calc(18px + var(--safe-right));
  z-index:2;
  font-family:"DM Serif Display";
  font-size:clamp(16px,4.2vw,20px);
  letter-spacing:.04em;
  color:#7a564c;
  transform:rotate(90deg);
  transform-origin:right;
  opacity:.85;
}
.lead { max-width:min(340px,92%); font-size:clamp(15px,3.8vw,17px); color:#5a433c; }
.scroll-hint {
  margin-top:clamp(22px,5vh,36px);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:0;
  color:#7a564c;
  text-decoration:none;
  display:inline-block;
  width:fit-content;
  border-bottom:1px solid #d4a43e66;
  padding-bottom:4px;
}
.flower {
  position:absolute;
  color:#c9784a;
  font-size:clamp(48px,14vw,110px);
  opacity:.75;
  z-index:1;
  pointer-events:none;
  will-change:transform;
  transition:transform .4s ease-out;
  text-shadow:0 8px 24px #b85f4833;
}
.flower-one { right:3%; bottom:max(12%,calc(42px + var(--safe-bottom))); }
.flower-two { left:2%; top:calc(14% + var(--safe-top)); font-size:clamp(26px,7vw,36px); color:#d4a43e; }
.flower-three { left:12%; bottom:18%; font-size:clamp(22px,5vw,30px); opacity:.45; color:#b88a7a; }
.memory {
  gap:clamp(18px,3.5vh,28px);
  background:#f9f5ee;
  justify-content:flex-start;
  padding-top:calc(var(--pad-y) + var(--safe-top) + 12px);
}
.memory-copy { position:relative; z-index:2; max-width:34rem; }
.family>h2,.family>.eyebrow,.family>p { position:relative; z-index:2; }
.section-no { z-index:2; }
.gift .eyebrow,.gift h2,.gift-instruction,.surprise { position:relative; z-index:2; }
.memory-copy h2 { margin-top:8px; }
.photo-stack {
  width:min(68%,300px);
  align-self:flex-end;
  position:relative;
  z-index:2;
  flex:0 0 auto;
  margin-top:auto;
}
.photo-slot { background:linear-gradient(135deg,#cfb7a9,#f3e1d9); color:#fff; display:grid; place-items:center; text-align:center; text-transform:uppercase; letter-spacing:.1em; font-size:10px; line-height:1.8; overflow:hidden; position:relative; }
.photo-slot::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 35%,#fff7 50%,transparent 65%); transform:translateX(-150%); animation:shine 5s 1s infinite; }
.photo-main { width:100%; aspect-ratio:4/5; border-radius:100vmax 100vmax 16px 16px; box-shadow:-15px 17px 0 #e1a29d; }
.photo-note { position:absolute; right:0; bottom:12px; padding:12px 16px; background:#342b2a; color:#f9eee8; font-family:"DM Serif Display"; line-height:1.1; font-size:clamp(16px,4.5vw,19px); transform:rotate(-7deg); max-width:70%; }
.memory-copy p:last-child,.family>p:last-child { max-width:340px; }
.messages { background:#332c2b; color:#f9eee7; justify-content:flex-start; padding-top:14vh; }
.messages em { color:#f2aba2; }
.message-card { display:flex; gap:14px; padding:19px 0; border-bottom:1px solid #ffffff25; max-width:510px; transform-style:preserve-3d; }
.message-card p { margin:0; font-size:13px; line-height:1.6; }
.message-card .name { font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:5px; }
.avatar { flex:0 0 42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:"DM Serif Display"; font-size:21px; box-shadow:0 4px 13px #0004; }
.rust { background:var(--rust); }
.green { background:var(--green); }
.violet { background:var(--violet); }
.peach { background:#c98068; }
.photo-wide {
  width:100%;
  aspect-ratio:1.45;
  border-radius:clamp(60px,22vw,140px) clamp(60px,22vw,140px) 12px 12px;
  margin-bottom:clamp(20px,4vh,36px);
  background:linear-gradient(135deg,#879b8c,#d8c7ba);
  flex:0 0 auto;
}
.family {
  background:#dbe2d9;
  justify-content:flex-start;
  padding-top:calc(var(--pad-y) + var(--safe-top) + 12px);
}
.gift {
  background:radial-gradient(circle at 50% 70%,#fff2c9,#f5d5cf 53%,#edc5c0);
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  padding-bottom:calc(var(--pad-y) + var(--safe-bottom) + 20px);
}
.gift.celebrating {
  justify-content:center;
}
.gift-ray { position:absolute; width:min(520px,140vw); height:clamp(48px,10vw,80px); background:linear-gradient(90deg,transparent,#fff9,transparent); opacity:.55; top:42%; transform-origin:center; pointer-events:none; }
.ray-one { transform:rotate(35deg); }
.ray-two { transform:rotate(-35deg); }
.ray-three { transform:rotate(90deg); width:min(420px,110vw); height:55px; }
.gift-instruction { margin:4px 0 clamp(20px,4vh,32px); font-size:12px; text-transform:uppercase; letter-spacing:.12em; transition:opacity .25s,letter-spacing .25s; }
.gift-box { position:relative; z-index:5; border:0; background:#b85f48; width:min(190px,48vw); height:min(150px,38vw); border-radius:5px; cursor:pointer; box-shadow:0 18px 22px #6a343433; transition:transform .25s; transform-origin:center bottom; touch-action:manipulation; flex:0 0 auto; }
.gift-box:not(.opened):not(.primed):hover { transform:translateY(-6px) scale(1.03); }
.gift-box:not(.opened):not(.primed) { animation:wobble 2.8s ease-in-out infinite; }
.lid { position:absolute; width:calc(100% + 20px); height:clamp(28px,8vw,35px); top:clamp(-18px,-5vw,-21px); left:-10px; background:#ce765f; border-radius:4px; transform-origin:center bottom; z-index:2; }
.ribbon { position:absolute; background:#f8d8b2; }
.vertical { width:clamp(16px,5vw,22px); inset:0 auto 0 calc(50% - 11px); }
.horizontal { height:clamp(14px,4vw,19px); width:100%; left:0; top:calc(50% - 9px); }
.bow { position:absolute; top:clamp(-48px,-14vw,-59px); left:calc(50% - 22px); color:#f8d8b2; font-size:clamp(34px,10vw,45px); z-index:3; transform-origin:center; }
.box-shine { position:absolute; inset:0; overflow:hidden; }
.box-shine::after { content:""; position:absolute; width:40px; height:200px; left:-80px; top:-30px; background:#fff5; transform:rotate(20deg); animation:boxshine 4s infinite; }
.surprise {
  opacity:0;
  transform:translateY(24px) scale(.85);
  max-height:0;
  overflow:hidden;
  text-align:center;
  pointer-events:none;
  position:relative;
  z-index:6;
  width:min(100%,360px);
  overflow-anchor:none;
}
.surprise.visible {
  opacity:1;
  transform:translateY(0) scale(1);
  max-height:320px;
  overflow:visible;
  pointer-events:auto;
  animation:surprise-spring .9s cubic-bezier(.18,1.25,.28,1) both;
  margin-top:-18px;
}
.perfume { height:115px; width:80px; margin:24px auto 10px; border-radius:16px 16px 30px 30px; background:linear-gradient(105deg,#ffe5ad,#d9a54e); border:2px solid #c98b37; position:relative; box-shadow:inset 8px 0 #fff2cc99,0 10px 18px #77512b33; }
.visible .perfume { animation:perfume-pop .85s .12s cubic-bezier(.18,1.35,.28,1) both,float 2.8s 1s ease-in-out infinite; }
.cap { position:absolute; width:38px; height:18px; background:#2f2928; top:-19px; left:19px; border-radius:4px 4px 0 0; }
.bottle-label { position:absolute; inset:30px 9px 10px; display:grid; place-content:center; background:#f9eee5; color:#5a4034; font-size:9px; line-height:1.4; text-transform:uppercase; letter-spacing:.07em; }
.bottle-label b { font-size:16px; color:var(--rust); }
.surprise p { margin:0; font-family:"DM Serif Display"; font-size:clamp(20px,5.5vw,23px); line-height:1.05; opacity:0; }
.visible .surprise p,.surprise.visible p { animation:text-rise .6s .35s ease-out both; }
.confetti { position:absolute; color:var(--rust); font-size:clamp(16px,5vw,22px); opacity:0; }
.visible .confetti { animation:pop .85s cubic-bezier(.16,1.2,.3,1) forwards; }
.c1 { left:20%; --x:-55px; animation-delay:.28s!important; }
.c2 { right:18%; color:var(--green); --x:55px; animation-delay:.34s!important; }
.c3 { left:32%; color:#d4a43e; --x:-15px; animation-delay:.4s!important; }
.c4 { right:32%; color:var(--violet); --x:15px; animation-delay:.46s!important; }
.c5 { left:12%; color:#d4a43e; --x:-70px; animation-delay:.52s!important; }
.c6 { right:10%; color:var(--rust); --x:70px; animation-delay:.58s!important; }
footer {
  background:#332c2b;
  color:#f8eee8;
  text-align:center;
  padding:28px 20px calc(28px + var(--safe-bottom));
  font-family:"DM Serif Display";
  font-size:clamp(18px,5vw,21px);
  width:100%;
  position:relative;
  z-index:1;
}
.reveal { opacity:0; transform:translateY(35px); transition:opacity .7s ease,transform .7s ease; }
.reveal.from-left { transform:translateX(-35px); }
.reveal.from-right { transform:translateX(35px); }
.reveal.in-view { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(50px); } to { opacity:1; transform:none; } }
@keyframes pulse { 50% { opacity:.35; transform:translateY(5px); } }
@keyframes shine { 45%,100% { transform:translateX(150%); } }
@keyframes wobble { 0%,80%,100% { transform:rotate(0); } 85% { transform:rotate(3deg); } 90% { transform:rotate(-3deg); } 95% { transform:rotate(1deg); } }
@keyframes boxshine { 0%,55% { transform:translateX(0) rotate(20deg); } 70%,100% { transform:translateX(320px) rotate(20deg); } }
@keyframes float { 50% { transform:translateY(-10px) rotate(1.5deg); } }
@keyframes pop { 0% { opacity:0; transform:translate(0,10px) scale(.3) rotate(0); } 55% { opacity:1; transform:translate(var(--x,0),-85px) scale(1.25) rotate(120deg); } 100% { opacity:.85; transform:translate(calc(var(--x,0) * 1.15),-55px) scale(1) rotate(200deg); } }
@keyframes surprise-spring { 0% { opacity:0; transform:translateY(48px) scale(.45); } 55% { opacity:1; transform:translateY(-8px) scale(1.06); } 78% { transform:translateY(4px) scale(.98); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes perfume-pop { 0% { opacity:0; transform:translateY(30px) scale(.4) rotate(-12deg); } 55% { opacity:1; transform:translateY(-12px) scale(1.12) rotate(4deg); } 78% { transform:translateY(3px) scale(.96) rotate(-2deg); } 100% { opacity:1; transform:translateY(0) scale(1) rotate(0); } }
@keyframes text-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

@media (max-width:480px) {
  .story-nav { right:calc(8px + var(--safe-right)); gap:9px; }
  .story-dot { width:7px; height:7px; }
  :root { --pad-x:20px; --pad-y:28px; }
  .hero-kicker { font-size:clamp(20px,5.8vw,28px); max-width:16ch; }
  .gag-label { font-size:clamp(24px,6.5vw,34px); }
  .gag-age { font-size:clamp(68px,20vw,96px); }
  .gag-aside { font-size:14px; max-width:90%; }
  .hero-tap-hint { font-size:9px; letter-spacing:.14em; bottom:calc(14px + var(--safe-bottom)); }
  .flower-three { opacity:.3; }
  .photo-stack { width:min(62%,250px); }
  .photo-main { box-shadow:-10px 12px 0 #e1a29d; }
  .photo-note { font-size:16px; padding:10px 12px; }
  .gift-box { width:170px; height:134px; }
  .surprise.visible { max-height:280px; min-height:0; }
  .c5,.c6 { display:none; }
}

/* iPhone 15 Pro Max ~430x932 */
@media (min-width:430px) and (max-width:440px) and (min-height:900px) {
  .panel { padding-top:calc(36px + var(--safe-top)); padding-bottom:calc(36px + var(--safe-bottom)); }
  .gag-age { font-size:96px; }
  .lead { font-size:16px; max-width:320px; }
  .gift { justify-content:center; gap:4px; }
}

@media (max-width:390px) {
  h1 { font-size:clamp(48px,14vw,64px); }
  h2 { font-size:clamp(36px,11vw,48px); }
  .year { font-size:14px; top:calc(40px + var(--safe-top)); }
  .flower-one { font-size:44px; opacity:.65; }
  .gift-box { width:150px; height:120px; }
  .bow { font-size:32px; top:-42px; }
}

@media (max-height:700px) and (orientation:landscape) {
  .panel { height:auto; min-height:100svh; padding-top:calc(24px + var(--safe-top)); padding-bottom:calc(24px + var(--safe-bottom)); }
  .flower,.orb { opacity:.35; }
  .scroll-hint { margin-top:18px; }
  .gift { min-height:100svh; padding-block:40px; }
  .story-nav { display:none; }
}

@media (min-width:700px) {
  .panel {
    padding-left:max(80px, calc((100vw - 720px) / 2 + 40px));
    padding-right:max(80px, calc((100vw - 720px) / 2 + 40px));
  }
  .message-card { margin-inline:auto; }
  .photo-stack { width:55%; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .age-gag,.hero-after,.hero-kicker { opacity:1; transform:none; animation:none!important; pointer-events:auto; }
  .hero-tap-hint,.hero-spark,.panel-spark { display:none; }
}