/* ============================================================
   The Moth Who Mapped the Moon — one unbroken illustrated night
   Palette: Midnight Bell #0E1030 · Dusk Indigo #2A2D5F
            Undertow #1F3D63 · Meadow Fir #173A38
            Lantern Gold #EFB65E · Moth Cream #F4EAD2
   ============================================================ */

:root {
  --midnight: #0E1030;
  --indigo:   #2A2D5F;
  --undertow: #1F3D63;
  --fir:      #173A38;
  --gold:     #EFB65E;
  --cream:    #F4EAD2;
  --candle:   #FFE2A8;
  --silk:     #C9CFEF;
  --ink:      rgba(11, 12, 38, .55);
  --disp: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --serif: 'Alegreya', 'Iowan Old Style', Georgia, serif;
  --caps: 'Alegreya SC', 'Alegreya', Georgia, serif;
  --soft: "SOFT" 100, "WONK" 1;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--midnight);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--midnight); }

html { scrollbar-width: thin; scrollbar-color: rgba(244,234,210,.22) rgba(14,16,48,.6); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #0B0C26; }
::-webkit-scrollbar-thumb { background: rgba(244,234,210,.2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(239,182,94,.45); }

:focus-visible {
  outline: 2px dashed var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ============================ STAGE ============================ */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.js #stage { opacity: 0; transition: opacity 1.8s var(--ease) .15s; }
.js.loaded #stage { opacity: 1; }

#sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #131543 0%, #2A2D5F 48%, #41386B 78%, #5A4470 100%);
}

#celestial, #fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layer { position: absolute; inset: 0; will-change: transform; }

.layer svg {
  position: absolute;
  bottom: 0;
  display: block;
}

/* geometry: each layer is sized by viewport height and anchored so the
   cover composition frames itself at every aspect ratio */
#far svg  { height: 100vh; width: auto; left: calc(78vw - 127vh); }
#mid svg  { height: 100vh; width: auto; left: calc(30vw - 57vh); }
#near svg { height: 40vh;  width: auto; left: calc(10vw - 14.4vh); }

.wave { animation: waveX 11s ease-in-out infinite alternate; }
.w2 { animation-duration: 15s; animation-delay: -4s; }
.w3 { animation-duration: 19s; animation-delay: -9s; }
@keyframes waveX { from { transform: translateX(0); } to { transform: translateX(-64px); } }

.lamp-glint { animation: shimmer 5.5s ease-in-out infinite alternate; }
@keyframes shimmer {
  from { opacity: .55; }
  to { opacity: .95; }
}
#lampGlow { animation: lampbreathe 6s ease-in-out infinite; }
@keyframes lampbreathe {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

.owl-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 7.5s infinite;
}
.owl-eye + .owl-eye { animation-delay: .05s; }
@keyframes blink {
  0%, 91%, 100% { transform: scaleY(1); }
  94.5% { transform: scaleY(.06); }
}

/* ---------------------------- Etta ---------------------------- */

#moth {
  position: absolute;
  left: 0; top: 0;
  width: 118px; height: 118px;
  margin: -59px 0 0 -59px;
  will-change: transform;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
#moth.ready { opacity: 1; }

/* wings hinge at their roots (fill-box is local — no view-box origin
   ambiguity), so the flap sweeps from the body and the landed fold
   tucks the wings against her sides instead of displacing them */
#moth .wing {
  transform-box: fill-box;
  animation: flap var(--flap, .5s) ease-in-out infinite;
}
#moth .wingL { transform-origin: 100% 50%; }
#moth .wingR { transform-origin: 0% 50%; }
#moth.landed .wing {
  animation: none;
  transform: scaleX(.22);
  transition: transform 1.1s var(--ease);
}

@keyframes flap {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.32); }
}

#vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 100% at 50% 42%, transparent 52%, rgba(5,6,20,.52) 100%);
}
#vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
}

/* constellation labels + silk (elements created by JS) */
.const-line {
  fill: none;
  stroke: var(--silk);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  filter: drop-shadow(0 0 3px rgba(201, 207, 239, .55));
}
.const-label {
  font-family: var(--caps);
  fill: var(--silk);
  letter-spacing: 2.5px;
  opacity: 0;
}
.tw { animation: twinkle var(--twd, 3.4s) ease-in-out var(--twD, 0s) infinite; }
@keyframes twinkle {
  0%, 100% { opacity: var(--two, .9); }
  50% { opacity: .18; }
}

/* ============================ RAIL ============================ */

#rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
}
#rail::before {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px; left: 50%;
  border-left: 1px dashed rgba(244, 234, 210, .22);
}
#rail a {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  opacity: .56;
  background: var(--midnight);
  transition: opacity .4s ease, transform .4s var(--ease);
}
#rail a:hover { opacity: 1; transform: scale(1.25); }
#rail a.current {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(239, 182, 94, .8));
}
#rail a svg { display: block; }

/* ====================== STORY COLUMN ====================== */

header#cover, main, footer#colophon { position: relative; z-index: 1; }

#cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.3rem;
  padding: 4vh 6vw 10vh;
}

.eyebrow {
  font-family: var(--caps);
  color: var(--gold);
  font-size: clamp(.82rem, 1.1vw, .98rem);
  letter-spacing: .34em;
  margin-left: .34em; /* optically recenter tracked caps */
}

h1 {
  font-family: var(--disp);
  font-variation-settings: var(--soft);
  font-weight: 540;
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: .01em;
  text-shadow: 0 2px 40px rgba(5, 6, 20, .6);
}
h1 em {
  font-style: italic;
  color: var(--gold);
}

.byline {
  font-style: italic;
  color: rgba(244, 234, 210, .82);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  line-height: 1.55;
  max-width: 34em;
}

.covermeta {
  font-family: var(--caps);
  font-size: .82rem;
  letter-spacing: .2em;
  color: rgba(244, 234, 210, .55);
}

.begin {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--caps);
  font-size: .95rem;
  letter-spacing: .22em;
  color: var(--gold);
  text-decoration: none;
  border: 1px dashed rgba(239, 182, 94, .55);
  border-radius: 999px;
  padding: .85em 1.7em .8em;
  transition: background .5s ease, border-color .5s ease, transform .5s var(--ease);
}
.begin:hover {
  background: rgba(239, 182, 94, .12);
  border-style: solid;
  border-color: rgba(239, 182, 94, .9);
  transform: translateY(-2px);
}
.begin svg { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

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

.plate {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.15rem;
  padding: 0 6vw;
  background: radial-gradient(ellipse 46% 34% at 50% 50%, rgba(10, 11, 38, .5), transparent 72%);
}

.caps {
  font-family: var(--caps);
  color: var(--gold);
  letter-spacing: .3em;
  margin-left: .3em;
  font-size: clamp(.85rem, 1.1vw, 1rem);
}

.plate-moon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 9px rgba(239, 182, 94, .55));
}
.js .plate .plate-moon {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .plate.in .plate-moon { opacity: 1; transform: none; }

.plate h2 {
  font-family: var(--disp);
  font-variation-settings: var(--soft);
  font-style: italic;
  font-weight: 470;
  font-size: clamp(1.75rem, 3.6vw, 2.7rem);
  line-height: 1.15;
  max-width: 18em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(5, 6, 20, .65);
}

.orn { width: 132px; color: var(--gold); opacity: .9; }

.beat {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 6vw;
}
.beat.low { align-items: flex-end; min-height: 66vh; padding-bottom: 5vh; }
.beat.left { justify-content: flex-start; padding-left: 8vw; }

.panel {
  max-width: 33em;
  background: linear-gradient(180deg, rgba(13, 14, 44, .6), rgba(10, 11, 38, .48));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(244, 234, 210, .09);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.7rem, 3.4vw, 2.5rem);
  box-shadow: 0 22px 70px rgba(5, 6, 20, .38);
}

.panel p {
  font-size: clamp(1.17rem, 1.02rem + .55vw, 1.42rem);
  line-height: 1.7;
  color: #F1E8D4;
}
.panel p + p { margin-top: 1em; }

.beat.first .panel p::first-letter {
  font-family: var(--disp);
  font-variation-settings: var(--soft);
  font-weight: 560;
  font-size: 3.35em;
  float: left;
  line-height: .78;
  padding: .06em .14em 0 0;
  color: var(--gold);
}

.star-name {
  font-family: var(--caps);
  color: var(--silk);
  letter-spacing: .06em;
  border-bottom: 1px dashed rgba(201, 207, 239, .42); /* the silk lines, in the prose */
  padding-bottom: .06em;
}

/* --------------------------- the end --------------------------- */

#the-end {
  min-height: 145vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 1.5rem;
  padding: 0 6vw 20vh;
}
#the-end .orn { opacity: .75; }
.theend { font-size: 1.1rem; letter-spacing: .5em; margin-left: .5em; }
.whisper {
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.62rem);
  line-height: 1.6;
  text-wrap: balance;
  color: rgba(244, 234, 210, .92);
}
.again {
  margin-top: .8rem;
  font-family: var(--caps);
  font-size: .88rem;
  letter-spacing: .2em;
  color: rgba(239, 182, 94, .85);
  text-decoration: none;
  border-bottom: 1px dashed rgba(239, 182, 94, .5);
  padding-bottom: .35em;
  transition: color .4s ease, border-color .4s ease;
}
.again:hover { color: var(--candle); border-bottom-style: solid; border-color: var(--candle); }

#colophon {
  text-align: center;
  padding: 1rem 6vw 4rem;
  font-family: var(--caps);
  font-size: .82rem;
  letter-spacing: .14em;
  color: rgba(244, 234, 210, .62);
  text-shadow: 0 1px 14px rgba(5, 6, 20, .8);
}

/* ================== reveal choreography ================== */

.js .panel {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js .beat.in .panel { opacity: 1; transform: none; }

.js .plate .caps, .js .plate h2, .js .plate .orn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .plate.in .caps { opacity: 1; transform: none; transition-delay: .05s; }
.js .plate.in h2 { opacity: 1; transform: none; transition-delay: .22s; }
.js .plate.in .orn { opacity: .9; transform: none; transition-delay: .45s; }

.js #the-end > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js #the-end.in > * { opacity: 1; transform: none; }
.js #the-end.in .theend { transition-delay: .25s; }
.js #the-end.in .whisper { transition-delay: .55s; }
.js #the-end.in .again { transition-delay: 1s; }

/* cover load sequence */
.js #cover > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.js.loaded #cover > * { opacity: 1; transform: none; }
.js.loaded #cover .eyebrow { transition-delay: .55s; }
.js.loaded #cover h1 { transition-delay: .75s; }
.js.loaded #cover .byline { transition-delay: 1.05s; }
.js.loaded #cover .covermeta { transition-delay: 1.25s; }
.js.loaded #cover .begin { transition-delay: 1.65s; }

/* ======================= responsive ======================= */

@media (max-width: 980px) {
  .beat.left { justify-content: center; padding-left: 6vw; }
  #rail { display: none; }
}

@media (max-width: 700px) {
  #near svg { left: calc(6vw - 14.4vh); }
  #mid svg { left: calc(14vw - 63vh); } /* oak (and its owl's eyes) clear of cover text */
  #cover {
    background: radial-gradient(ellipse 105% 60% at 50% 46%, rgba(10, 11, 38, .55), transparent 78%);
  }
  .beat { min-height: 52vh; }
  .panel { border-radius: 16px; }
  .panel p { line-height: 1.66; }
  #moth { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
}

/* ==================== reduced motion ==================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave, .owl-eye, #moth .wing, .begin svg, .tw,
  .lamp-glint, #lampGlow { animation: none !important; }
  .js .panel, .js .plate .caps, .js .plate h2, .js .plate .orn,
  .js .plate .plate-moon, .js #cover > *, .js #the-end > * {
    transform: none !important;
    transition-duration: .4s !important;
  }
  .js #stage { transition-duration: .6s; }
}