/* ==========================================================================
   Winda — Design tokens ("Sensor Grid" v1.0)
   Ported from the design bundle: project/tokens/*.css + the font/scale
   overrides that project/prototype/w.css applied on top of them.
   Every value here is a decision from the design system. Do not tune
   locally — change the token.
   ========================================================================== */

:root {
  /* ---- Color: three neutrals + one accent. That is the whole palette. ---- */
  --w-black: #07080a;        /* page ground */
  --w-surface: #0d0f12;      /* raised panel */
  --w-surface-2: #14171c;    /* hover / inset */
  --w-white: #f4f6f2;        /* primary text on dark */
  --w-grey: #9ba0ab;         /* secondary text */
  --w-grey-2: #5e6169;       /* tertiary / disabled */
  --w-green: #b5d058;        /* signal green — the only brand hue */
  --w-green-deep: #55701c;   /* green text on light, pressed states */
  --w-green-dim: rgba(181, 208, 88, 0.12);

  /* lines */
  --w-line: rgba(255, 255, 255, 0.14);
  --w-line-strong: rgba(255, 255, 255, 0.34);
  --w-line-green: rgba(181, 208, 88, 0.22);

  /* semantic (telemetry states) */
  --w-ok: #b5d058;
  --w-warn: #e0a33e;
  --w-alert: #d9564a;
  --w-offline: #5e6169;

  /* aliases */
  --surface-page: var(--w-black);
  --surface-card: var(--w-surface);
  --text-body: var(--w-white);
  --text-muted: var(--w-grey);
  --text-signal: var(--w-green);
  --border-default: var(--w-line);
  --border-hud: var(--w-line-green);

  /* ---- Type: direction 2f — Hanken display, Source Serif body, Plex mono --- */
  --font-display: "Hanken Grotesk", sans-serif;
  --font-body: "Source Serif 4", serif;
  --font-mono: "IBM Plex Mono", monospace;

  --ls-display: -0.02em;
  --ls-label: 0.2em;
  --ls-micro: 0.12em;

  /* ---- Space: 4px base grid. Sensor Grid is SQUARE — no rounding. ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-section: 120px;
  /* Fluid shell: holds 1200px up to ~1463px viewport (laptops unchanged), then
     grows with the screen and caps at 1800px so ultrawide monitors fill out
     instead of stranding content in a narrow centre column. */
  --container: clamp(1200px, 82vw, 1800px);
  --gutter: 40px;
  --radius: 0px;
  --hud-corner: 26px;
  --hud-stroke: 2px;

  /* ---- Motion: instruments engage, they never bounce. ---- */
  --dur-fast: 120ms;   /* hover, press */
  --dur-base: 240ms;   /* state changes, panel hovers */
  --dur-slow: 600ms;   /* entrance reveals */
  --dur-pulse: 1.6s;   /* live-status blink */
  --dur-scan: 3.2s;    /* scanline sweep loop */
  --ease-engage: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-inout: cubic-bezier(0.6, 0, 0.2, 1);
  --stagger: 80ms;

  /* Motion Spec v3 §0 easing tokens, used by the scripted hero entrance. */
  --ease-precise: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-instrument: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-soft-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Keyframes — shared vocabulary
   ========================================================================== */

/* live status blink — opacity only, never scale */
@keyframes w-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* entrance: rise + fade. 14px max travel. */
@keyframes w-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* scanline sweep across a panel (position a 1px green line absolutely) */
@keyframes w-scan {
  from { left: -10%; }
  to { left: 110%; }
}

/* terminal caret */
@keyframes w-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* data bar / underline draw-in */
@keyframes w-sweep {
  from { width: 0; }
  to { width: 100%; }
}

/* crosshair glow — the "dark glow" cursor treatment (direction 2a) */
@keyframes w-breathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.16); }
}

/* role roller: hold each of six roles, then step one 72px row */
@keyframes w-roleroll {
  0%, 13% { transform: translateY(0); }
  16.66%, 29.66% { transform: translateY(-72px); }
  33.33%, 46.33% { transform: translateY(-144px); }
  50%, 63% { transform: translateY(-216px); }
  66.66%, 79.66% { transform: translateY(-288px); }
  83.33%, 96.33% { transform: translateY(-360px); }
  100% { transform: translateY(-432px); }
}

/* marquee: two identical halves, translate by exactly one half */
@keyframes w-tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Entrance utilities — rise 14px + fade, 80ms stagger.
   From tokens/motion.css. The prototype's w.css omitted these even though its
   markup references them, so the staged hero reveals never ran.
   ========================================================================== */

.w-reveal   { animation: w-reveal var(--dur-slow) var(--ease-engage) both; }
.w-reveal-2 { animation: w-reveal var(--dur-slow) var(--ease-engage) both; animation-delay: calc(var(--stagger) * 1); }
.w-reveal-3 { animation: w-reveal var(--dur-slow) var(--ease-engage) both; animation-delay: calc(var(--stagger) * 2); }
.w-reveal-4 { animation: w-reveal var(--dur-slow) var(--ease-engage) both; animation-delay: calc(var(--stagger) * 3); }

/* ==========================================================================
   Reduced motion — honored globally. Nothing loops, nothing travels.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}