/* ============================================================
   Tovrun — a continuous flight through a painted night sky
   ============================================================ */

:root {
  --cream: #F8F2E1;
  --cream-soft: #F5EFE0;
  --glow: 240, 222, 165;      /* warm starlight glow rgb */
  --page-bg: #04071a;
}

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

html, body {
  height: 100%;
  overflow: hidden;               /* the page never scrolls — the camera flies */
  background: var(--page-bg);
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: none;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #0a1130;
}

/* the living galaxy — WebGL layer between the painted sky and the text */
#galaxy {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- stations floating in depth ---------- */

#journey {
  position: fixed;
  inset: 0;
  pointer-events: none;
  perspective: 900px;
}

.station {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(92vw, 1100px);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* subtle local darkening so text stays readable against the bright galaxy */
.station::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 170%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5, 8, 24, 0.46), rgba(5, 8, 24, 0));
  z-index: -1;
  pointer-events: none;
}

/* stations that rest against the bright band get a deeper scrim */
#st-meaning::before,
#st-motto::before {
  background: radial-gradient(closest-side, rgba(5, 8, 24, 0.62), rgba(5, 8, 24, 0));
}

/* ---------- the wordmark  ⟡ʼtôv·rûn◈ ---------- */

.wordmark {
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--cream);
  white-space: nowrap;
  text-shadow:
    0 0 calc(14px * var(--glow-strength, 1)) rgba(var(--glow), 0.55),
    0 0 calc(42px * var(--glow-strength, 1)) rgba(var(--glow), 0.30),
    0 0 calc(110px * var(--glow-strength, 1)) rgba(var(--glow), 0.16);
}
.wordmark--large { font-size: clamp(44px, 9.5vw, 104px); }
.wordmark--small { font-size: clamp(30px, 4.4vw, 48px); }

/* ⟡ built as ✦ at 0.6em — never a fallback box; tucked close to the word,
   optically centered on the lowercase body of the letters */
.mk-star {
  font-size: 0.6em;
  vertical-align: 0.06em;
  margin-right: -0.02em;
  letter-spacing: 0;
}
.mk-apos { font-style: normal; }
.mk-dot { padding: 0 0.02em; }

/* ◈ built as a 0.465em bordered square rotated 45° */
.mk-diamond {
  position: relative;
  display: inline-block;
  width: 0.465em;
  height: 0.465em;
  border: 0.045em solid var(--cream);
  transform: rotate(45deg);
  margin-left: 0.06em;
  vertical-align: 0.01em;
  box-shadow:
    0 0 10px rgba(var(--glow), 0.5),
    inset 0 0 6px rgba(var(--glow), 0.25);
}
/* solid inner diamond, small gap between border and fill */
.mk-diamond::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--cream);
}

/* ---------- station 2 — the anatomy, stepped along the diagonal ---------- */

.station--anatomy { width: min(94vw, 1200px); height: 70vh; text-align: left; }

/* the anatomy container is always at full opacity (roots stage themselves),
   so it must NOT carry the big station scrim — that would darken station 1's
   wordmark from across the sky. Each root carries its own local scrim instead. */
.station--anatomy::before { content: none; }
.root::before {
  content: '';
  position: absolute;
  inset: -40% -22%;
  background: radial-gradient(closest-side, rgba(5, 8, 24, 0.5), rgba(5, 8, 24, 0));
  z-index: -1;
  pointer-events: none;
}

.root {
  position: absolute;
  white-space: nowrap;
  transform-origin: left bottom;   /* each root scales in place through its own depth */
  will-change: transform, opacity, filter;
  text-shadow:
    0 0 14px rgba(var(--glow), 0.5),
    0 0 44px rgba(var(--glow), 0.25);
}
.root-1 { left: 30%; bottom: 30%; }   /* rests lower-left of center, close in */
.root-2 { left: 41%; bottom: 48%; }   /* midpoint of the diagonal */
.root-3 { left: 53%; bottom: 62%; }   /* full moment passes through upper-center */

.root-word { font-weight: 600; color: var(--cream); }
.root-1 .root-word { font-size: clamp(40px, 6.6vw, 72px); }
.root-2 .root-word { font-size: clamp(34px, 5.5vw, 60px); }
.root-3 .root-word { font-size: clamp(30px, 4.6vw, 50px); }

.root-meaning {
  margin-left: 0.7em;
  color: var(--cream-soft);
  opacity: 0.85;
}
.root-1 .root-meaning { font-size: clamp(16px, 2.4vw, 27px); }
.root-2 .root-meaning { font-size: clamp(15px, 2.2vw, 25px); }
.root-3 .root-meaning { font-size: clamp(14px, 2.0vw, 23px); }

/* ---------- station 3 — the meaning ---------- */

.literally {
  font-size: clamp(15px, 2.1vw, 24px);
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--cream-soft);
  opacity: 0.6;
  margin-bottom: 0.3em;   /* tight lockup with "Enduring Good" — one dictionary entry */
}
.meaning {
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-shadow:
    0 0 14px rgba(var(--glow), 0.55),
    0 0 46px rgba(var(--glow), 0.3),
    0 0 120px rgba(var(--glow), 0.15);
}

/* ---------- station 4 — the motto ---------- */

.motto {
  margin-top: 1em;
  font-size: clamp(11px, 1.76vw, 19px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  line-height: 1.75;
  text-shadow:
    0 0 10px rgba(var(--glow), 0.7),
    0 0 32px rgba(var(--glow), 0.45),
    0 0 90px rgba(var(--glow), 0.25),
    0 0 170px rgba(var(--glow), 0.12);
}

/* a thin line of dawn light beneath the motto — brightest at center,
   tapering to nothing at both ends. Light, not a border. */
.gold-line {
  width: min(31vw, 264px);
  height: 3px;
  margin: 1.1em auto 0;
  background: radial-gradient(ellipse closest-side,
    rgba(245, 230, 190, 0.95),
    rgba(245, 230, 190, 0.35) 55%,
    rgba(245, 230, 190, 0) 100%);
  box-shadow:
    0 0 12px 1px rgba(245, 230, 190, 0.4),
    0 0 36px 4px rgba(245, 230, 190, 0.18);
  animation: gold-breathe 5s ease-in-out infinite;
}
@keyframes gold-breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.sun-mark {
  width: 12px;
  height: 12px;
  margin: 1.1em auto 0;
  border-radius: 50%;
  background: rgba(245, 230, 190, 0.85);
  box-shadow:
    0 0 8px 2px rgba(245, 230, 190, 0.7),
    0 0 26px 8px rgba(245, 230, 190, 0.35),
    0 0 70px 22px rgba(245, 230, 190, 0.15);
  animation: sun-breathe 5s ease-in-out infinite;
}
@keyframes sun-breathe {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(245,230,190,0.7), 0 0 26px 8px rgba(245,230,190,0.35), 0 0 70px 22px rgba(245,230,190,0.15); }
  50%      { box-shadow: 0 0 10px 3px rgba(245,230,190,0.85), 0 0 34px 12px rgba(245,230,190,0.45), 0 0 90px 30px rgba(245,230,190,0.2); }
}

/* ---------- whisper & footer ---------- */

/* honest UI: a quiet interface pill floating over the scene — not artwork */
#whisper {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-style: normal;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(4, 7, 26, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(248, 242, 225, 0.15);
  border-radius: 999px;              /* stadium ends at any height */
  padding: 4.5px 18px;               /* slim caption strip, not a button */
  pointer-events: none;
  transition: opacity 0.6s ease;
}
/* the cue: a small white mote attached below the pill, slowly falling */
#whisper::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation: cue-fall 2.8s ease-in infinite;
}
@keyframes cue-fall {
  0%   { transform: translateY(0);    opacity: 0; }
  16%  { opacity: 0.8; }
  70%  { opacity: 0.3; }
  100% { transform: translateY(13px); opacity: 0; }
}
#whisper.gone { opacity: 0 !important; }
#whisper.gone::after { animation: none; opacity: 0; }

#footer-line {
  position: fixed;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--cream-soft);
  opacity: 0;
  transition: opacity 2.4s ease;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(4, 7, 26, 0.95), 0 0 4px rgba(4, 7, 26, 0.9);
}
#footer-line.visible { opacity: 0.5; }

/* ---------- reduced motion: gentle crossfades instead of flight ---------- */

@media (prefers-reduced-motion: reduce) {
  .station { transition: opacity 1.4s ease; transform: translate(-50%, -50%) !important; filter: none !important; }
  .sun-mark, .gold-line, #whisper { animation: none; }
  #whisper::after { display: none; }   /* still hint text, no motion */
}