/* SEG_F4ULT site base: fonts, type ramp, reset, focus, utilities, HUD, motion.
   No page layout here (components live in site.css). Rules marked "theme.css" are copied
   from the app's src/styles/theme.css (master 29d16b4). */

/* ── Fonts: VCTR Mono v0.12 (Vectro), self-hosted unmodified from the owner's licensed webfonts (D48) ── */
@font-face {
  font-family: 'VCTR Mono'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/VCTRMonov0.12-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'VCTR Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/VCTRMonov0.12-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'VCTR Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/VCTRMonov0.12-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'VCTR Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/VCTRMonov0.12-Bold.woff2') format('woff2');
}

/* ── Site type ramp (the app scale is too dense for marketing). VCTR Mono sets every glyph at 0.6em,
   about a fifth wider than a proportional face, so sizes sit a step below the earlier proportional ramp;
   display type is Light (300) with tight tracking, as on the owner's own site ── */
:root {
  --fs-hud: 11px;
  --fs-small: 13px;
  --fs-body: clamp(15px, 0.15vw + 14.5px, 16px);
  --fs-lead: clamp(16px, 0.35vw + 14.75px, 19px);
  --fs-h3: clamp(16px, 0.25vw + 15px, 18px);
  --fs-h2: clamp(22px, 1.1vw + 17.5px, 30px);
  --fs-h1: clamp(30px, 3.6vw + 18px, 60px);
  color-scheme: dark;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

/* ── Base (body rule from theme.css, plus the site's size and leading) ── */
html { background-color: var(--bg-primary); }
body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; font-weight: 500; }
h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

.lead { font-size: var(--fs-lead); color: var(--text-secondary); }
.fine { font-size: var(--fs-small); color: var(--text-muted); }

a { color: var(--text-primary); text-underline-offset: 3px; }
a:hover { color: var(--live); }

::selection { background: var(--sel); color: #111; }

/* ── Focus (D12, WCAG 2.4.7): never remove outlines elsewhere ── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 2px;
}

/* ── Utilities ── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wordmark { font: 700 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-secondary); }
.wordmark--lg { font-size: 20px; }

.cursor::after { content: '▌'; animation: hud-typewriter-cursor 1s steps(1) infinite; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  background: var(--live); color: #111;
  border: 0; border-radius: var(--radius-ctrl);
  font: 500 15px/1.2 var(--font-sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
}
.btn-primary:hover { color: #111; filter: brightness(1.08); }
.btn-primary:disabled { opacity: .6; cursor: progress; }

/* Effect colour per element goes through classes: inline styles are blocked by the CSP */
.fx-live { --fx: var(--live); }
.fx-mod { --fx: var(--mod); }
.fx-warp { --fx: var(--warp); }
.fx-degen { --fx: var(--degen); }
.fx-uv { --fx: var(--uv); }

/* ── HUD visual language ── */
/* Framed stage (effect cards, placeholder, hero) */
.stage { position: relative; aspect-ratio: 9 / 16; background: var(--bg-void);
  border: 1px solid var(--border-light); overflow: hidden; container-type: inline-size; }

/* Corner ticks: 12px L-shapes drawn with gradients */
.ticks { position: absolute; inset: 8px; pointer-events: none;
  --t: var(--border-emphasis);
  background:
    linear-gradient(var(--t) 0 0) top left / 12px 1px, linear-gradient(var(--t) 0 0) top left / 1px 12px,
    linear-gradient(var(--t) 0 0) top right / 12px 1px, linear-gradient(var(--t) 0 0) top right / 1px 12px,
    linear-gradient(var(--t) 0 0) bottom left / 12px 1px, linear-gradient(var(--t) 0 0) bottom left / 1px 12px,
    linear-gradient(var(--t) 0 0) bottom right / 12px 1px, linear-gradient(var(--t) 0 0) bottom right / 1px 12px;
  background-repeat: no-repeat; }

/* Readouts (from theme.css .stage-readout, without the app's clip-bin offset) */
.readout { position: absolute; z-index: 2; pointer-events: none; font: 500 10px/1.3 var(--font-mono);
  letter-spacing: .12em; color: var(--text-secondary); background: rgba(24, 25, 27, .72); padding: 3px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); }
.readout.tl { left: 10px; top: 10px; }    .readout.tr { right: 10px; top: 10px; }
.readout.bl { left: 10px; bottom: 10px; } .readout.br { right: 10px; bottom: 10px; }
.readout .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fx, var(--live)); margin-right: 6px; }
@container (max-width: 220px) { .readout.tr, .readout.br { display: none; } }

/* Dashed target bracket */
.bracket { position: absolute; left: 50%; top: 46%; width: 40%; aspect-ratio: 1 / 1.4; translate: -50% -50%;
  border: 1px dashed var(--fx, var(--mod)); }

/* Scan line */
.scan { position: absolute; left: 0; right: 0; height: 2px; top: -2px; opacity: .25;
  background: var(--fx, var(--live)); animation: hud-scan-line 4s linear infinite; }

/* Section substrate (theme.css .grid-substrate, with the grid size written out) */
.grid-substrate {
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  animation: none;
}

/* HUD type tiers (theme.css, verbatim) */
.hud-label { font: 500 11px var(--font-sans); letter-spacing: normal; text-transform: none; color: var(--text-muted); }
.hud-value { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ── Motion (theme.css, verbatim) ── */
@keyframes hud-scan-line {
  0% { top: -2px; }
  100% { top: 100%; }
}

@keyframes hud-typewriter-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Idle "breathing" — for empty states so the instrument reads as powered-on, not dead */
@keyframes alive-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* Element enters (card mount, track add) — rise + fade with spring */
@keyframes rise-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scanline sweep across a surface (arming/scanning affordance) */
@keyframes surface-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.alive-idle {
  animation: alive-breathe var(--dur-breathe) var(--ease-in-out-quart) infinite;
}

.rise-in {
  animation: rise-in var(--dur-settle) var(--ease-out-back) both;
}

/* A thin scanline element: position:absolute inset:0, overflow-hidden parent */
.surface-scanline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: surface-scan 3.2s var(--ease-in-out-quart) infinite;
}

/* ── Reduced motion ── */
/* Respect user preference — kill ambient motion, keep functional feedback snappy */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scan, .cursor::after { display: none; }
}