/* ------------------------------------------------------------------
   Per-chapter DOM styling & reveal states
   ------------------------------------------------------------------ */

/* ---------- the gate (chapter 00) ---------- */

#gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4vh;
  padding: 24px 24px calc(7vh + env(safe-area-inset-bottom));
  text-align: center;
  color: #E9EDF5;
  transition: opacity 1.8s var(--ease-exit), visibility 0s linear 1.8s;
}
#gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

#gate .gate-top {
  position: absolute;
  top: 16vh;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 2.4vh;
  align-items: center;
}
#gate .label { color: var(--ash); }
#gate h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.7rem, 7.4vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 17ch;
}
#gate .gate-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--ash);
}

#gate-btn {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E9EDF5;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#gate-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#gate-btn .ring-bg { stroke: rgba(124, 138, 160, 0.28); }
#gate-btn .ring-fg {
  stroke: var(--light-gold);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
#gate .gate-hint {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ash);
}
#gate.is-simple #gate-btn::after {
  content: 'begin';
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- chapters ---------- */

.chapter { position: relative; }

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 24px;
}

.block {
  position: relative;
  max-width: 34ch;
  padding: 2.2rem 1.6rem;
}
@media (max-width: 640px) { .block { max-width: 26ch; } }

/* static radial scrim — a plain painted element, cheap and legible */
.block::before {
  content: '';
  position: absolute;
  inset: -16% -55%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 252, 244, 0.44), rgba(255, 252, 244, 0.22) 55%, transparent 80%);
  pointer-events: none;
}
.block.scrim-dark::before {
  background: radial-gradient(closest-side, rgba(7, 11, 21, 0.6), rgba(7, 11, 21, 0.36) 55%, transparent 80%);
}

.label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 18px rgba(255, 252, 244, 0.35);
}

.body p {
  font-size: clamp(1.12rem, 4.6vw, 1.45rem);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 1.3em;
  text-shadow: 0 1px 14px rgba(255, 252, 244, 0.3);
}
.body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .body p { max-width: 21ch; } }

/* dark chapters (05, 06) */
.is-dark-ch .label { color: var(--ash-dim); }
.is-dark-ch h2, .is-dark-ch .body p {
  color: #DDE3EE;
  text-shadow: 0 1px 16px rgba(7, 11, 21, 0.6);
}

/* ---------- line reveal ---------- */

.line { display: block; }
.line-i {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease),
    transform 1.15s var(--ease),
    filter 1.15s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.is-in .line-i { opacity: 1; transform: translateY(0); filter: blur(0); }
.w { display: inline-block; white-space: pre-wrap; }

/* ---------- chapter 05 — the silence ---------- */

#ch05 .stage { align-items: center; }
.beats { position: relative; width: 100%; max-width: 30ch; margin: 0 auto; }
.beat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  padding: 1.6rem;
}
.beat p, .beat h2 { margin: 0; }
.beat h2 { font-size: clamp(1.9rem, 8vw, 3rem); }
.beat p {
  font-size: clamp(1.12rem, 4.6vw, 1.4rem);
  line-height: 1.8;
  color: #D7DEEA;
}
.beat::before {
  content: '';
  position: absolute;
  inset: -30% -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(7, 11, 21, 0.6), rgba(7, 11, 21, 0.34) 55%, transparent 80%);
}

/* ---------- chapter 06 — two winters ---------- */

.counter {
  text-align: center;
  margin-bottom: 3rem;
}
.counter .days {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2.6rem, 12vw, 4rem);
  letter-spacing: 0.08em;
  color: #C9D3E4;
  font-variant-numeric: tabular-nums;
}
.counter .days-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin-top: 0.5rem;
}
.counter .season {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ash);
  margin-top: 1.4rem;
  min-height: 1.2em;
}

/* ---------- chapter 08 — the promises ---------- */

.promises { margin-top: 0.6rem; }
.promise {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 1.7rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.promise strong { font-weight: 400; }
.promise .p-daisy { width: 26px; height: 26px; margin-top: 4px; }
.p-daisy .d-petals {
  fill: none;
  stroke: var(--rose-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
.p-daisy .d-disc { fill: var(--daisy-disc); opacity: 0; transition: opacity 0.5s var(--ease) 0.7s; }
.is-in .p-daisy .d-petals { animation: daisy-draw 0.9s var(--ease) forwards; }
.is-in .p-daisy .d-disc { opacity: 1; }
@keyframes daisy-draw { to { stroke-dashoffset: 0; } }

/* ---------- chapter 09 — the ask ---------- */

.ask {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.1rem, 9.6vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 2.6rem;
}

/* Two answers. Identical size, identical weight, equal prominence.
   Nothing here moves, shrinks, dodges or plays tricks. Ever. */
.answers {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.answer {
  flex: 1 1 150px;
  max-width: 240px;
  min-height: 54px;
  padding: 14px 20px;
  border: 1px solid rgba(42, 35, 32, 0.45);
  border-radius: 2px;
  background: rgba(255, 252, 244, 0.72);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: background-color 0.6s var(--ease);
}
.answer:hover, .answer:active { background: rgba(255, 252, 244, 0.92); }
.answers-note {
  margin-top: 1.6rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.ending-line {
  min-height: 3.4em;
  margin-bottom: 3rem;
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  line-height: 1.7;
  font-style: italic;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
.ending-line.is-in { opacity: 1; transform: none; }

/* ---------- chapter 10 — the letter ---------- */

#ch10 .stage { flex-direction: column; gap: 2.4rem; padding-bottom: 18vh; }

.letter {
  max-width: 34rem;
  background: linear-gradient(175deg, #FFFDF6, #FBF3E0);
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(42, 35, 32, 0.28), 0 4px 18px rgba(42, 35, 32, 0.14);
  padding: clamp(1.8rem, 7vw, 3.2rem);
}
.letter p {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.55;
  color: #3A312B;
  margin-bottom: 1em;
}
.letter .sign { text-align: right; margin: 1.6em 0 0; font-size: 1.6rem; }

.letter-footer {
  display: flex;
  align-items: center;
  gap: 22px;
}
.letter-footer button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.letter-footer .garden-daisy svg { width: 22px; height: 22px; }

.garden-hint {
  max-width: 30ch;
  text-align: center;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.garden-hint.is-in { opacity: 1; }

/* ---------- the coda — not an ending ---------- */

.coda-block { text-align: center; }
.coda-block h2 { margin-bottom: 0.4rem; }
.coda-line {
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 2.6rem;
}
.coda-block .letter-footer { justify-content: center; }

.coda-daisy {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.8rem;
  overflow: visible;
}
.coda-daisy .cp {
  fill: var(--daisy-petal);
  fill-opacity: 0;
  stroke: var(--rose-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
  filter: drop-shadow(0 2px 6px rgba(169, 78, 104, 0.28));
}
.is-in .coda-daisy .cp {
  animation:
    cd-draw 1.1s var(--ease) forwards,
    cd-fill 0.9s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.12s), calc(var(--i) * 0.12s + 0.9s);
}
.coda-daisy .cd { fill: var(--daisy-disc); opacity: 0; transition: opacity 0.9s var(--ease) 2.1s; }
.is-in .coda-daisy .cd { opacity: 1; }
.is-in .coda-daisy { animation: cd-sway 6.5s ease-in-out 2.6s infinite alternate; transform-origin: 50% 58%; }
@keyframes cd-draw { to { stroke-dashoffset: 0; } }
@keyframes cd-fill { to { fill-opacity: 0.96; } }
@keyframes cd-sway {
  from { transform: rotate(-2.6deg); }
  to   { transform: rotate(2.6deg); }
}

.reduced-motion .coda-daisy .cp { animation: none; stroke-dashoffset: 0; fill-opacity: 0.96; }
.reduced-motion .coda-daisy .cd { opacity: 1; }
.reduced-motion .is-in .coda-daisy { animation: none; }

/* ---------- photos (optional polaroids) ---------- */

.photo {
  margin: 2.4rem auto 0;
  width: min(240px, 62vw);
  background: #FFFDF6;
  padding: 10px 10px 34px;
  box-shadow: 0 18px 44px rgba(42, 35, 32, 0.25);
  border-radius: 2px;
  transform: rotate(-2.2deg);
}
.photo img { width: 100%; border-radius: 1px; filter: sepia(0.12) saturate(0.94); }

/* ---------- no-JS ---------- */
noscript .noscript-note {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: #E9EDF5;
  background: var(--night-900);
  font-family: var(--font-sans);
}

/* ---------- reduced motion: static, beautifully typeset ---------- */

.reduced-motion .line-i,
.reduced-motion .ending-line {
  transform: none;
  filter: none;
  transition: opacity 1s ease;
}
.reduced-motion .beat {
  position: relative;
  opacity: 1;
  margin-bottom: 46vh;
}
.reduced-motion .beats { display: flex; flex-direction: column; }
.reduced-motion #hint { display: none; }
.reduced-motion .is-in .p-daisy .d-petals { animation: none; stroke-dashoffset: 0; }