/* The Story of Light — scroll film. Shares the brand system of ../styles.css
   but is intentionally self-contained (one canvas world + a text layer). */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0E0C0A;
  --gold: #EDB64A;
  --gold-soft: #E9BA64;
  --cream: #F5EBD8;
  --ivory: #F7F2EA;
  --taupe: #A89A86;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Poppins", -apple-system, sans-serif;
  --axes: "opsz" 144, "SOFT" 0, "WONK" 0;
  --ease: cubic-bezier(0.22, 0.61, 0.2, 1);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}

.microlabel {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
}
em.g { font-style: italic; color: var(--gold-soft); }

/* ------------------------------------------------------------ loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--night);
  display: grid;
  place-content: center;
  gap: 14px;
  justify-items: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-glyph {
  font-size: 30px;
  color: var(--gold);
  animation: glyphPulse 1.6s ease-in-out infinite;
}
.loader-count {
  font-family: var(--serif);
  font-variation-settings: var(--axes);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold-soft);
  min-height: 1.4em;
}
@keyframes glyphPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* ------------------------------------------------------------ plates */
/* Ghosted cinematic memories behind the particle world. Edges melt into
   night via mask; opacity + drift are driven by scroll in story.js. */
.plates {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  -webkit-mask-image: radial-gradient(82% 82% at 50% 50%, rgba(0, 0, 0, 1) 26%, transparent 78%);
  mask-image: radial-gradient(82% 82% at 50% 50%, rgba(0, 0, 0, 1) 26%, transparent 78%);
  will-change: opacity, transform;
}

/* ------------------------------------------------------------ world */
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.wash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(90% 90% at 50% 60%, rgba(237, 182, 74, 0.16), transparent 65%);
  opacity: 0;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ narrative */
/* keeps white narrative legible over bright light bursts: a soft dark band
   that dims only the vertical center (behind the text) while the burst still
   blazes above and below */
.text-scrim {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 26%,
    rgba(14, 12, 10, 0.44) 41%,
    rgba(14, 12, 10, 0.44) 60%,
    transparent 75%);
}
.lines {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.sline {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 88vw);
  margin: 0;
  transform: translate(-50%, -50%) translateY(24px);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.sline.serif {
  font-family: var(--serif);
  font-variation-settings: var(--axes);
  font-weight: 470;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.25;
  color: var(--ivory);
  text-wrap: balance;
  /* per-glyph dark halo so words read on any background */
  text-shadow: 0 1px 3px rgba(14, 12, 10, 0.6),
               0 0 26px rgba(14, 12, 10, 0.9),
               0 0 64px rgba(14, 12, 10, 0.6);
}
.sline.lg { font-size: clamp(2rem, 4.4vw, 3.9rem); }
.sline.eyebrow {
  font-family: var(--serif);
  font-variation-settings: var(--axes);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--gold-soft);
  transform: translate(-50%, -50%) translateY(-72px);
  text-shadow: 0 0 20px rgba(14, 12, 10, 0.85);
}

/* ------------------------------------------------------------ CTA */
.story-cta {
  position: fixed;
  left: 50%;
  top: 62%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.story-cta.on { opacity: 1; pointer-events: auto; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn-gold {
  background: linear-gradient(180deg, #F0C167, #E2A93C);
  color: #201404;
  box-shadow: 0 10px 30px -12px rgba(237, 182, 74, 0.55);
}
.btn-gold:hover { transform: translateY(-1px); }
.btn-ghost {
  border: 1px solid rgba(233, 186, 100, 0.35);
  color: var(--ivory);
}
.btn-ghost:hover { border-color: rgba(233, 186, 100, 0.7); }

/* ------------------------------------------------------------ rail + bar */
.rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  gap: 14px;
}
.rail button {
  width: 22px;
  height: 22px;
  padding: 7.5px;
  border: 0;
  border-radius: 50%;
  background: rgba(233, 186, 100, 0.28);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.rail button.on {
  background: var(--gold);
  background-clip: content-box;
  transform: scale(1.25);
}

.bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 18px max(28px, env(safe-area-inset-left));
}
.bar-brand img { height: 30px; width: auto; display: block; }
.bar-right { display: flex; align-items: center; gap: 22px; }
.sound-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 11px 6px;
  min-height: 44px;
  cursor: pointer;
  color: var(--taupe);
  transition: color 0.3s var(--ease);
}
.sound-toggle:hover { color: var(--cream); }
.sound-ico { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-ico i {
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
  transition: height 0.3s var(--ease), background-color 0.3s var(--ease);
}
.sound-toggle.on { color: var(--gold-soft); }
.sound-toggle.on .sound-ico i { animation: eq 0.9s ease-in-out infinite; }
.sound-ico i:nth-child(2) { animation-delay: 0.15s; }
.sound-ico i:nth-child(3) { animation-delay: 0.3s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .sound-toggle { display: none; } }
.bar-hint { animation: hintFade 2.4s ease-in-out infinite; }
.bar-hint.gone { display: none; }
@keyframes hintFade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ------------------------------------------------------------ scroll length */
.spacer { height: 2400vh; }

/* touch devices: shorter thumb-marathon + 44px tap targets (all timing is
   progress-relative, so the whole film rescales automatically) */
@media (pointer: coarse) {
  .spacer { height: 1600vh; }
  .rail { gap: 6px; }
  .rail button { width: 40px; height: 40px; padding: 16.5px; }
}

/* ------------------------------------------------------------ static fallback */
.static-story {
  display: none;
  width: min(720px, 90vw);
  margin: 0 auto;
  padding: 140px 0 120px;
  text-align: center;
}
.static-story h1,
.static-story .serif {
  font-family: var(--serif);
  font-variation-settings: var(--axes);
  font-weight: 470;
  color: var(--ivory);
}
.static-story h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; }
.static-story .serif { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.5; margin: 34px 0; }
.static-story .lg { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.static-story .eyebrow { margin-bottom: 20px; }
.static-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 48px;
}

@media (prefers-reduced-motion: reduce) {
  #world, .wash, .lines, .story-cta, .rail, .spacer, .loader { display: none; }
  .static-story { display: block; }
}

@media (max-width: 760px) {
  .rail { right: 14px; }
  .story-cta { flex-direction: column; align-items: center; top: 58%; }
}