/* ════════════════════════════════════════════════════════════
   SCP LEGION — motion system
   The brand's motion language is CRT-terminal: state changes are
   near-instant; ENTRANCES are where motion lives — phosphor
   flicker, scanline draws, typed text, staggered row boots.
   Never: scale-bounces, springs, parallax, long fades.
   ════════════════════════════════════════════════════════════ */

:root {
  /* durations */
  --dur-state:  80ms;   /* @kind other */ /* hover/press/focus — almost instant */
  --dur-fast:   160ms;  /* @kind other */ /* micro reveals, caret steps */
  --dur-reveal: 360ms;  /* @kind other */ /* panel / row entrances */
  --dur-boot:   900ms;  /* @kind other */ /* full-surface boot sequences */

  /* easings */
  --ease-term: steps(4, end);                 /* @kind other */ /* quantized, terminal feel */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ /* smooth settles */
}

/* ── keyframes ─────────────────────────────────────────── */

/* caret / cursor blink — square wave, no fade */
@keyframes lg-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* CRT power-on flicker */
@keyframes lg-flicker-in {
  0%   { opacity: 0; }
  8%   { opacity: 0.55; }
  16%  { opacity: 0.08; }
  28%  { opacity: 0.8; }
  36%  { opacity: 0.25; }
  52%  { opacity: 1; }
  62%  { opacity: 0.75; }
  100% { opacity: 1; }
}

/* scanline draw, top → bottom */
@keyframes lg-scan-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* row boot — tiny rise, no overshoot */
@keyframes lg-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* phosphor pulse for live dots */
@keyframes lg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
  50%      { box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.55); }
}

/* typed text — pair with steps(N) where N = char count */
@keyframes lg-type { from { width: 0; } to { width: 100%; } }

/* marching dashed border (active drop-zones, in-flight ops) */
@keyframes lg-march { to { background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px; } }

/* ── utility classes ───────────────────────────────────── */

.a-flicker { animation: lg-flicker-in var(--dur-reveal) linear both; }
.a-scan    { animation: lg-scan-in    var(--dur-reveal) var(--ease-out) both; }
.a-rise    { animation: lg-rise       var(--dur-reveal) var(--ease-out) both; }

/* staggered children — apply to a container */
.a-stagger > * { animation: lg-rise var(--dur-reveal) var(--ease-out) both; }
.a-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.a-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.a-stagger > *:nth-child(3)  { animation-delay: 80ms; }
.a-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.a-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.a-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.a-stagger > *:nth-child(7)  { animation-delay: 240ms; }
.a-stagger > *:nth-child(8)  { animation-delay: 280ms; }
.a-stagger > *:nth-child(9)  { animation-delay: 320ms; }
.a-stagger > *:nth-child(10) { animation-delay: 360ms; }
.a-stagger > *:nth-child(n+11) { animation-delay: 400ms; }

/* blinking block caret — append to any text element */
.caret::after {
  content: '▮';
  margin-left: 2px;
  color: var(--green, #4ADE80);
  animation: lg-blink 1s steps(1) infinite;
}

/* live phosphor dot */
.dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green, #4ADE80);
  animation: lg-pulse 2s ease-in-out infinite;
}

/* typed line — needs a ch-based width set inline or via --type-ch */
.a-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: lg-type var(--dur-boot) steps(24, end) both;
}

/* interactive state transitions — colors only, never transforms */
.t-state { transition: background-color var(--dur-state) linear,
                       border-color     var(--dur-state) linear,
                       color            var(--dur-state) linear,
                       opacity          var(--dur-state) linear; }

/* ── accessibility ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .a-flicker, .a-scan, .a-rise, .a-stagger > *, .a-type { animation: none; }
  .caret::after, .dot-live { animation: none; }
}