/* ============================================================
   Derezzed — the TRON: Legacy cinematic skin (ADR 0050).

   The Grid: neon-cyan programs on a black void. Opt-in motif kit,
   fully scoped under :root[data-theme^="derezzed-"] and NOT bundled
   into design.css — a consumer links it separately (the design
   gallery + brain link every skin; the /skin/{name} showcase links
   one). The 18-token palette lives in themes.css.

   Dark carries the full Grid — a receding perspective floor, a
   glowing horizon, and an ambient glow that drifts slowly through a
   narrow cool band (added in the backdrop section below). Light is a
   clean "daybreak console": no backdrop, no glow.

   CSS-only: the grid + glow-drift are pure CSS, so there is no
   motion module (unlike white-rabbit's canvas code-rain).
   ============================================================ */

/* The glow driver. Every program-glow reads its hue from this one
   custom property; the backdrop section animates it through a narrow
   cool band so the whole console breathes colour together, while text
   fills stay fixed. A plain number here (cyan ≈ 190) is the static
   base; --glow-drift (registered in the backdrop section) rides on it. */
:root[data-theme^="derezzed-"] {
  --glow-hue: 190;
}

/* ---- shared chrome (both modes) — dress the shared primitives ---- */

:root[data-theme^="derezzed-"] .button {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* sharp program panels — cards default to --radius-lg; pull them to the
   skin's sharp --radius-md (3px) for the angular Grid look */
:root[data-theme^="derezzed-"] .card {
  border-radius: var(--radius-md);
}

/* a console/HUD readout marker on section headings (like a shell prompt) */
:root[data-theme^="derezzed-"] .section-heading::before {
  content: "// ";
  color: var(--accent);
}

:root[data-theme^="derezzed-"] a {
  color: var(--accent);
}

:root[data-theme^="derezzed-"] ::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--text-primary);
}

/* ---- dark: program-glow on the primitives ----
   (the Grid backdrop + colour drift arrive in the next slice; these
   static-hue glows already reference --glow-hue so they'll start
   drifting for free once the animation is wired.) */

:root[data-theme="derezzed-dark"] h1,
:root[data-theme="derezzed-dark"] h2,
:root[data-theme="derezzed-dark"] h3,
:root[data-theme="derezzed-dark"] .card-title,
:root[data-theme="derezzed-dark"] .marketing-nav-brand,
:root[data-theme="derezzed-dark"] .section-intro-eyebrow {
  text-shadow: 0 0 12px hsl(var(--glow-hue) 100% 62% / 0.35);
}

:root[data-theme="derezzed-dark"] .button--primary {
  box-shadow: 0 0 16px -2px hsl(var(--glow-hue) 100% 60% / 0.55);
}

:root[data-theme="derezzed-dark"] .card {
  box-shadow:
    inset 0 1px 0 hsl(var(--glow-hue) 100% 80% / 0.05),
    0 0 24px -16px hsl(var(--glow-hue) 100% 60% / 0.55);
}

/* ============================================================
   Dark only — the Grid backdrop + the colour-drifting glow.
   ============================================================ */

/* The ambient drift. A registered <number> so the browser interpolates
   it smoothly; the whole console reads its glow hue from --glow-hue,
   which rides on this. The band is narrow (cyan ≈ 190, ±9°) and slow, so
   only the GLOW shifts colour — every text fill stays fixed, so nothing
   ever gets harder to read as the colour drifts. */
@property --glow-drift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root[data-theme="derezzed-dark"] {
  --glow-hue: calc(190 + var(--glow-drift, 0));
  animation: derezzed-glowdrift 14s ease-in-out infinite alternate;
}

@keyframes derezzed-glowdrift {
  from { --glow-drift: -9; }
  to   { --glow-drift: 9; }
}

/* The void (html's --bg-primary) shows through; the backdrop paints on
   body pseudo-elements at negative z-index — no DOM added, so it survives
   an hx-boost body swap. Content sits on opaque .card panels above it, so
   legibility never depends on the animation. */
:root[data-theme="derezzed-dark"] body {
  background: transparent;
}

/* far backdrop (z-index -2): faint scanlines · corner vignette · a soft
   cyan bloom glowing up from the horizon where the floor meets the void */
:root[data-theme="derezzed-dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, hsl(var(--glow-hue) 100% 70% / 0.02) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 34%, transparent 52%, rgba(0, 0, 0, 0.55)),
    radial-gradient(46% 26% at 50% 82%, hsl(var(--glow-hue) 100% 68% / 0.20), transparent 70%),
    radial-gradient(120% 40% at 50% 100%, hsl(var(--glow-hue) 100% 60% / 0.10), transparent 62%);
}

/* the Grid (z-index -1): a perspective floor receding to a horizon,
   masked to dissolve into the void. Its horizontal lines flow slowly
   toward the viewer (derezzed-gridflow — the "flying over the Grid"
   moment); the vertical lines hold, converging to the vanishing point.
   Line colour reads --glow-hue, so the floor also drifts cyan↔azure with
   every other glow. Both the flow and the drift freeze under
   prefers-reduced-motion. The flow loops seamlessly because the shift is
   exactly one --cell of the repeating pattern. */
:root[data-theme="derezzed-dark"] body::before {
  content: "";
  position: fixed;
  left: -50vw;
  bottom: 0;
  width: 200vw;
  height: 52vh;
  transform: perspective(520px) rotateX(61deg);
  transform-origin: 50% 100%;
  z-index: -1;
  pointer-events: none;
  --cell: 46px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) - 2px), hsl(var(--glow-hue) 100% 66% / 0.30) calc(var(--cell) - 2px) var(--cell)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--cell) - 2px), hsl(var(--glow-hue) 100% 66% / 0.30) calc(var(--cell) - 2px) var(--cell));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 6%, transparent 82%);
          mask-image: linear-gradient(to top, #000 0%, #000 6%, transparent 82%);
  animation: derezzed-gridflow 7s linear infinite;
}

/* one --cell of Y travel = one full seamless loop; only the horizontal
   layer moves visibly (a Y shift is a no-op on the vertical lines) */
@keyframes derezzed-gridflow {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 var(--cell), 0 var(--cell); }
}

/* reduced-motion: freeze BOTH the colour drift and the grid flow — a
   fully static Grid with a fixed cyan glow, no motion at all */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="derezzed-dark"] {
    animation: none;
    --glow-drift: 0;
  }
  :root[data-theme="derezzed-dark"] body::before {
    animation: none;
  }
}