/* ─────────────────────────────────────────────────────────────
   The Consciousness Atlas — Story Front Door
   Pure black. Three sizes of type doing three jobs.
   Vertical scroll-snap. One moment per screen.
   ───────────────────────────────────────────────────────────── */

:root {
  --story-bg: #000;
  --ink-loud: rgba(255, 255, 255, 1);
  --ink-mid: rgba(255, 255, 255, 0.72);
  --ink-soft: rgba(245, 246, 250, 0.55);
  --ink-fine: rgba(255, 255, 255, 0.34);
  --accent-elephant: #00E5CC;
  --accent-orca: #22D3EE;
  --accent-anthony: #F5C76A;
  --accent-bones: #C9D1D9;
  --accent-reframe: #BE94F7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--story-bg);
  color: var(--ink-loud);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

/* scroll-snap on body so the unified nav (in document flow) sits above
   the snap container without interfering. */
body {
  min-height: 100vh;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

/* Float the unified nav over the scroll container so it doesn't break snap math.
   unified-nav.js injects its own stylesheet that pins the wrapper to relative,
   so we override the inner .unified-nav bar to position:fixed instead. */
.unified-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10001 !important;
}

#unified-nav {
  /* Reserve the 48px the fixed nav now occupies so beats don't slide under it. */
  height: 48px;
}

/* Soft film-grain overlay so the black isn't dead-flat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.035;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.3) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 1px, transparent 1.5px);
  background-size: 3px 3px, 4px 4px, 5px 5px;
  mix-blend-mode: screen;
}

/* ─── Section frame ───────────────────────────────────────── */

.beat {
  position: relative;
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 8vh clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.beat.in-view { opacity: 1; }

.beat-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;
}

/* Each beat anchors text to its own zone — never centered, never composed */
.beat--left .beat-inner { padding-right: 38%; }
.beat--right .beat-inner { padding-left: 38%; }
.beat--center .beat-inner { text-align: center; }

@media (max-width: 820px) {
  .beat--left .beat-inner,
  .beat--right .beat-inner { padding: 0; }
}

/* ─── Typography hierarchy — the spine ────────────────────── */

.story-headline {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.8vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--ink-loud);
  margin: 0;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.06);
}

.story-headline em {
  font-style: normal;
  display: block;
}

.story-body {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-mid);
  margin: 2.2rem 0 0;
  max-width: 38rem;
}

.story-pullquote {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 2.2rem 0 0;
  max-width: 36rem;
  padding: 0;
  border: none;
}

.story-pullquote::before {
  content: '— ';
  color: var(--ink-fine);
}

.story-pullquote::after {
  content: ' —';
  color: var(--ink-fine);
}

.story-footnote {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6rem, 0.78vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fine);
  line-height: 1.7;
  margin-top: clamp(2.2rem, 5vh, 4rem);
  max-width: 34rem;
}

.story-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-fine);
  margin: 0 0 1.5rem;
}

/* ─── Sequential scroll-revealed lines (Beats 3 + 5) ─────── */

.story-sequence {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vh, 5rem);
}

.story-step {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.4;
  color: var(--ink-mid);
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-step.revealed {
  opacity: 1;
  transform: translateY(0);
}

.story-step--final {
  font-family: 'Cinzel', Georgia, serif;
  font-style: normal;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--ink-loud);
  letter-spacing: 0.02em;
  margin-top: 1rem;
}

/* ─── Socratic questions — the page asking, not telling ──── */
/* Italic Cormorant = inquiry. The reader learns the grammar:
   italic asks a question; upright serif states a cited fact.
   No opacity set here — when a question is also a .story-step it
   must keep inheriting the sequence reveal. */
.story-question {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  margin: clamp(1.8rem, 4vh, 3rem) 0 0;
  max-width: 34rem;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
}

/* Centered beats (opening, --center) need the capped block centered too */
.beat-opening .story-question,
.beat--center .story-question {
  margin-left: auto;
  margin-right: auto;
}

/* The turn — the loudest question on the page */
.story-question--final {
  font-size: clamp(2.1rem, 4.4vw, 3.8rem);
  color: var(--ink-loud);
  margin-top: 0;
}

/* ─── Silhouettes — off-center, charcoal ─────────────────── */

.story-silhouette {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 2.6s cubic-bezier(0.16, 1, 0.3, 1);
  animation: silhouette-breathe 9s ease-in-out infinite alternate;
  /* SVGs come with fill="#000". Invert them to white, drop opacity to taste,
     then use a coloured drop-shadow to give each silhouette its species accent. */
  filter: invert(1) brightness(1.4);
}

.beat.in-view .story-silhouette { opacity: 0.6; }

@keyframes silhouette-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.018); }
}

/* Per-beat silhouette positioning + accent glow */
.silhouette-elephant {
  width: clamp(22rem, 38vw, 38rem);
  right: clamp(2rem, 8vw, 8rem);
  top: 50%;
  margin-top: -16vh;
  filter: invert(1) brightness(1.3) drop-shadow(0 0 40px rgba(0, 229, 204, 0.35));
}

.silhouette-orca {
  width: clamp(18rem, 32vw, 32rem);
  right: clamp(2rem, 12vw, 10rem);
  bottom: 12vh;
  filter: invert(1) brightness(1.3) drop-shadow(0 0 40px rgba(34, 211, 238, 0.4));
}

.silhouette-bones {
  width: clamp(16rem, 28vw, 26rem);
  left: clamp(2rem, 8vw, 8rem);
  bottom: 14vh;
  filter: invert(1) brightness(1.2) drop-shadow(0 0 35px rgba(201, 209, 217, 0.3));
}

.beat.in-view .silhouette-elephant { opacity: 0.7; }
.beat.in-view .silhouette-orca { opacity: 0.78; }
.beat.in-view .silhouette-bones { opacity: 0.55; }

@media (max-width: 820px) {
  .story-silhouette {
    position: relative !important;
    width: 65vw !important;
    margin: 2rem auto !important;
    inset: auto !important;
    display: block;
  }
  .beat-inner > .story-silhouette { order: -1; }
  .beat { padding: 6vh 1.5rem; }
}

/* ─── Beat 0 — opening ────────────────────────────────────── */

.beat-opening {
  background: #000;
  align-content: center;
  text-align: center;
}

.beat-opening .story-headline {
  font-size: clamp(1.9rem, 5.2vw, 4.2rem);
}

.beat-opening .scroll-cue {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-fine);
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  animation: cue-emerge 1.2s 5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             cue-bob 2.8s 6.2s ease-in-out infinite;
}

@keyframes cue-emerge {
  to { opacity: 0.6; }
}

@keyframes cue-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ─── Beat 6 — atlas reveal / handoff ─────────────────────── */

.beat-handoff {
  text-align: center;
  align-content: center;
}

.beat-handoff .story-headline {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  color: var(--ink-loud);
}

.beat-handoff .story-body {
  margin: 1.4rem auto 0;
  text-align: center;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  max-width: 32rem;
}

.handoff-link {
  display: inline-block;
  margin-top: clamp(2.4rem, 5vh, 4rem);
  padding: 1.1rem 2.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-loud);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  text-decoration: none;
  transition: border-color 0.4s ease, background 0.4s ease, letter-spacing 0.4s ease;
}

.handoff-link:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.36em;
}

.handoff-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--ink-fine);
  margin: 2.4rem auto 0;
  border: none;
}

.handoff-coda {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  margin: 1.4rem auto 0;
  max-width: 32rem;
}

/* ─── Side beat-counter (subtle progress) ─────────────────── */

.beat-counter {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.beat-counter button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.4s ease, transform 0.4s ease;
}

.beat-counter button.active {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.6);
}

@media (max-width: 820px) {
  .beat-counter { display: none; }
}

/* ─── Video story layers (clips authored on pure black) ──────
   They arrive as a subject floating in a black void. mix-blend-mode:
   screen lets the black fall away over the obsidian page with zero
   matte work, so the creature appears to live inside the page itself.
   Opacity + parallax are driven by JS (scroll-linked), so these layers
   must NOT carry a CSS opacity transition or it fights the rAF fade. */
.story-video {
  mix-blend-mode: screen;       /* lifts the dark footage onto the obsidian field */
  object-fit: cover;
  background: transparent;
  animation: none;              /* the footage carries its own breath */
  transition: none;             /* JS owns the scroll-linked fade */
  will-change: opacity, transform;
  filter: none;                 /* never invert real footage, no rectangular halo */
  /* Centre the clip on the VISIBLE viewport band. Each beat snap-aligns its top
     to the top of the screen, but beats can be far taller than the viewport, so
     anchoring to the beat's own top/bottom drops the clip off-screen. 50vh keeps
     it in view whatever the beat's height. JS drives parallax via --cf-par so it
     never feeds back into the scroll-fade measurement. */
  top: 50vh;
  bottom: auto;
  margin-top: 0;
  transform: translateY(-50%) translate3d(0, var(--cf-par, 0px), 0);
  /* Feather every edge to nothing so the clip is a creature emerging from the
     dark, never a video in a box. The soft ellipse dissolves the frame entirely. */
  -webkit-mask-image: radial-gradient(ellipse 68% 70% at 50% 52%, #000 30%, rgba(0,0,0,0.55) 55%, transparent 76%);
          mask-image: radial-gradient(ellipse 68% 70% at 50% 52%, #000 30%, rgba(0,0,0,0.55) 55%, transparent 76%);
}

/* Beat 3 — the vigil procession as a full-bleed backplate behind the
   centered text. Radial mask feathers all four edges so the clip melts
   into the page with no rectangular seam. JS drives opacity + parallax. */
.beat-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: none;
  will-change: opacity, transform;
  transform: scale(1.12) translate3d(0, var(--cf-par, 0px), 0); /* headroom so drift never bares an edge */
  -webkit-mask-image: radial-gradient(125% 95% at 50% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(125% 95% at 50% 50%, #000 52%, transparent 100%);
}

/* ─── Reduce-motion respect ──────────────────────────────── */

/* On phones the clip stacks in document flow (handled by the .story-silhouette
   mobile rule), so the viewport-centring translateY(-50%) must be dropped — keep
   only the gentle parallax drift. */
@media (max-width: 820px) {
  .story-video {
    top: auto !important;
    bottom: auto !important;
    transform: translate3d(0, var(--cf-par, 0px), 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-silhouette { animation: none; }
  .scroll-cue { animation: none; opacity: 0.6; }
  .story-step { transition: opacity 0.3s ease; transform: none; }
  html { scroll-behavior: auto; }
  /* parallax off, but keep a gentle CSS fade so layers still ease in */
  .story-video, .beat-video-bg { transition: opacity 1.2s ease; }
}