/* ===================== THE LIVING CIRCUIT =====================
   One powered system, hero to CTA: ignition lead, comet dot,
   station docking, typed logs, page spine, powered cockpit/CTA.
   Progressive: everything has a lit static default under
   reduced motion / no JS. */

/* ---------- Ignition lead (hero → run) ---------- */
.circuit-lead {
  position: absolute;
  left: 7px;
  bottom: 0;
  width: 1px;
  height: 3rem;
  background: var(--border);
  overflow: visible;
}
.circuit-lead .lead-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-dim));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s var(--ease-out-expo);
}
.circuit-lead.is-live .lead-fill { transform: scaleY(1); }
.circuit-lead .lead-spark {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent);
  opacity: 0;
}
.circuit-lead.is-live .lead-spark { animation: sparkDrop 0.55s var(--ease-out) forwards; }
@keyframes sparkDrop {
  0% { transform: translateY(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(3.2rem); opacity: 0; }
}

/* ---------- Run dot: comet tail + breathing glow ---------- */
.run-dot::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 38px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--accent));
  opacity: 0.85;
}
.run-dot { animation: dotBreathe 2.2s ease-in-out infinite; }
@keyframes dotBreathe {
  0%, 100% { box-shadow: 0 0 18px var(--accent-glow), 0 0 0 5px var(--accent-soft); }
  50% { box-shadow: 0 0 26px var(--accent-glow), 0 0 0 8px var(--accent-soft); }
}

/* ---------- Station docking: pop + ripple when the pulse arrives ---------- */
.station .station-node::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.station.is-lit .station-node { animation: dockPop 0.5s var(--ease-out); }
.station.is-lit .station-node::after { animation: dockRipple 0.9s var(--ease-out) 0.05s; }
@keyframes dockPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.65); }
  100% { transform: scale(1); }
}
@keyframes dockRipple {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- Typed logs ---------- */
.log-cursor {
  display: inline-block;
  width: 7px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: cursorBlink 0.85s steps(1) infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

/* ---------- Page spine (run end → CTA) ---------- */
.circuit-spine {
  position: absolute;
  left: 7px;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}
.circuit-spine .spine-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  transform: scaleY(0);
  transform-origin: top center;
}
.circuit-spine .spine-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow), 0 0 0 4px var(--accent-soft);
}
.spine-node {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-hover);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.spine-node.is-lit {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow), 0 0 0 3px var(--accent-soft);
}
/* Spine removed 2026-07-06 — it crossed section content and read as noise.
   .circuit-spine rules above kept dormant (no JS builds the element). */
.circuit-spine { display: none; }

/* ---------- Powered cockpit ---------- */
.cockpit::before { opacity: 0.25; transition: opacity 0.8s ease; }
.cockpit.is-powered::before { opacity: 0.9; }
.cockpit .cockpit-bar-live { opacity: 0.45; transition: opacity 0.6s ease; }
.cockpit.is-powered .cockpit-bar-live { opacity: 1; }
.cockpit.is-powered { animation: powerFlash 0.9s var(--ease-out); }
@keyframes powerFlash {
  0% { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); }
  30% { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 60px var(--accent-glow); }
  100% { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); }
}

/* ---------- Charged CTA ---------- */
.cta-gold.is-charged { animation: ctaCharge 1.1s var(--ease-out); }
@keyframes ctaCharge {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.14); }
  100% { filter: brightness(1); }
}

/* ---------- Reduced motion: lit, calm, complete ---------- */
@media (prefers-reduced-motion: reduce) {
  .circuit-lead .lead-fill { transform: none; transition: none; }
  .circuit-lead .lead-spark,
  .circuit-lead.is-live .lead-spark { animation: none; opacity: 0; }
  .run-dot { animation: none; }
  .run-dot::before { display: none; }
  .station.is-lit .station-node,
  .station.is-lit .station-node::after { animation: none; }
  .log-cursor { animation: none; }
  .circuit-spine .spine-fill { transform: none; }
  .circuit-spine .spine-dot { display: none; }
  .cockpit::before { opacity: 0.7; }
  .cockpit .cockpit-bar-live { opacity: 1; }
  .cockpit.is-powered { animation: none; }
  .cta-gold.is-charged { animation: none; }
}