/* ============================================================================
   Purpose: Reset + element-level defaults. Tokens only, no component styling.
   Loaded after design-system.css, before layout.css.
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky progress bar must not cover an anchored heading. */
  scroll-padding-top: var(--space-64);
}

body {
  background: var(--c-void);
  color: var(--c-ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Neutral lacquer. No colour cast - the accents carry the colour, the
     surfaces stay black. */
  background-image: var(--grad-lacquer);
  background-attachment: fixed;
}

/* --- Page atmosphere -----------------------------------------------------
   Grain and a vignette over the whole page.

   The grain is not decoration. `--grad-lacquer` is a large dark gradient, and
   large dark gradients band into visible steps on an 8-bit display - the exact
   problem the turntable plate had (HANDOVER section 8b), for the exact same
   reason. Noise scatters the step boundaries so the eye integrates them as
   smooth. The vignette then lets the middle of the page read as the lit part.

   Desktop only, and this is a real constraint rather than a taste call: it is
   one more full-viewport composited layer, and the mobile PSI target is
   already carrying the webfont CDN and the missing hero poster (section 9).
   Phones get the gradient without the overlay, where the screen is small
   enough that banding barely shows anyway.

   `pointer-events: none` is load-bearing - the WebGL canvas underneath takes
   drag-to-spin, and a full-screen layer would swallow every one of those.
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Two layers, because they need different blend modes and one element can
     only have one. The vignette must actually darken, so it blends normally.
     The grain must NOT darken - normal-blended grey noise over a near-black
     page lifts the blacks into a grey haze - so it goes through soft-light,
     which modulates around mid-grey and leaves the black point alone. */
  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
  }

  body::before {
    background-image: var(--grad-vignette);
  }

  body::after {
    background-image: var(--grad-grain);
    background-size: 140px 140px;
    opacity: 0.38;
    mix-blend-mode: soft-light;
  }
}

@media print {
  body::before,
  body::after { display: none; }
}

/* --- Headings ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-weight: var(--weight-bold); }
h6 { font-size: var(--fs-h6); font-weight: var(--weight-bold); }

p  { max-width: var(--measure); text-wrap: pretty; }

strong, b { font-weight: var(--weight-semibold); color: var(--c-ink); }
em        { font-style: italic; }

small { font-size: var(--fs-caption); }

/* --- Links -------------------------------------------------------------- */

a {
  color: var(--c-shield);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--c-shield-hi); }

/* --- Lists -------------------------------------------------------------- */

ul, ol { list-style: none; }

/* --- Media -------------------------------------------------------------- */

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

/* --- Forms -------------------------------------------------------------- */

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--radius-0);
}

button { background: none; border: none; cursor: pointer; }

input, select, textarea { background: var(--c-void); }

/* --- Tables ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; }

/* --- Accessibility ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--c-shield);
  outline-offset: 3px;
  border-radius: var(--radius-4);
}

/* Never remove the ring without replacing it. */
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--c-shield);
  color: var(--c-ink-inv);
}

.czf-skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-overlay);
  padding: var(--space-12) var(--space-20);
  background: var(--c-shield);
  color: var(--c-ink-inv);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-16)));
  transition: transform var(--dur-fast) var(--ease-out);
}

.czf-skip-link:focus { transform: translateY(0); color: var(--c-ink-inv); }

/* Visually hidden but readable by assistive tech. */
.czf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Motion safety ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Anti-FOUC ----------------------------------------------------------
   Elements the animation layer will reveal start hidden ONLY when JS is
   present and motion is allowed. Without JS everything is visible, so the
   page degrades to a perfectly readable document.
   --------------------------------------------------------------------- */

.czf-js .czf-anim-ready [data-reveal] { opacity: 0; }

/* --- Cursor glow -----------------------------------------------------------
   A small warm pool that follows the pointer. Deliberately faint: it should
   register as the room reacting to you, not as a cursor effect. Fine pointers
   only - on touch there is no cursor to light, and it would just be a smear
   chasing taps.
   ------------------------------------------------------------------------ */

.czf-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-overlay);
  width: var(--space-192);
  height: var(--space-192);
  margin: calc(var(--space-96) * -1) 0 0 calc(var(--space-96) * -1);
  border-radius: var(--radius-full);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  background: radial-gradient(circle,
    rgba(245, 168, 0, 0.10) 0%,
    rgba(245, 168, 0, 0.05) 38%,
    rgba(245, 168, 0, 0.00) 70%);
  transition: opacity var(--dur-slow) var(--ease-out);
}

.czf-cursor.is-on { opacity: 1; }

/* Slightly brighter and tighter while dragging the car, so the gesture has a
   visible focus. */
.czf-cursor.is-hot {
  background: radial-gradient(circle,
    rgba(245, 168, 0, 0.18) 0%,
    rgba(245, 168, 0, 0.07) 40%,
    rgba(245, 168, 0, 0.00) 70%);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .czf-cursor { display: none; }
}

@media print { .czf-cursor { display: none; } }