/* ==========================================================================
   Didi, Ek Chhoti Si Kahani Tumhare Naam...
   Mobile-first. Designed at 390 × 844, adapts to every phone in portrait.
   ========================================================================== */

:root {
  /* palette */
  --midnight:    #0b1120;
  --midnight-2:  #131c33;
  --midnight-3:  #1b2643;
  --night-warm:  #130d0a;
  --cream:       #f3e9d6;
  --paper:       #f6eedc;
  --paper-2:     #ecdcbc;
  --gold:        #c6a05a;
  --gold-soft:   #e3c98e;
  --gold-dim:    rgba(198, 160, 90, .38);
  --peach:       #efc2a2;
  --peach-deep:  #d9946f;
  --brown:       #5b3d2b;
  --brown-soft:  #8a6a52;
  --ink:         #3b2a20;
  --light:       #f4ede1;
  --light-dim:   rgba(244, 237, 225, .7);
  --light-faint: rgba(244, 237, 225, .4);

  /* type */
  --serif: "Cormorant Garamond", "Tiro Devanagari Hindi", Georgia, serif;
  --deva:  "Tiro Devanagari Hindi", "Cormorant Garamond", serif;
  --sans:  "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:  "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* layout */
  --gutter: clamp(20px, 6.4vw, 28px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #06080e;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--light);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
p, h1, h2, figure { margin: 0; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.scene:focus, .scene:focus-visible { outline: none; }

/* ---------- the phone-shaped stage ---------- */
.app {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: 480px;
  overflow: hidden;
  overflow: clip; /* can't be scrolled even by script */
  background: var(--midnight);
  isolation: isolate;
}

@media (min-width: 520px) {
  body { background: radial-gradient(ellipse at 50% 30%, #161c2c, #05070c 70%); }
  .app { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 140px rgba(0, 0, 0, .7); }
}

/* ---------- scenes ---------- */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 70px) var(--gutter) calc(var(--safe-b) + 30px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-soft), visibility 0s linear 900ms;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--ease-soft), visibility 0s;
}
.scene--scroll { padding: 0; }

.scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: calc(var(--safe-t) + 72px) var(--gutter) calc(var(--safe-b) + 56px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--safe-t) + 60px), #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--safe-t) + 60px), #000 calc(100% - 36px), transparent 100%);
}

.scroll::-webkit-scrollbar { display: none; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0 0 auto; z-index: 60; pointer-events: none; }

.progress {
  position: absolute; inset: 0 0 auto; height: 2px;
  background: rgba(255, 255, 255, .06);
  opacity: 0; transition: opacity .8s;
}
.progress.show { opacity: 1; }
.progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--peach));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.4s var(--ease);
}

.music-toggle {
  position: absolute;
  top: calc(var(--safe-t) + 12px);
  right: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  pointer-events: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 14, 26, .5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--light-faint);
  transition: color .4s, border-color .4s, transform .2s;
}
.music-toggle:active { transform: scale(.94); }
.music-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle .spk { fill: currentColor; stroke: none; }
.music-toggle .wv { display: none; }
.music-toggle.is-on { color: var(--gold-soft); border-color: var(--gold-dim); }
.music-toggle.is-on .wv { display: block; }
.music-toggle.is-on .x { display: none; }

.toast {
  position: absolute; z-index: 70;
  top: calc(var(--safe-t) + 66px); left: 50%;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(10, 14, 26, .78);
  border: 1px solid rgba(255, 255, 255, .08);
  font: 400 14px/1.35 var(--sans);
  color: var(--light-dim);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .5s, transform .5s var(--ease);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- buttons ---------- */
.btn {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--gold-dim);
  background: rgba(198, 160, 90, .08);
  color: var(--gold-soft);
  font: 500 16px/1.2 var(--sans);
  letter-spacing: .01em;
  touch-action: manipulation;
  transition: transform .2s var(--ease), background .3s, border-color .3s, opacity .3s;
}
.btn:active { transform: scale(.97); }
.btn--primary {
  min-height: 52px; padding: 0 30px;
  border: 0;
  background: linear-gradient(180deg, #dcbb7c, #bd954f);
  color: #21170e;
  font-size: 17px;
  box-shadow: 0 10px 34px -12px rgba(214, 170, 95, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--paper {
  color: var(--brown);
  border-color: rgba(91, 61, 43, .28);
  background: rgba(91, 61, 43, .05);
}
.btn--quiet {
  border-color: rgba(244, 237, 225, .14);
  background: transparent;
  color: var(--light-dim);
  font-weight: 400;
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--exe {
  font: 500 14px/1.2 var(--mono);
  color: #f2cf8a;
  border-color: rgba(232, 195, 126, .4);
  background: rgba(232, 195, 126, .06);
  border-radius: 8px;
}

/* ---------- the line-by-line storyteller ---------- */
.seq {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: grid;
  align-items: center;
}
.beat {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .72em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--beat-out, 800ms) var(--ease-soft), visibility 0s linear var(--beat-out, 800ms);
}
.beat.on { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
.beat.on.out { opacity: 0; transition: opacity var(--beat-out, 800ms) var(--ease-soft); }

.line {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity var(--ld, 1.1s) var(--ease-soft),
    transform var(--ld, 1.3s) var(--ease),
    visibility 0s linear var(--ld, 1.1s);
}
.line.in {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--ld, 1.1s) var(--ease-soft),
    transform var(--ld, 1.3s) var(--ease),
    visibility 0s;
}
/* lines of a finished beat must not linger invisibly over the next one and eat taps */
.beat:not(.on) .line { visibility: hidden; pointer-events: none; }
.beat.out .line,
.beat.out .lessons-next { pointer-events: none; }

/* emotional scenes: no movement, only light */
.seq[data-pace="slow"] .line { --ld: 2.1s; transform: none; }
.seq[data-pace="slow"] .seq-end.in { transition-delay: 1.4s; }

/* storyteller type */
.say {
  font: 500 24px/1.45 var(--serif);
  color: var(--light);
  max-width: 21em;
  text-wrap: balance;
}
.say--soft { color: var(--light-dim); }
.say--sm   { font-size: 19px; color: var(--light-dim); }
.say--lg   { font-size: 31px; font-style: italic; line-height: 1.25; }
.say--warm { color: var(--peach); font-style: italic; }
.say--hand { font: 400 23px/1.3 var(--hand); color: var(--peach); rotate: -2deg; }
.say--deva { font: 400 23px/1.95 var(--deva); color: var(--gold-soft); }

/* ---------- chapter headers ---------- */
.eyebrow {
  font: 500 12px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.chapter-head { text-align: center; }
.chapter-title { font: italic 500 42px/1.05 var(--serif); margin: .32em 0 .22em; color: var(--light); }
.chapter-sub   { font: 400 17px/1.55 var(--sans); color: var(--light-dim); max-width: 22em; margin: 0 auto; }
.chapter-head--compact .chapter-title { font-size: 34px; margin-bottom: 0; }

/* entrance on scene arrival (CSS only) */
.rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-soft) var(--d, 150ms), transform 1.1s var(--ease) var(--d, 150ms);
}
.is-active .rise { opacity: 1; transform: none; }

/* entrance on scroll (IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 1.1s var(--ease-soft) var(--d, 0ms), transform 1.3s var(--ease) var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; pointer-events: auto; }


/* ==========================================================================
   0 · OPENING + TITLE
   ========================================================================== */
.scene--opening,
.scene--title {
  background:
    radial-gradient(ellipse 90% 50% at 50% 115%, rgba(214, 150, 96, .2), transparent 70%),
    radial-gradient(ellipse at 50% 40%, #121b30 0%, #090e1a 75%);
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.opening-hint {
  margin-top: 6px;
  font: 300 13px/1 var(--sans);
  letter-spacing: .06em;
  color: var(--light-faint);
}
.opening-hint.in { transition-delay: 1.4s; }

.title-didi { font: italic 400 27px/1 var(--serif); color: var(--gold-soft); }
.title-main {
  font: 500 38px/1.12 var(--serif);
  color: var(--light);
  letter-spacing: .005em;
  text-wrap: balance;
}
.title-main em { display: block; font-style: italic; color: var(--peach); }
.title-rule {
  display: block;
  width: 64px; height: 1px;
  margin-top: 14px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
}
.title-rule.in { transform: scaleX(1); transition: opacity 1s, transform 1.8s var(--ease), visibility 0s; }


/* ==========================================================================
   1 · BACHPAN — warm cream, old photo, film grain
   ========================================================================== */
.scene--bachpan {
  background:
    radial-gradient(ellipse 80% 45% at 15% 0%, rgba(255, 236, 205, .9), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #f4ead7 40%, #e7d6b8 100%);
  color: var(--brown);
}
.scene--bachpan .eyebrow { color: #a17b3c; }
.scene--bachpan .chapter-title { color: var(--brown); font-size: 50px; }
.scene--bachpan .chapter-sub { color: var(--brown-soft); }
.scene--bachpan .chapter-head { padding-top: 7vh; }

.grain {
  position: absolute; inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .14  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(5) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
.light-leak {
  position: absolute; z-index: 0;
  width: 120%; height: 60%;
  top: -10%; left: -30%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(239, 175, 120, .28), transparent 65%);
  animation: leak 22s ease-in-out infinite alternate;
}
@keyframes leak { to { transform: translate(30%, 70%) scale(1.15); } }

.scroll-hint {
  margin: 18px 0 6px;
  text-align: center;
  font: 400 14px/1.4 var(--sans);
  color: var(--brown-soft);
  transition: opacity .6s;
}
.scroll-hint span { display: block; font-size: 18px; animation: nudge 2.4s ease-in-out infinite; }
.scroll-hint.gone { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.story { margin: 44px 0; text-align: center; }
.story-line {
  font: 500 25px/1.42 var(--serif);
  color: var(--brown);
  margin-bottom: .3em;
  text-wrap: balance;
}
.story-line--em { font-style: italic; color: #7b4a2e; }

.margin-note {
  margin: -14px 0 6px;
  text-align: center;
  text-wrap: balance;
  font: 400 21px/1.3 var(--hand);
  color: #a3583a;
  rotate: -3deg;
}

.memories:empty { display: none; }
.note {
  position: relative;
  margin: 34px 10px;
  padding: 20px 20px 18px;
  background: #fcf6e8;
  border-radius: 3px;
  font: 400 21px/1.5 var(--hand);
  color: var(--brown);
  box-shadow: 0 12px 26px -16px rgba(70, 45, 20, .55);
  rotate: var(--tilt, -1deg);
}
.note::before {
  content: "";
  position: absolute; top: -10px; left: 50%;
  width: 74px; height: 20px; margin-left: -37px;
  background: rgba(239, 194, 162, .6);
  rotate: -4deg;
}

.chapter-next { margin: 40px 0 10px; text-align: center; }

/* ---------- photos ---------- */
.photo {
  width: min(78%, 300px);
  margin: 30px auto;
  padding: 10px 10px 12px;
  background: #fffaf0;
  border-radius: 6px;
  rotate: var(--tilt, 0deg);
  box-shadow:
    0 1px 2px rgba(60, 40, 20, .14),
    0 22px 44px -22px rgba(60, 40, 20, .5);
}
.photo--small { width: min(56%, 210px); margin: 0 auto 8px; }
.photo--small .photo__caption { font-size: 15px; margin-top: 6px; }

/* two photos side by side, like prints dropped on a table */
.photo-pair { display: flex; gap: 12px; align-items: flex-start; margin: 34px -4px; }
.photo-pair .photo { width: 50%; margin: 0; padding: 7px 7px 9px; }
.photo-pair .photo:nth-child(2) { margin-top: 30px; }
.photo-pair .photo__caption { font-size: 15px; margin-top: 7px; }

/* a photo tucked inside an envelope letter */
.photo--note {
  width: min(62%, 200px);
  margin: 2px auto 18px;
  padding: 7px 7px 9px;
  opacity: 0;
  transition: opacity .9s var(--ease-soft) .2s;
}
.photo--note .photo__caption { font-size: 15px; margin-top: 6px; }
.is-reading .photo--note { opacity: 1; }
.photo.reveal { transform: translateY(26px) scale(.98); }
.photo.reveal.in { transform: none; }

.photo__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: #e9dcc4;
}
.photo__frame img {
  position: absolute; left: 0; top: -3%;
  width: 100%; height: 106%;       /* tiny overscan, just enough for parallax */
  object-fit: cover;
  object-position: 50% 35%;
  transform: translate3d(0, var(--py, 0px), 0);
  filter: sepia(.12) saturate(.94) contrast(.98);
  will-change: transform;
}
.photo__caption {
  margin-top: 10px;
  text-align: center;
  text-wrap: balance;
  font: 400 18px/1.3 var(--hand);
  color: var(--brown);
}
.photo__ph {
  position: absolute; inset: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed rgba(139, 106, 82, .4);
  border-radius: 3px;
  text-align: center;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .05em;
  color: var(--brown-soft);
}
.photo__ph small { font-size: 10.5px; opacity: .75; letter-spacing: 0; }


/* ==========================================================================
   2 · TUMNE JO SIKHAYA — dusk
   ========================================================================== */
.scene--sikhaya {
  background:
    radial-gradient(ellipse 100% 45% at 50% 112%, rgba(239, 178, 140, .3), transparent 70%),
    linear-gradient(180deg, #0e1527 0%, #17203a 55%, #2a2539 100%);
}

.beat--lessons { justify-content: center; gap: 16px; }
.lessons { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.lesson {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(227, 201, 142, .18);
  background: rgba(255, 246, 230, .045);
  color: var(--light);
  transition: background .5s, border-color .5s, transform .2s var(--ease);
}
.lesson:active { transform: scale(.985); }
.lesson.is-open { background: rgba(255, 236, 205, .09); border-color: rgba(227, 201, 142, .45); }

.lesson__top { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.lesson__icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  color: var(--gold-soft);
}
.lesson__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lesson.is-open .lesson__icon { background: rgba(198, 160, 90, .16); }
.lesson__name { font: italic 500 24px/1 var(--serif); }
.lesson__name small {
  display: block; margin-top: 5px;
  font: 400 12px/1 var(--sans); font-style: normal;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--light-faint);
}
.lesson__plus { position: relative; margin-left: auto; width: 14px; height: 14px; flex: none; opacity: .6; transition: transform .5s var(--ease); }
.lesson__plus::before, .lesson__plus::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; margin-top: -.75px;
  background: var(--gold-soft); border-radius: 2px;
}
.lesson__plus::after { transform: rotate(90deg); }
.lesson.is-open .lesson__plus { transform: rotate(45deg); }

.lesson__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.lesson__body > span { overflow: hidden; }
.lesson__body > span > span {
  display: block;
  padding: 14px 4px 4px;
  font: 500 20px/1.5 var(--serif);
  text-wrap: pretty;
  color: var(--cream);
  opacity: 0;
  transition: opacity .7s .15s;
}
.lesson.is-open .lesson__body { grid-template-rows: 1fr; }
.lesson.is-open .lesson__body > span > span { opacity: 1; }

.lessons-next {
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .8s, transform .8s var(--ease);
}
.lessons-next.show { opacity: 1; transform: none; pointer-events: auto; }
.beat:not(.on) .lessons-next { visibility: hidden; pointer-events: none; }


/* ==========================================================================
   3 · OPEN WHEN — a box of envelopes under a lamp
   ========================================================================== */
.scene--box {
  background:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(239, 194, 162, .2), transparent 70%),
    linear-gradient(180deg, #141d34 0%, #0d1324 100%);
}
.scene--box .chapter-title { font-size: 36px; }

.envelopes { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.env {
  position: relative;
  display: block;
  width: 100%;
  min-height: 94px;
  padding: 20px 80px 18px 20px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  color: var(--brown);
  background: linear-gradient(180deg, #f5e8cf 0%, #eedab8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 16px 30px -18px rgba(0, 0, 0, .8),
    0 2px 6px -2px rgba(0, 0, 0, .3);
  rotate: var(--tilt, 0deg);
  overflow: hidden;
  transition: transform .3s var(--ease), filter .8s, box-shadow .8s;
}
.env:active { transform: scale(.98); }
.env__flap {
  position: absolute; inset: 0 0 auto;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(210, 172, 120, .45), rgba(210, 172, 120, .16));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env__body { position: relative; display: block; }
.env__kicker {
  display: block; margin-bottom: 7px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brown-soft);
}
.env__title { display: block; font: italic 500 22px/1.2 var(--serif); color: #4a3122; }
.env__note  { display: block; margin-top: 6px; font: 400 16px/1.3 var(--hand); color: var(--brown-soft); }

.env__seal {
  position: absolute; right: 18px; top: 50%;
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255, 236, 200, .8);
  background: radial-gradient(circle at 35% 30%, #b3834e, #7d522c 62%, #66411f);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .07), inset 0 -3px 6px rgba(0, 0, 0, .3), 0 3px 6px rgba(0, 0, 0, .25);
  transition: opacity .6s, transform .6s var(--ease);
}
.env__seal svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: currentColor; transition: opacity .5s, transform .6s var(--ease); }
.env__lock { fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.env__lock .shackle { transition: transform .6s var(--ease); }
.env__heart { opacity: 0; transform: scale(.6); }

.env__done {
  position: absolute; right: 14px; bottom: 8px;
  font: 400 15px var(--hand);
  color: var(--brown-soft);
  opacity: 0; transition: opacity .7s .3s;
}
.env.is-opened .env__seal { opacity: .32; transform: scale(.82) rotate(-14deg); }
.env.is-opened .env__done { opacity: 1; }

.env--locked { filter: saturate(.5) brightness(.78); }
.env--ready  { filter: none; animation: ready 2.8s ease-in-out infinite; }
.env--ready .env__lock { opacity: 0; transform: translateY(-6px); }
.env--ready .env__lock .shackle { transform: translateY(-3px); }
.env--ready .env__heart { opacity: 1; transform: none; }
.env--ready .env__note { color: #8a4a2a; }
@keyframes ready {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 30px -18px rgba(0, 0, 0, .8), 0 0 0 0 rgba(227, 201, 142, 0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 30px -18px rgba(0, 0, 0, .8), 0 0 30px 3px rgba(227, 201, 142, .42); }
}
.shake { animation: shake .45s; }
@keyframes shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.box-count { margin: 22px 0 0; text-align: center; font: 400 14px/1 var(--sans); letter-spacing: .08em; color: var(--light-faint); }
.box-next {
  margin: 22px 0 0; text-align: center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .9s, transform .9s var(--ease);
}
.box-next.show { opacity: 1; transform: none; pointer-events: auto; }
.is-finale .box-eyebrow,
.is-finale .box-count,
.is-finale .box-next { display: none; }


/* ---------- overlay: the envelope opening ---------- */
.envelope-view {
  position: absolute; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: calc(var(--safe-t) + 56px) var(--gutter) calc(var(--safe-b) + 28px);
}
.ev__backdrop {
  position: absolute; inset: 0;
  background-color: rgba(7, 9, 16, .88);
  opacity: 0;
  transition: opacity .45s, background-color 1.1s var(--ease-soft);
}
.is-visible .ev__backdrop { opacity: 1; }
.ev__burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

.ev__env {
  grid-area: 1 / 1;
  position: relative; z-index: 2;
  width: min(78vw, 300px);
  aspect-ratio: 1.55;
  perspective: 900px;
  opacity: 0;
  transform: translateY(40px) scale(.94);
  transition: opacity .5s, transform .8s var(--ease);
}
.is-visible .ev__env { opacity: 1; transform: none; }
.ev__back  { position: absolute; inset: 0; border-radius: 8px; background: #d4b086; }
.ev__paper {
  position: absolute; left: 7%; right: 7%; top: 6%; height: 88%;
  z-index: 1;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(120, 90, 60, .14) 13px 14px), var(--paper);
  transition: transform .85s var(--ease);
}
.ev__front {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 8px;
  background: linear-gradient(180deg, #f1dbb7, #e7cba0);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.ev__flap {
  position: absolute; inset: 0 0 auto; z-index: 3;
  height: 57%;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #e8c89a, #dcb889);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform .75s var(--ease), z-index 0s .38s;
}
.is-birthday .ev__front { background: linear-gradient(180deg, #f4dfbb, #e9cc9c); }
.is-birthday .ev__env { filter: drop-shadow(0 0 28px rgba(227, 201, 142, .35)); }

.is-open .ev__flap   { transform: rotateX(180deg); z-index: 0; }
.is-rising .ev__paper { transform: translateY(-64%); }
.is-reading .ev__env { opacity: 0; transform: translateY(90px) scale(.9); transition: opacity .5s, transform .8s var(--ease); }
.is-unfold .ev__backdrop { background-color: var(--paper); }
.is-unfold .ev__env { opacity: 0; transform: translateY(-30px) scale(1.12); transition: opacity 1s .25s, transform 1.4s var(--ease); }

.ev__card {
  grid-area: 1 / 1;
  position: relative; z-index: 3;
  width: min(100%, 350px);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 24px 20px 30px;
  border-radius: 6px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 18px, rgba(217, 148, 111, .35) 18px 19px, transparent 19px),
    radial-gradient(ellipse at 85% 0%, rgba(255, 255, 255, .5), transparent 55%),
    var(--paper);
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85);
  opacity: 0;
  transform: translateY(26px) scale(.97);
  pointer-events: none;
  transition: opacity .6s .1s, transform .9s var(--ease) .1s;
}
.is-reading .ev__card { opacity: 1; transform: none; pointer-events: auto; }
.ev__for {
  margin-bottom: 14px;
  font: 500 11.5px/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brown-soft);
}
.ev__text p {
  margin-bottom: .2em;
  font: 400 21px/1.55 var(--hand);
  opacity: 0; transform: translateY(6px);
  transition: opacity .9s var(--ease-soft) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms);
}
.is-reading .ev__text p { opacity: 1; transform: none; }
.ev__close {
  display: flex; margin: 20px auto 0;
  opacity: 0; transition: opacity .6s var(--d, 1.5s);
}
.is-reading .ev__close { opacity: 1; }


/* ==========================================================================
   DIDI.EXE — an amber terminal
   ========================================================================== */
.scene--exe { background: radial-gradient(ellipse at 50% 30%, #0b1120 0%, #04060b 80%); color: #e8c37e; }
.scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px);
}
.scene--exe.is-glitch .exe { animation: glitch-shake .38s steps(3); }
@keyframes glitch-shake {
  25% { transform: translate(-4px, 1px); filter: hue-rotate(-20deg); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 2px); filter: none; }
}

.exe { font: 400 clamp(12px, 3.4vw, 13.5px)/1.65 var(--mono); }
.exe__title {
  font: 700 32px/1 var(--mono);
  letter-spacing: .06em;
  color: #f2cf8a;
  text-shadow: 0 0 20px rgba(242, 207, 138, .35);
}
.exe__sub { margin-top: 10px; color: #a38d63; }
.exe__dots::after {
  content: "...";
  display: inline-block; width: 0; overflow: hidden; vertical-align: bottom;
  animation: dots 1.4s steps(4) infinite;
}
@keyframes dots { to { width: 4ch; } }

.exe__scanner { display: flex; align-items: center; gap: 16px; margin: 22px 0 14px; }
.radar {
  position: relative; flex: none;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(232, 195, 126, .35);
  background: radial-gradient(circle, rgba(232, 195, 126, .9) 0 2px, transparent 3px 30%, rgba(232, 195, 126, .14) 31% 32%, transparent 33% 62%, rgba(232, 195, 126, .14) 63% 64%, transparent 65%);
}
.radar i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232, 195, 126, .5), transparent 28%);
  animation: spin 2.2s linear infinite;
}
.radar.done i { animation: none; opacity: 0; transition: opacity .6s; }
.radar.done { border-color: rgba(232, 195, 126, .7); box-shadow: 0 0 18px rgba(232, 195, 126, .25); }
.radar__label { letter-spacing: .2em; color: #a38d63; }
.radar.done + .radar__label { color: #f2cf8a; }
@keyframes spin { to { transform: rotate(360deg); } }

.exe__log, .exe__errors { list-style: none; margin: 0; padding: 0; white-space: pre-wrap; }
.exe__log li { color: #c9ac74; min-height: 1.65em; }

.exe__subject {
  margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid rgba(232, 195, 126, .22);
  border-radius: 8px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s, transform .6s var(--ease);
}
.exe__subject.show { opacity: 1; transform: none; }
.exe__subject div { display: flex; gap: 10px; }
.exe__subject dt { flex: none; width: 8.5ch; color: #8e7a55; }
.exe__subject dd { margin: 0; color: #f2cf8a; }

.exe__stats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stat { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.stat.show { opacity: 1; transform: none; }
.stat__row { display: flex; align-items: baseline; gap: 6px; }
.stat__label { white-space: nowrap; }
.stat__dots { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(232, 195, 126, .35); transform: translateY(-4px); }
.stat__val { white-space: nowrap; font-weight: 700; color: #f6d798; text-align: right; min-width: 4.4ch; }
.stat__bar { height: 3px; margin-top: 6px; border-radius: 2px; overflow: hidden; background: rgba(232, 195, 126, .12); }
.stat__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #b8914f, #f2cf8a);
  transform-origin: left; transform: scaleX(var(--v, 0));
}
.stat__note { margin-top: 4px; font-size: .86em; color: #8e7a55; opacity: 0; transition: opacity .6s; }
.stat__note.show { opacity: 1; }
.stat--glitch .stat__val { color: #ef8d6f; animation: flick .12s steps(2) infinite; }
.stat--glitch .stat__bar i { background: #ef8d6f; animation: flick .12s steps(2) infinite; }
.stat--classified .stat__val { color: #ffb8a2; text-shadow: 0 0 14px rgba(239, 141, 111, .6); }
.stat--classified .stat__bar i { background: linear-gradient(90deg, #d9946f, #ffb8a2); }
@keyframes flick { 50% { opacity: .35; transform: translateX(2px); } }

.exe__block { margin-top: 26px; opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s var(--ease); }
.exe__block.show { opacity: 1; transform: none; }
.exe__k { color: #8e7a55; margin-bottom: 4px; }
.exe__v { font-size: 1.12em; color: #f6d798; }
.exe__warning {
  padding: 13px 15px;
  border-radius: 8px;
  border: 1px solid rgba(239, 141, 111, .45);
  background: rgba(239, 141, 111, .07);
  color: #f3b49c;
}
.exe__warning .exe__k { color: #ef8d6f; letter-spacing: .12em; }
.exe__rec { margin-top: 8px; color: #b98c76; font-size: .92em; }
.exe__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 10px; }
.exe-btn {
  min-height: 44px; padding: 0 14px;
  border-radius: 6px;
  border: 1px dashed rgba(239, 141, 111, .6);
  background: transparent;
  color: #ef8d6f;
  font: 500 13px/1.2 var(--mono);
}
.exe-btn:disabled { opacity: .5; cursor: default; }
.exe__errors li { color: #ef8d6f; }
.exe__errors:empty { display: none; }


/* ==========================================================================
   THE MEMORY MOMENT — near darkness
   ========================================================================== */
.scene--yaad { background: radial-gradient(ellipse at 50% 55%, #22160f 0%, #120c09 55%, #090605 100%); }
.scene--yaad .say { color: #eee2cf; }
.scene--yaad .say--soft { color: rgba(238, 226, 207, .62); }


/* ==========================================================================
   THANK YOU — a letter writing itself
   ========================================================================== */
.scene--letter { background: radial-gradient(ellipse 120% 60% at 50% 0%, #2b1e15 0%, #120c09 70%); }
.letter-scroll { padding-top: calc(var(--safe-t) + 70px); }

.paper {
  position: relative;
  padding: 40px 20px 46px 42px;
  border-radius: 4px;
  color: var(--ink);
  background-color: #f6eedc;
  background-image:
    linear-gradient(90deg, transparent 28px, rgba(217, 148, 111, .38) 28px 29px, transparent 29px),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(120, 90, 60, .13) 33px 34px);
  background-position: 0 0, 0 34px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 34px 70px -34px rgba(0, 0, 0, .9);
}
.paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: radial-gradient(ellipse at 80% 10%, rgba(255, 255, 255, .35), transparent 50%), radial-gradient(ellipse at 10% 100%, rgba(160, 120, 70, .12), transparent 60%);
}
.w { font: 400 20px/34px var(--hand); color: #3b2a20; }
.w.gap { margin-top: 34px; }
.w--big { font-size: 23px; }
.w--aside { color: #8a4a2a; }

/* ink: each character fades in on its own delay */
.w .wd { display: inline-block; white-space: nowrap; }
.w .c  { opacity: 0; }
.w.writing .c { animation: ink .55s var(--ease-soft) forwards; animation-delay: var(--d, 0ms); }
.w.done .c    { opacity: 1; animation: none; }
@keyframes ink { from { opacity: 0; filter: blur(1.5px); } to { opacity: 1; filter: none; } }

.letter-next {
  margin: 32px 0 6px; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 1.4s .4s;
}
.letter-next.show { opacity: 1; pointer-events: auto; }


/* ==========================================================================
   CONFESSION — the climax. Warm light and text. Nothing else.
   ========================================================================== */
.scene--confession { background: #0e0a08; }
.glow {
  position: absolute; left: -25%; right: -25%; bottom: -28%; height: 72%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(222, 160, 100, .3), rgba(222, 160, 100, .08) 45%, transparent 70%);
  animation: breathe 10s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .65; } to { opacity: 1; } }
.scene--confession .say { color: #f1e6d4; }
.scene--confession .say--soft { color: rgba(241, 230, 212, .6); }
.scene--confession .say--deva { font-size: 24px; color: #f0d29b; }


/* ==========================================================================
   THE BIRTHDAY LETTER — full-page paper
   ========================================================================== */
.scene--birthday {
  background:
    radial-gradient(ellipse at 50% 28%, #fdf8ec 0%, #f4e8cf 60%, #e8d5af 100%);
  color: var(--ink);
}
.bday-title { font: italic 500 40px/1.12 var(--serif); color: var(--brown); text-wrap: balance; }
.bday-say {
  font: 400 23px/1.5 var(--hand);
  color: #46301f;
  max-width: 19em;
  text-wrap: balance;
}
.bday-say--strong { color: #7a3f24; }
.wish { font: italic 500 30px/1.15 var(--serif); color: var(--brown-soft); }
.bday-deva { font: 400 28px/1.75 var(--hand); color: #7a3f24; }


/* ==========================================================================
   FINAL
   ========================================================================== */
.scene--final {
  background:
    radial-gradient(ellipse 80% 45% at 50% 34%, rgba(214, 176, 104, .17), transparent 70%),
    radial-gradient(ellipse 100% 40% at 50% 115%, rgba(239, 170, 130, .15), transparent 70%),
    var(--midnight);
}
.scene--final .beat { gap: .55em; }
.fin-title { font: italic 500 42px/1.1 var(--serif); color: var(--gold-soft); text-wrap: balance; }
.fin-sub   { font: 400 20px/1.5 var(--serif); color: var(--light-dim); max-width: 17em; text-wrap: balance; }
.fin-deva  { font: 400 25px/1.7 var(--deva); color: var(--light); margin-top: .3em; }
.fin-say   { font: italic 400 23px/1.35 var(--serif); color: var(--light); }
.fin-sign  { font: 400 23px/1.3 var(--hand); color: var(--peach); margin-top: .5em; }
.fin-voice { margin-top: 14px; }
.fin-foot  { display: flex; align-items: center; gap: 4px; margin-top: 10px; }

.voice-btn {
  min-height: 50px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(239, 194, 162, .35);
  background: rgba(239, 194, 162, .08);
  color: var(--peach);
  font: 400 16px/1.2 var(--sans);
  transition: background .3s, transform .2s;
}
.voice-btn:active { transform: scale(.97); }
.voice-btn__wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.voice-btn__wave i { width: 2.5px; height: 6px; border-radius: 2px; background: currentColor; opacity: .8; }
.voice-btn.is-playing .voice-btn__wave i { animation: wave 1s ease-in-out infinite; }
.voice-btn.is-playing .voice-btn__wave i:nth-child(2) { animation-delay: .15s; }
.voice-btn.is-playing .voice-btn__wave i:nth-child(3) { animation-delay: .3s; }
.voice-btn.is-playing .voice-btn__wave i:nth-child(4) { animation-delay: .45s; }
@keyframes wave { 50% { height: 16px; } }

.secret-heart {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--peach);
  font-size: 13px;
  opacity: calc(.32 + var(--n, 0) * .12);
  transform: scale(calc(1 + var(--n, 0) * .1));
  transition: opacity .3s, transform .3s var(--ease);
}
.secret-heart.beat-once { animation: heartbeat .35s var(--ease); }
@keyframes heartbeat { 40% { scale: 1.35; } }


/* ---------- overlay: the secret ---------- */
.secret { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end; }
.secret__backdrop { position: absolute; inset: 0; background: rgba(5, 7, 12, .7); opacity: 0; transition: opacity .5s; }
.secret__sheet {
  position: relative;
  padding: 34px var(--gutter) calc(var(--safe-b) + 28px);
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #fbf4e5, #f1e3c7);
  color: var(--ink);
  text-align: center;
  transform: translateY(100%);
  transition: transform .7s var(--ease);
}
.secret.is-visible .secret__backdrop { opacity: 1; }
.secret.is-visible .secret__sheet { transform: none; }
.secret__l {
  margin-bottom: 12px;
  font: 400 22px/1.45 var(--hand);
  opacity: 0;
  transition: opacity .9s var(--d, 0ms);
}
.secret__l--small { font-size: 19px; color: #7a3f24; }
.secret.is-visible .secret__l { opacity: 1; }
.secret .btn { margin-top: 10px; }

.noscript { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; font: 400 18px/1.5 var(--sans); color: var(--light); }


/* ==========================================================================
   Small phones
   ========================================================================== */
@media (max-height: 700px) {
  .say { font-size: 22px; }
  .say--lg { font-size: 27px; }
  .say--deva { font-size: 21px; }
  .title-main { font-size: 34px; }
  .chapter-head--compact .chapter-title { font-size: 29px; }
  .lesson__body > span > span { font-size: 18px; }
  .bday-say { font-size: 21px; }
  .bday-title, .fin-title { font-size: 34px; }
  .photo--small { width: min(46%, 170px); }
  .fin-sub { font-size: 18px; }
  .fin-deva { font-size: 22px; }
}
@media (max-width: 350px) {
  .say { font-size: 21px; }
  .env { padding-right: 70px; }
  .env__title { font-size: 20px; }
}


/* ==========================================================================
   Reduced motion: keep the fades, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .line, .reveal, .rise, .stat, .exe__block, .photo.reveal, .lessons-next, .box-next { transform: none !important; }
  .grain, .light-leak, .glow, .radar i, .env--ready, .scroll-hint span { animation: none !important; }
  .photo__frame img { transform: none !important; }
}