/* =========================================================================
   ALVERO REACH — journey layer styling
   ========================================================================= */

/* ---- descent spine / depth gauge ---------------------------------------- */
.journey-spine {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none; mix-blend-mode: screen;
}
.journey-spine .js-cap {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint); writing-mode: vertical-rl;
}
.js-track {
  position: relative; width: 2px; height: 220px; border-radius: 2px;
  background: var(--line-2); overflow: hidden;
}
.js-fill {
  position: absolute; inset: 0; transform-origin: top; transform: scaleY(0);
  background: linear-gradient(var(--accent-bright), var(--accent), var(--steel));
  box-shadow: 0 0 12px var(--sky-glow);
}
.js-read {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-mono); text-align: center;
}
.js-read b { font-size: 0.62rem; letter-spacing: 0.08em; color: var(--accent-bright); font-weight: 500; font-variant-numeric: tabular-nums; }
.js-read [data-spine="name"] {
  font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  writing-mode: vertical-rl; margin-top: 4px; max-height: 90px;
}
@media (max-width: 1180px) { .journey-spine { display: none; } }

/* ---- loop ignition + zip-in --------------------------------------------- */
.loop-step {
  transition: background .5s cubic-bezier(.2,.7,.3,1),
              opacity .5s ease,
              transform .55s cubic-bezier(.2,.95,.25,1.15);
  opacity: 0; transform: translateX(-30px) scale(.96);
}
.loop-step.lit { opacity: 1; transform: none; background: var(--surface-2); }
.loop-step.lit .ph { background: var(--accent); color: #07121f; box-shadow: 0 0 26px -4px var(--sky-glow); border-color: var(--accent); }
.loop-step.lit h4 { color: var(--ink); }
.loop-step.lit p { color: var(--ink-soft); }
.loop-step .num { transition: color .4s; }
.loop-step.lit .num { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .loop-step { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1000px) {
  .loop-step { opacity: 1; transform: none; }
}

/* ---- threshold pivot ----------------------------------------------------- */
.threshold {
  --tp: 0;
  position: relative; overflow: hidden;
  min-height: 88vh; display: flex; align-items: center;
  background: radial-gradient(120% 90% at 50% 50%, #0a121d 0%, var(--bg) 60%);
  border-block: 1px solid var(--line);
}
.threshold .thr-field, .threshold .thr-field::before, .threshold .thr-field::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.threshold .thr-field {
  inset: 0; background:
    radial-gradient(40% 50% at 50% 50%, rgba(74,166,242, calc(0.06 + var(--tp) * 0.16)), transparent 70%);
  transition: none;
}
/* expanding detection ring that opens as you cross the threshold */
.thr-ring {
  position: absolute; left: 50%; top: 50%;
  width: 40vmax; height: 40vmax; transform: translate(-50%, -50%) scale(calc(0.4 + var(--tp) * 1.1));
  border: 1px solid rgba(140,194,240, calc(0.05 + var(--tp) * 0.18));
  border-radius: 50%; pointer-events: none;
}
.thr-ring.two { width: 26vmax; height: 26vmax; transform: translate(-50%, -50%) scale(calc(0.5 + var(--tp) * 1.4)); border-color: rgba(140,194,240, calc(0.04 + var(--tp) * 0.12)); }
.threshold .wrap { position: relative; z-index: 2; text-align: center; }

/* heartbeat 3D canvas — sits behind the text, above the base field */
.thr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* CSS guide rings get a subtle synced heartbeat */
.thr-ring { animation: thrbeat 1.15s cubic-bezier(.22,.7,.3,1) infinite; }
.thr-ring.two { animation: thrbeat2 1.15s cubic-bezier(.22,.7,.3,1) .04s infinite; }
@keyframes thrbeat {
  3%   { transform: translate(-50%, -50%) scale(calc(0.4 + var(--tp) * 1.1 + 0.03)); }
  10%  { transform: translate(-50%, -50%) scale(calc(0.4 + var(--tp) * 1.1)); }
  21%  { transform: translate(-50%, -50%) scale(calc(0.4 + var(--tp) * 1.1 + 0.018)); }
  30%, 100% { transform: translate(-50%, -50%) scale(calc(0.4 + var(--tp) * 1.1)); }
}
@keyframes thrbeat2 {
  3%   { transform: translate(-50%, -50%) scale(calc(0.5 + var(--tp) * 1.4 + 0.04)); }
  10%  { transform: translate(-50%, -50%) scale(calc(0.5 + var(--tp) * 1.4)); }
  21%  { transform: translate(-50%, -50%) scale(calc(0.5 + var(--tp) * 1.4 + 0.024)); }
  30%, 100% { transform: translate(-50%, -50%) scale(calc(0.5 + var(--tp) * 1.4)); }
}
@media (prefers-reduced-motion: reduce) { .thr-ring { animation: none; } }
.thr-kicker {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.16; color: var(--ink-soft);
  letter-spacing: -0.01em; max-width: 20ch; margin: 1.6rem auto 0;
  opacity: calc(0.55 + var(--tp) * 0.45);
}
.thr-reveal {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.0; letter-spacing: -0.02em;
  margin: 0.3rem auto 0; max-width: 16ch;
  background: linear-gradient(92deg, var(--accent-bright), var(--steel-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: var(--tp);
  transform: translateY(calc((1 - var(--tp)) * 26px));
  filter: blur(calc((1 - var(--tp)) * 6px));
}
.thr-line {
  width: 1px; height: clamp(40px, 6vw, 72px); margin: 0 auto;
  background: linear-gradient(var(--accent), transparent);
  transform: scaleY(var(--tp)); transform-origin: top;
}
@media (max-width: 960px) {
  .threshold { --tp: 1; min-height: 70vh; }
  .thr-reveal { filter: none; transform: none; }
}

/* ---- intelligence streams: pinned, detonate one at a time --------------- */
.streams-section { position: relative; padding: 0; min-height: 380vh; }
.streams-stage {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  display: flex; align-items: center; overflow: hidden;
  padding: clamp(76px, 10vh, 110px) 0 clamp(32px, 5vh, 58px);
}
.streams-stage .section-head { margin-bottom: clamp(16px, 3vh, 42px); }
.streams-stage .section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.streams-stage .section-head .lede { font-size: clamp(1rem, 1.3vw, 1.16rem); }
.streams-section .stream { min-height: 0; padding: clamp(1.05rem, 2vw, 1.7rem); }
.streams-section .stream h3 { font-size: clamp(1.3rem, 1.7vw, 1.55rem); margin-top: clamp(.8rem, 1.4vw, 1.25rem); }
.streams-section .stream p { font-size: 0.92rem; margin-top: 0.55rem; }
.streams-section .stream .s-feeds { padding-top: clamp(.85rem, 1.6vw, 1.35rem); }

/* explode-in choreography */
.streams-section .stream {
  opacity: 0;
  transform: scale(0.74) translateY(26px);
  filter: blur(16px);
  transition: opacity .66s ease, transform .72s cubic-bezier(.18,.9,.28,1.2), filter .66s ease;
  will-change: transform, opacity, filter;
}
.streams-section .stream.boom { opacity: 1; transform: none; filter: none; }

/* burst ring on detonation */
.streams-section .stream::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border: 1px solid var(--accent); opacity: 0; pointer-events: none;
}
.streams-section .stream.boom::before { animation: streamburst .9s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes streamburst {
  0%   { opacity: .55; transform: scale(.9); }
  100% { opacity: 0;   transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .streams-section .stream { opacity: 1; transform: none; filter: none; transition: none; }
  .streams-section .stream::before { animation: none; }
}
@media (max-width: 960px) {
  .streams-section { min-height: 0; }
  .streams-stage { position: relative; min-height: 0; display: block; padding: 0; }
  .streams-section .stream { opacity: 1; transform: none; filter: none; }
}