@import "tailwindcss";

/* ─── FONTS ────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/michroma-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: "Doto";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/doto-400.woff2") format("woff2");
}

/* ─── TOKENS (verbatim from spec) ──────────────────────────────────────── */
@theme {
  --color-ink:    #050505;
  --color-panel:  #0c0c0b;
  --color-bone:   #f2f0eb;
  --color-dim:    #8d8c86;
  --color-accent: #15b8a6;

  --color-hair:   #f2f0eb14; /* 1px border tint on panels */

  --font-display: "Michroma", "Space Mono", monospace;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --font-doto:    "Doto", ui-monospace, monospace;
}

/* ─── BASE ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-bone);
  background: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, #root { margin: 0; min-height: 100svh; background: var(--color-ink); }
body { overflow-x: hidden; }

::selection {
  background: var(--color-accent);
  color: var(--color-ink);
}

:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── KEYFRAMES ─────────────────────────────────────────────────────────── */
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

@keyframes armed-breathe {
  0%, 100% { box-shadow: 0 0 0 1px #15b8a673, 0 0 20px #15b8a614; }
  50%      { box-shadow: 0 0 0 1px #15b8a6e6, 0 0 34px #15b8a647; }
}

@keyframes vio-current {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-16px) rotate(0.6deg); }
}

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

@keyframes cube-spin {
  0%   { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}

@keyframes rise-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── MAX-WOW KEYFRAMES ─────────────────────────────────────────────────── */

/* Boot overlay collapse — after boot text prints, ink pinches from top+bottom
   to reveal the site (CRT power-on flavor). */
@keyframes boot-pinch {
  0%   { transform: scaleY(1); opacity: 1; }
  70%  { transform: scaleY(0.02); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* Boot text typer — old CRT flicker on the boot text lines */
@keyframes boot-flicker {
  0%, 100% { opacity: 1; }
  47%      { opacity: 1; }
  50%      { opacity: 0.72; }
  52%      { opacity: 1; }
}

/* Boot final flash — single 90ms white/bone flash before pinch */
@keyframes boot-flash {
  0%   { background: var(--color-ink); }
  30%  { background: var(--color-bone); }
  100% { background: var(--color-ink); }
}

/* SIG.OK radar ping — expanding accent ring every 3s */
@keyframes sig-ping {
  0%   { transform: scale(1);   opacity: 0.75; }
  80%  { transform: scale(6);   opacity: 0; }
  100% { transform: scale(6);   opacity: 0; }
}

/* Gate-armed flash — briefly highlights a section rail when it enters view */
@keyframes gate-armed {
  0%   { color: var(--color-accent); text-shadow: 0 0 12px var(--color-accent); }
  60%  { color: var(--color-accent); text-shadow: 0 0 6px  var(--color-accent); }
  100% { color: var(--color-dim);    text-shadow: none; }
}

/* Lock-on corner brackets — fold in from outside the panel on hover */
@keyframes lock-in-tl { 0% { transform: translate(-6px,-6px); opacity: 0; } 100% { transform: translate(0,0); opacity: 1; } }
@keyframes lock-in-tr { 0% { transform: translate( 6px,-6px); opacity: 0; } 100% { transform: translate(0,0); opacity: 1; } }
@keyframes lock-in-bl { 0% { transform: translate(-6px, 6px); opacity: 0; } 100% { transform: translate(0,0); opacity: 1; } }
@keyframes lock-in-br { 0% { transform: translate( 6px, 6px); opacity: 0; } 100% { transform: translate(0,0); opacity: 1; } }

/* Lock-on sweep — a single top→bottom scan line when the panel locks on */
@keyframes lock-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(1000%); opacity: 0; }
}

/* ─── EFFECT UTILITIES ─────────────────────────────────────────────────── */

/* Film-grain overlay — fixed viewport layer, tiling SVG turbulence noise,
   opacity 0.05, mix-blend overlay, animated shift. */
.grain-layer {
  position: fixed;
  inset: -5%;
  width: 110%;
  height: 110%;
  pointer-events: none;
  z-index: 100;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grain-shift 0.9s steps(1) infinite;
}

/* Scanlines — 3px transparent + 1px dark band, tileable. */
.scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    #0000002e 3px 4px
  );
}

/* Panel — the standard boxed surface: 1px hair border, panel bg, ready for
   nested `.current` sweep. Content-flow neutral. */
.panel {
  position: relative;
  background: var(--color-panel);
  border: 1px solid var(--color-hair);
}
/* current: thin accent line sweeping across the panel's top edge */
.panel .current,
.current {
  position: absolute;
  top: -1px;
  left: 0;
  width: 33%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent) 50%,
    transparent
  );
  animation: vio-current 3.2s linear infinite;
  pointer-events: none;
}

/* Armed pulse — the breathing accent border for primary CTA + featured cards */
.armed-pulse {
  animation: armed-breathe 1.8s ease-in-out infinite;
}

/* Drift — used on the hero object */
.drift {
  animation: drift 7s ease-in-out infinite;
}

/* Caret blink */
.caret::after {
  content: "▮";
  display: inline-block;
  margin-left: 4px;
  color: var(--color-accent);
  animation: caret-blink 1.1s step-end infinite;
}

/* Marquee — full-width horizontal strip; content duplicated inside */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid var(--color-hair);
  border-bottom: 1px solid var(--color-hair);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-slow .marquee-track {
  animation-duration: 55s;
}
.marquee-item {
  padding: 12px 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item::before {
  content: "//";
  color: var(--color-accent);
  margin-right: 12px;
}

/* Reveal stagger — apply with data-stagger index */
[data-stagger] {
  opacity: 0;
  animation: rise-in 640ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(80ms * var(--stagger, 0));
}

/* Utility typography */
.font-display  { font-family: var(--font-display); }
.font-mono     { font-family: var(--font-mono); }
.font-doto     { font-family: var(--font-doto); font-feature-settings: "tnum" 1; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dim);
}

/* ─── HERO CUBE (CSS 3D wireframe) ──────────────────────────────────────── */
.cube-scene {
  perspective: 900px;
  width: 260px;
  height: 260px;
  display: grid;
  place-items: center;
}
.cube {
  position: relative;
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
  animation: cube-spin 22s linear infinite;
}
.cube .face {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-accent);
  background: rgba(21, 184, 166, 0.03);
  box-shadow: inset 0 0 22px rgba(21, 184, 166, 0.06);
}
.cube .face.front  { transform: translateZ(90px); }
.cube .face.back   { transform: rotateY(180deg) translateZ(90px); }
.cube .face.right  { transform: rotateY(90deg)  translateZ(90px); }
.cube .face.left   { transform: rotateY(-90deg) translateZ(90px); }
.cube .face.top    { transform: rotateX(90deg)  translateZ(90px); }
.cube .face.bottom { transform: rotateX(-90deg) translateZ(90px); }

/* Vertex markers — 4 small accent dots at the corners of the front face */
.cube .face.front::before,
.cube .face.front::after,
.cube .face.back::before,
.cube .face.back::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  border-radius: 999px;
}
.cube .face.front::before { top: -3px; left: -3px; }
.cube .face.front::after  { top: -3px; right: -3px; }
.cube .face.back::before  { bottom: -3px; left: -3px; }
.cube .face.back::after   { bottom: -3px; right: -3px; }

/* Inner cube — smaller concentric wireframe for depth. Counter-rotates. */
.cube-inner {
  position: absolute;
  inset: 60px;
  transform-style: preserve-3d;
  animation: cube-spin 22s linear infinite reverse;
  pointer-events: none;
}
.cube-inner .face {
  position: absolute;
  inset: 0;
  border: 1px solid #15b8a68a;
  background: transparent;
}
.cube-inner .face.front  { transform: translateZ(30px); }
.cube-inner .face.back   { transform: rotateY(180deg) translateZ(30px); }
.cube-inner .face.right  { transform: rotateY(90deg)  translateZ(30px); }
.cube-inner .face.left   { transform: rotateY(-90deg) translateZ(30px); }
.cube-inner .face.top    { transform: rotateX(90deg)  translateZ(30px); }
.cube-inner .face.bottom { transform: rotateX(-90deg) translateZ(30px); }

/* Inner reticle — a smaller centered ring, floats over the cube for depth */
.cube-reticle {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  opacity: 0.4;
  box-shadow: 0 0 12px rgba(21, 184, 166, 0.35);
}
.cube-crosshair {
  position: absolute;
  width: 220px;
  height: 220px;
  pointer-events: none;
}
.cube-crosshair::before,
.cube-crosshair::after {
  content: "";
  position: absolute;
  background: var(--color-hair);
}
.cube-crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cube-crosshair::after  { top: 50%;  left: 0; right: 0; height: 1px; }

/* Corner ticks around hero object slot */
.corner-ticks::before,
.corner-ticks::after,
.corner-ticks > i:nth-child(1),
.corner-ticks > i:nth-child(2) {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-dim);
}
.corner-ticks::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corner-ticks::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corner-ticks > i:nth-child(1) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corner-ticks > i:nth-child(2) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ─── MAX-WOW UTILITIES ─────────────────────────────────────────────────── */

/* SIG.OK radar dot — wraps the accent bullet with an expanding ring pulse. */
.sig-radar {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  vertical-align: middle;
}
.sig-radar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  animation: sig-ping 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: center;
}

/* Gate-armed rail — apply `data-armed="true"` on a section rail element to
   fire the flash once when the section enters view (handled by JS). */
.gate-armed-flash {
  animation: gate-armed 900ms ease-out both;
}

/* Lock-on panel — extend `.panel` behavior. On hover, four corner brackets
   fold in from outside + a thin scan line sweeps top→bottom of the panel.
   Applied by adding `.lock-on` to any panel-style card. */
.lock-on {
  position: relative;
  isolation: isolate;
}
.lock-on::before,
.lock-on::after,
.lock-on > .lock-corner-bl,
.lock-on > .lock-corner-br {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-accent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 220ms ease-out;
}
.lock-on::before  { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.lock-on::after   { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.lock-on > .lock-corner-bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.lock-on > .lock-corner-br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

.lock-on:hover::before { opacity: 1; animation: lock-in-tl 220ms ease-out; }
.lock-on:hover::after  { opacity: 1; animation: lock-in-tr 220ms ease-out; }
.lock-on:hover > .lock-corner-bl { opacity: 1; animation: lock-in-bl 220ms ease-out; }
.lock-on:hover > .lock-corner-br { opacity: 1; animation: lock-in-br 220ms ease-out; }

/* Scan sweep — a thin accent line runs top→bottom when the panel locks on */
.lock-on > .lock-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.lock-on:hover > .lock-scan {
  animation: lock-scan 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Boot overlay — fixed z-max viewport curtain during the 1.6s boot sequence */
.boot-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-ink);
  transform-origin: center;
  transform: scaleY(1);
  overflow: hidden;
}
.boot-curtain.flashing {
  animation: boot-flash 220ms ease-out both;
}
.boot-curtain.pinching {
  animation: boot-pinch 620ms cubic-bezier(0.7, 0, 0.9, 0.2) forwards;
}
.boot-line {
  animation: boot-flicker 90ms steps(1) infinite;
}

/* ─── REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .grain-layer,
  .drift,
  .cube,
  .current,
  .marquee-track,
  .armed-pulse,
  .caret::after,
  .sig-radar::after,
  .boot-curtain,
  .boot-line,
  [data-stagger] {
    animation: none !important;
  }
  [data-stagger] { opacity: 1; }
  .boot-curtain { display: none; }
}