/* The story on the home page. It sits inside the shared site shell (style.css), so colours,
   fonts, the menu, the top strip and the backdrop all come from there. Only the scene and
   the five chapters are styled here. */

.opening { text-align: center; padding-bottom: 1rem; }
.emblem { position: relative; width: min(100%, 22rem); margin: 0 auto 2rem; }
.emblem::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 100%);
}
.opening .hero { margin-bottom: 0; }
.opening h1 { font-size: clamp(2.2rem, 8.5vw, 3.1rem); }
#greeting { font-style: italic; font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
.opening .lede { max-width: 26rem; margin: 1.2rem auto 2rem; }
#hero-back .lede { margin-bottom: 0; }

/* artwork: drawn by story.js with currentColor */
.art-svg, .art svg {
  display: block; width: 100%; height: auto; overflow: visible;
  color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: var(--sw, 1);
  stroke-linecap: round; stroke-linejoin: round;
}
.fl { fill: currentColor; stroke: none; }
.ink { color: var(--ink); }

/* sky emblem motion */
.spin { animation: spin var(--dur, 120s) linear infinite; animation-delay: var(--delay, 0s); }
.spin.rev { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.twinkle { animation: twinkle-mark 4.5s ease-in-out infinite; }
@keyframes twinkle-mark {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.08); }
}
.glimmer { animation: glimmer var(--t, 6s) ease-in-out infinite; animation-delay: var(--w, 0s); }
@keyframes glimmer { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* chapters */
.chapters { padding-top: 1rem; }
.chapter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: min(82vh, 40rem);
  margin: 1.5rem 0;
  padding: 2.6rem 1rem;
  text-align: center; text-decoration: none; color: inherit;
  border: 1px solid transparent; border-radius: 1.2rem;
}
.chapter:hover { border-color: var(--line); }
.chapter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.num { color: var(--accent); font-family: var(--serif); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.3em; text-indent: 0.3em; }
:root[lang="hi"] .num { letter-spacing: 0; text-indent: 0; }
.art { width: min(100%, 17rem); margin: 1.4rem auto 1.6rem; }
.art.wide { width: min(100%, 22rem); }
.chapter h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 7vw, 2.2rem); font-weight: 300; line-height: 1.2; }
.story { max-width: 25rem; margin: 0.8rem auto 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; }
.plain { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.more {
  margin-top: 1.1rem; font-size: 0.9rem; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.closing { text-align: center; padding: 3rem 0 3rem; }
.closing .story { margin-bottom: 1.8rem; }

/* reveal, and paths that draw themselves (they use pathLength="1") */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.4s ease, transform 1.4s ease, border-color 0.5s ease;
}
.js [data-reveal].in { opacity: 1; transform: none; }

.draw { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.in .draw {
  animation: draw 2.4s cubic-bezier(0.45, 0, 0.25, 1) both;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  2% { opacity: var(--o, 1); }
  100% { stroke-dashoffset: 0; opacity: var(--o, 1); }
}
.pop { opacity: 0; }
.in .pop {
  animation: pop 1.6s ease both;
  animation-delay: calc(var(--base, 0s) + var(--i, 0) * 0.16s);
}
@keyframes pop { from { opacity: 0; } to { opacity: var(--o, 1); } }
.pulse { animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.halo { filter: drop-shadow(0 0 4px var(--accent)); }

@media (max-width: 400px) {
  .chapter { padding-inline: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spin, .twinkle, .glimmer, .pulse, .in .draw, .in .pop { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .draw { stroke-dashoffset: 0; opacity: var(--o, 1); }
  .pop { opacity: var(--o, 1); }
}

/* On the home page only, the night sky keeps its crescent moon and its twinkling stars. */
.landing .moon { display: block !important; }
.landing .star { opacity: var(--lo, 0.3); animation: twinkle var(--t, 5s) ease-in-out var(--d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { .landing .star { animation: none; } }