/* ===========================================
   NEXUS DIGITAL — Scroll Story hero
   Sticky stage inside a tall wrapper; unpins into #assessment.
   All selectors namespaced under #story.
   =========================================== */

#story { height: 760vh; position: relative; }

#story #stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  /* JS blends this from near-black to var(--bg) as the story hands off */
  background: #0a0c12;
}

#story #story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ambient nebula — lifts the black without competing with the story.
   Both layers fade near the end (JS drives the vars) so the stage floor
   flattens to the site background and the unpin seam disappears. */
#story #stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--story-nebula, 1);
  background:
    radial-gradient(ellipse 55% 45% at 78% 16%, rgba(124,58,237,0.14), transparent 65%),
    radial-gradient(ellipse 50% 42% at 12% 72%, rgba(69,137,255,0.11), transparent 65%),
    radial-gradient(ellipse 45% 38% at 55% 105%, rgba(164,54,147,0.09), transparent 70%);
}

/* soft vignette */
#story #stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--story-veil, 1);
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.5) 100%);
}

/* ── timeline rail: beat markers down the left edge ── */
#story #story-rail {
  position: absolute; left: 42px; top: 50%; transform: translateY(-50%);
  height: 46vh; z-index: 5; pointer-events: none;
  opacity: var(--story-rail, 1);
}
#story #story-rail .rail-line {
  position: absolute; left: 4px; top: 0; bottom: 0; width: 1px;
  background: rgba(238,242,248,0.12);
}
#story #story-rail .rail-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--blue-light, #4589ff), var(--purple, #7C3AED));
  box-shadow: 0 0 8px rgba(106,141,255,0.55);
}
#story #story-rail .rail-stop {
  position: absolute; left: 0; display: flex; align-items: center; gap: 14px;
  transform: translateY(-50%);
}
#story #story-rail .rail-stop i {
  display: block; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #232b47; border: 1px solid rgba(238,242,248,0.18);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
#story #story-rail .rail-stop span {
  font-family: 'Plus Jakarta Sans', var(--font);
  font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-muted, #5a6478); opacity: 0.55; white-space: nowrap;
  transition: color 0.35s, opacity 0.35s;
}
#story #story-rail .rail-stop.done i {
  background: var(--blue-light, #4589ff); border-color: transparent;
}
#story #story-rail .rail-stop.active i {
  background: #fff; border-color: transparent; transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(106,141,255,0.25), 0 0 14px rgba(106,141,255,0.8);
}
#story #story-rail .rail-stop.active span {
  color: var(--text, #eef2f8); opacity: 1;
}
@media (max-width: 900px) { #story #story-rail { display: none; } }

/* ── scroll hint ── */
#story #story-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: 'Plus Jakarta Sans', var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: 4px; color: var(--text-muted); text-transform: uppercase; z-index: 5;
  animation: storyHintPulse 2.2s ease-in-out infinite;
}
@keyframes storyHintPulse {
  0%, 100% { opacity: 0.35; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;    transform: translateX(-50%) translateY(6px); }
}

/* ── text beats ── */
#story .beat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 8vw;
  opacity: 0; pointer-events: none;
  z-index: 4;
  font-family: 'Plus Jakarta Sans', var(--font);
}

#story .beat h1 {
  font-size: clamp(2.2rem, 6.5vw, 5.2rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.5px;
  max-width: 1000px; color: var(--text);
  text-shadow: 0 2px 30px rgba(6,8,14,0.9);
}
#story .beat h2 {
  font-size: clamp(1.6rem, 4.5vw, 3.4rem);
  font-weight: 700; line-height: 1.15;
  max-width: 900px; color: var(--text);
  text-shadow: 0 2px 30px rgba(6,8,14,0.9);
}
#story .beat p {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 400; color: var(--text-secondary); line-height: 1.6;
  max-width: 620px; margin-top: 22px;
  text-shadow: 0 1px 20px rgba(6,8,14,0.9);
}
#story .beat .kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 20px;
}
#story .beat .accent {
  color: transparent; background: linear-gradient(90deg, var(--blue-light), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  /* text-shadow paints through transparent glyphs — drop-shadow respects them */
  text-shadow: none;
  filter: drop-shadow(0 2px 16px rgba(6,8,14,0.8));
}

#story .cta-row { margin-top: 40px; display: flex; gap: 16px; pointer-events: auto; }
#story .story-cta {
  font-family: 'Plus Jakarta Sans', var(--font); font-size: 15px; font-weight: 600;
  letter-spacing: 0.5px; padding: 15px 34px; cursor: pointer; text-decoration: none;
  border-radius: var(--radius-xs); transition: all 0.2s;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  color: #fff; box-shadow: 0 8px 32px rgba(124,58,237,0.35);
}
#story .story-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(124,58,237,0.5); }

/* crisp vector logo — takes over from the orbs at the very end */
#story #logo-final {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  opacity: 0; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(124,58,237,0.25));
}

/* reduced motion: simple static page, beats stacked */
@media (prefers-reduced-motion: reduce) {
  #story { height: auto; }
  #story #stage { position: static; height: auto; background: var(--bg); }
  #story .beat { position: static; opacity: 1 !important; padding: 14vh 8vw; }
  #story #story-canvas, #story #story-hint, #story #logo-final { display: none; }
}