/* Live motion: small, looping signals that the system is running. Every element is fully
   visible at rest; the animations only add a pulse on top. All off with reduced motion. */

/* ambient background: drafts drifting through the Gatekeeper line (js/ambient.js), behind all content */
.ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body > :not(.ambient):not(script) { position: relative; z-index: 1; }

/* "live" dot (hero eyebrow, run log bar, real-run label) */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-right: 8px; vertical-align: middle; position: relative;
}
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3); opacity: 0; } }

/* pipeline: a pulse travels along the connectors from step 1 to step 6 */
.flow li::after {
  background: linear-gradient(90deg, var(--line) 0 40%, var(--accent) 50%, var(--line) 60% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  animation: travel 7.2s linear infinite;
}
.flow li:nth-child(2)::after { animation-delay: 1.2s; }
.flow li:nth-child(3)::after { animation-delay: 2.4s; }
.flow li:nth-child(4)::after { animation-delay: 3.6s; }
.flow li:nth-child(5)::after { animation-delay: 4.8s; }
@keyframes travel { 0% { background-position: 100% 0; } 16%, 100% { background-position: 0 0; } }
.flow li::before { animation: step-on 7.2s infinite; }
.flow li:nth-child(2)::before { animation-delay: 1.2s; }
.flow li:nth-child(3)::before { animation-delay: 2.4s; }
.flow li:nth-child(4)::before { animation-delay: 3.6s; }
.flow li:nth-child(5)::before { animation-delay: 4.8s; }
.flow li:nth-child(6)::before { animation-delay: 6s; }
@keyframes step-on { 0%, 14% { color: var(--ink); } 18%, 100% { color: var(--accent); } }

/* gates: each gate passes in turn, like a draft going through them */
.gates li { position: relative; animation: gate-pass 6s infinite; }
.gates li:nth-child(2) { animation-delay: 1s; }
.gates li:nth-child(3) { animation-delay: 2s; }
.gates li:nth-child(4) { animation-delay: 3s; }
.gates li:nth-child(5) { animation-delay: 4s; }
@keyframes gate-pass {
  0%, 14% { background: var(--accent-soft); }
  20%, 100% { background: transparent; }
}
.gates li::after {
  content: "✓"; position: absolute; right: 18px; top: 16px; font: 600 14px var(--mono); color: var(--accent);
  opacity: .25; animation: gate-tick 6s infinite; animation-delay: inherit;
}
@keyframes gate-tick { 0%, 4% { opacity: .25; } 10%, 18% { opacity: 1; } 26%, 100% { opacity: .25; } }

/* run log: blinking cursor at the end */
.cursor {
  display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom;
  background: var(--code-hit); animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* statuses: the dot in each chip breathes */
.chip::before { animation: breathe 2.4s ease-in-out infinite; }
.status:nth-child(2) .chip::before { animation-delay: .6s; }
.status:nth-child(3) .chip::before { animation-delay: 1.2s; }
.status:nth-child(4) .chip::before { animation-delay: 1.8s; }
@keyframes breathe { 50% { transform: scale(1.7); opacity: .55; } }

/* hero stage: a soft light passes over the phone screen now and then */
.stage .screen { position: relative; }
.stage .screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .35) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0; animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .flow li::after, .flow li::before, .gates li, .gates li::after,
  .cursor, .chip::before, .stage .screen::after { animation: none; }
  .ambient { display: none; }
  .gates li::after { opacity: 1; }
}