/* POVA — design tokens
 * Source: marketing/context/03_Visual_Identity.md
 * Field system: black-dominant, orange accent only, glass = charcoal
 */

/* ============================================================
 * BRAND FONTS — self-hosted from /assets/fonts/
 * FH Lecturis (licensed, Typografische Gesellschaft) is the canonical
 * POVA display face. IBM Plex Serif / Inter / Roboto Mono per brand book.
 * ============================================================ */
@font-face {
  font-family: "FH Lecturis";
  src: url("../fonts/FHLecturis-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FH Lecturis";
  src: url("../fonts/FHLecturis-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FH Lecturis";
  src: url("../fonts/FHLecturis-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-VF.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* @property registrations — let CSS transition the halo color + strength
 * smoothly between products. Cursor position (halo-x/y) is intentionally
 * NOT registered so it tracks the mouse without lag. */
@property --field-halo-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF5D01;
}
@property --field-halo-strength {
  syntax: "<number>";
  inherits: true;
  /* Ambient default — faint cursor halo always visible. JS bumps to
   * 0.65 on product engage. Matches the user-confirmed reference shots. */
  initial-value: 0.12;
}
/* Pointer-tracked gradient — registered so we can transition the sweep
 * angle smoothly when needed. Position (mx/my) intentionally unregistered
 * so it tracks pointer without lag. */
@property --hover-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 180deg;
}
@property --hover-strength {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  /* Color — primary palette (Brand Refresh 2026) */
  --pova-black: #000000;
  --pova-charcoal: #292929;
  --pova-dark-grey: #707179;
  --pova-cool-grey: #D8D8D8;
  --pova-white: #FFFFFF;
  --pova-orange: #FF5D01;        /* Pulse Orange — accent only, ≤10% */

  /* Product accent halos — single source of truth, mirrors products.js.
   * Each is the "signal color" the field tints toward when that product
   * is hovered or focused, plus the swatch on its detail card. */
  --accent-terminal-green: #5A7A52;     /* POVA 8 — Terminal Green */
  --accent-16bit-white:    #E8EAE8;     /* POVA 8 — 16-Bit White */
  --accent-cyber-orange:   #FF5D01;     /* POVA Curve — Cyber Orange (= pulse) */
  --accent-mint-glow:      #9CE5D4;     /* POVA 7 Pro — Mint Glow */
  --accent-storm-titanium: #7A7E84;     /* POVA Curve 2 — Storm Titanium */

  /* Field — what the page actually paints */
  --field-base: #050505;          /* almost-black, slight lift from pure for vignette */
  --field-edge: #000000;          /* vignette edge */
  --field-halo-x: 50%;            /* cursor-driven, set by JS — no transition */
  --field-halo-y: 50%;
  /* --field-halo-color and --field-halo-strength are @property-registered
   * above; their initial values come from the @property declarations and
   * they transition smoothly when JS swaps them. */

  /* Glass — instrument glass.
   * Lower the opacity and crank the blur so translucency reads visibly.
   * Inner highlight gives the glass a thin lit edge. */
  --glass-bg: rgba(20, 20, 22, 0.32);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.06);   /* inner top-edge highlight */
  --glass-blur: 28px;
  --glass-radius: 10px;
  --glass-radius-pill: 999px;

  /* Brand type stack — self-hosted under /assets/fonts/.
   * FH Lecturis is canonical POVA display (licensed). Never substitute. */
  --font-display: "FH Lecturis", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-mono-xs: 10px;
  --fs-mono-sm: 11px;
  --fs-mono-md: 13px;
  --fs-body: 14px;
  --fs-body-lg: 16px;
  --fs-display-sm: 28px;
  --fs-display-md: 48px;
  --fs-display-lg: 88px;
  --fs-display-xl: 140px;

  /* Spacing — based on the brand's 12-col / 80px outer / 24px gutters */
  --gutter: 24px;
  --safe-desktop: 80px;
  --safe-tablet: 40px;
  --safe-mobile: 20px;
  --max-width: 1320px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;

  /* Focus & a11y — visible, on-brand, never the OS blue ring. */
  --focus-color: var(--pova-orange);
  --focus-ring-width: 1px;
  --focus-ring-offset: 3px;

  /* Pointer-tracked gradient hover — set per element by motion.js */
  --mx: 50%;
  --my: 50%;
}

/* Reset + globals */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Kill the default mobile tap-flash (iOS/Android "ghost" rectangle) on
 * EVERY element. Brand uses an intentional :focus-visible orange ring for
 * keyboard users only — no surprise color blocks on tap. */
html {
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}
/* Black canvas lives on the root html element; body stays transparent
 * so .field (z-index: -1, fixed) can paint its halo + grid through to
 * the page surface. If body had a non-transparent background, body
 * would occlude the field and the grid would be invisible everywhere. */
html {
  background: var(--pova-black);
  /* Prevent any horizontal overflow at the root — without this,
   * mobile browsers (iOS Safari especially) zoom out on first load
   * if any descendant is wider than the viewport. */
  overflow-x: hidden;
  width: 100%;
}
body {
  background: transparent;
  color: var(--pova-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: default;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

/* Default focus suppression for mouse — the high-contrast ring shows up
 * only via :focus-visible (keyboard / programmatic focus). */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}
/* Round focus rings for circular targets (swatches, dots) */
.swatch:focus-visible,
.cursor-dot:focus-visible {
  outline-offset: var(--focus-ring-offset);
  border-radius: 50%;
}

/* Skip link — first focusable element on every page. Keyboard-only. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--pova-orange);
  color: var(--pova-black);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

/* Selection — orange on black, never the OS blue */
::selection {
  background: var(--pova-orange);
  color: var(--pova-black);
}

/* Reduced motion — collapse every motion to a fade or none.
 * Brand book + WCAG 2.1 §2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
  /* Explicitly kill ambient float / scroll-driven distortion so the canvas
   * is dead-still under prefers-reduced-motion. Each animated element
   * named here exists in home.css / product.css. */
  .instrument,
  .product-hero {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }
  .instrument[data-pos="hero"] { transform: translate(-50%, -50%) !important; }
  .scroll-parallax { transform: none !important; }
}

/* View Transition API — supported browsers (Chrome 111+, Safari 18+).
 * Persist the field, wordmark, and ticker visually across navigations.
 * Falls back to the default browser navigation flash where unsupported. */
@view-transition {
  navigation: auto;
}
/* Persistent chrome elements — mark them so the UA pairs them across pages */
.field { view-transition-name: pova-field; }
.wordmark { view-transition-name: pova-wordmark; }
.ticker { view-transition-name: pova-ticker; }
.reg-marks { view-transition-name: pova-reg-marks; }
.nav-pill { view-transition-name: pova-nav; }
.comp-number { view-transition-name: pova-comp; }

/* The whole-page crossfade — keep it short and on-brand */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(pova-field),
::view-transition-new(pova-field),
::view-transition-old(pova-wordmark),
::view-transition-new(pova-wordmark),
::view-transition-old(pova-ticker),
::view-transition-new(pova-ticker),
::view-transition-old(pova-reg-marks),
::view-transition-new(pova-reg-marks),
::view-transition-old(pova-nav),
::view-transition-new(pova-nav),
::view-transition-old(pova-comp),
::view-transition-new(pova-comp) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.15s; }
}

/* Brand-strict utility classes */
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; }
.serif { font-family: var(--font-serif); }
.display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; }