/* ============================================================
   CATBACK world.css — the world around the simulator.
   Scroll reveals, circuit-trace dividers, side rails, and the
   nav scroll-progress bar. Owned by js/sections.js.

   HARD RULE: nothing in this file may target anything inside
   .hero (no .hero, #atm-rig, .term-panel-*, #wallet-layer,
   .atm-* selectors — ever).
   ============================================================ */

/* ------------------------------------------------------------
   1. Scroll reveal — children of each .site-section step in
   with a chunky stepped rise+fade the first time the section
   enters the viewport. The hidden state is applied by JS
   (data-reveal="pending"), so a no-JS page shows everything.
   ------------------------------------------------------------ */

.site-section[data-reveal="pending"] .section-inner > * {
  opacity: 0;
}

.site-section[data-reveal="in"] .section-inner > * {
  animation: cb-step-rise 380ms steps(6, end) both;
  animation-delay: calc(var(--rvl-i, 0) * 90ms);
}

@keyframes cb-step-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* reduced motion: content is simply there, no stagger, no rise */
body[data-motion="reduce"] .site-section[data-reveal] .section-inner > * {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   2. Section kicker — "02 / LIVE TRADES" counter line injected
   as a sibling ABOVE each h2 (the h2 itself is never touched).
   ------------------------------------------------------------ */

.section-kicker {
  margin: 0 0 10px;
  font-family: var(--font-term);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 3px;
  color: var(--terminal-dim);
  text-transform: uppercase;
}
.section-kicker::before {
  content: '■ ';
  font-size: 11px;
  vertical-align: 2px;
  color: var(--forest-2);
}

/* ------------------------------------------------------------
   3. Circuit-trace dividers — injected between sections.
   Chunky 2px line + pixel nodes, a stepped data-pulse that
   occasionally travels toward the center medallion.
   ------------------------------------------------------------ */

.world-divider {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(1200px, 94vw);
  height: 46px;
  margin: 0 auto;
  padding: 0 8px;
  pointer-events: none;
}

.wd-trace {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 10px;
  overflow: hidden;
}
/* the 2px trace line */
.wd-trace::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: var(--px);
  background: var(--forest-2);
}
/* pixel solder nodes riding the line */
.wd-trace::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 2px;
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--moss) 0 6px,
    transparent 6px 68px);
  opacity: 0.55;
}
/* right trace is mirrored so its pulse also runs toward the medallion */
.wd-right { transform: scaleX(-1); }

/* the travelling data pulse — off until the animation lights it */
.wd-pulse {
  position: absolute;
  top: 2px; left: 0;
  width: 10px;
  height: 6px;
  background: var(--terminal);
  box-shadow:
    -8px 0 0 0 var(--terminal-dim),
    -16px 0 0 0 var(--forest-2);
  opacity: 0;
  transform: translateX(-20px);
  will-change: transform;
}
.world-divider.is-live .wd-pulse {
  animation: cb-wd-run var(--wd-dur, 8s) steps(26, end) var(--wd-delay, 0s) infinite;
}
@keyframes cb-wd-run {
  0%           { transform: translateX(-20px);            opacity: 1; }
  30%          { transform: translateX(var(--wd-run, 400px)); opacity: 1; }
  30.1%, 100%  { transform: translateX(var(--wd-run, 400px)); opacity: 0; }
}
body[data-motion="reduce"] .wd-pulse {
  animation: none !important;
  opacity: 0 !important;
}

/* center medallion: chunky pixel badge with a section glyph */
.wd-medallion {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, var(--scanline) 2px 4px),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: var(--px) solid var(--forest-2);
  outline: var(--px) solid var(--ink);
  box-shadow: 0 0 0 var(--px) var(--forest), 0 0 10px var(--glow-soft);
  color: var(--terminal-dim);
}
.wd-medallion svg { display: block; }
.world-divider.is-live .wd-medallion { color: var(--terminal); }

/* ------------------------------------------------------------
   4. Side rails — thin vertical pixel guides fixed at the far
   page edges on wide screens. Decorative, scroll-linked node
   lights + cursor (transform-only, driven from sections.js).
   Vertically centered so they clear the nav (top) and the
   audio toggle (bottom-left). Hidden below 1200px.
   ------------------------------------------------------------ */

.world-rail { display: none; }

@media (min-width: 1200px) {
  .world-rail {
    display: block;
    position: fixed;
    top: 50%;
    width: 12px;
    height: min(58vh, 560px);
    transform: translateY(-50%);
    z-index: var(--z-content);
    pointer-events: none;
  }
  .world-rail-left  { left: 6px; }
  .world-rail-right { right: 6px; }

  .wr-cap {
    position: absolute;
    left: 3px;
    width: 6px;
    height: 6px;
    background: var(--forest-2);
  }
  .wr-cap-top { top: 0; }
  .wr-cap-bot { bottom: 0; }

  .wr-track {
    position: absolute;
    top: 12px; bottom: 12px;
    left: 0; right: 0;
  }
  /* guide-rail dashes */
  .wr-track::before {
    content: '';
    position: absolute;
    left: 5px; top: 0; bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(0deg,
      var(--forest-2) 0 8px,
      transparent 8px 18px);
    opacity: 0.8;
  }

  .wr-node {
    position: absolute;
    left: 3px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: var(--forest-2);
  }
  .wr-node.is-on {
    background: var(--terminal);
    box-shadow: 0 0 6px var(--glow-soft);
  }

  .wr-cursor {
    position: absolute;
    left: 2px; top: 0;
    width: 8px;
    height: 8px;
    margin-top: -1px;
    background: var(--terminal);
    box-shadow: 0 0 8px var(--glow-terminal), inset 0 0 0 2px var(--ink-3);
    will-change: transform;
  }

  .wr-glyph {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-term);
    font-size: 13px;
    line-height: 1;
    color: var(--forest-2);
  }
}

/* ------------------------------------------------------------
   5. Scroll-progress bar — a 2px terminal-green strip with a
   cyan head pixel, attached under the nav (rides the nav's
   expanded/slim height automatically).
   ------------------------------------------------------------ */

.world-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--px) - 2px);   /* just under the nav border */
  height: 2px;
  pointer-events: none;
}
/* fallback placement if #site-nav is ever missing */
.world-progress[data-fixed] {
  position: fixed;
  top: var(--nav-h);
  bottom: auto;
  z-index: var(--z-nav);
}

.wp-fill {
  position: absolute;
  inset: 0;
  background: var(--terminal);
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.wp-head {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 2px;
  background: var(--sol-cyan);
  transform: translateX(-4px);
  will-change: transform;
}