/*
  render-crystal-gate.css — STUDENT sample skin: Crystal Gate
  ===========================================================================
  Owner ruling 2026-08-23: the Primer/skeleton is the BONES ONLY — it says where
  containers live so nothing overflows the screen. It does NOT decide how the page
  renders. Look and feel, including construction (borders, cuts, glass, grain,
  glow, animation), belongs to the SKIN.

  This file is a proof of that: it changes the look substantially and requires
  ZERO Primer changes. The precedent already shipped — render-fight-night.css
  already uses clip-path, @font-face, ::before/content and filter, and
  render-executive-blue.css already uses @keyframes + animation.

  Design source: six-terminals.html §s2 (faceted crystal gate) — clip-path octagon cut, inset neon ring, glow type.
  Adapted from the owner's own reference file, not invented.

  Token law (D-S07-NS-02 / D-S07-TOKEN-01/-02): --theme-* prefix only. Complete
  assignment (D-TPL-TOK-02) — every token the greyscale reference assigns is
  assigned here. Selector coverage matches render-fight-night.css 1:1 so this skin
  is never partial (D-S07-SKIN-02).

  STATUS: AUTHORED SAMPLE, pending owner approval. Colour values are authored for
  this design, not measured from a legacy source — flagged per the sourcing rule.
  ===========================================================================
*/

:root[data-theme="crystal-gate"] {
  --theme-bg-canvas: #040C1C;
  --theme-bg-surface: rgba(10, 26, 52, 0.72);
  --theme-bg-frosted: rgba(10, 26, 52, 0.55);
  --theme-bg-card: rgba(10, 26, 52, 0.85);
  --theme-x-bg-sunken: #02060F;
  --theme-border-inactive: rgba(0, 212, 255, 0.28);
  --theme-border-active: #00D4FF;

  --theme-text-main: #EAF7FF;
  --theme-x-text-secondary: #A9C9E0;
  --theme-text-muted: #6E8CA6;
  --theme-x-text-inverse: #02060F;
  --theme-x-text-disabled: #42586B;

  --theme-accent-primary: #00D4FF;
  --theme-accent-secondary: #1E90FF;
  --theme-x-accent-hover: #7FE7FF;
  --theme-x-accent-active: #00A8CC;
  --theme-x-accent-disabled: rgba(0, 212, 255, 0.25);
  --theme-x-accent-text: #02060F;
  --theme-x-focus-ring: #7FE7FF;

  --theme-state-healthy: #00D4FF;
  --theme-state-warning: #FFB648;
  --theme-state-error: #FF6B6B;
  --theme-x-state-info: #1E90FF;

  --theme-x-elevation-1: 0 0 12px rgba(0, 212, 255, 0.18);
  --theme-x-elevation-2: 0 0 34px rgba(30, 144, 255, 0.28);
  --theme-x-elevation-3: 0 0 48px rgba(0, 212, 255, 0.45);
  --theme-accent-glow: 0 0 18px rgba(0, 212, 255, 0.55);
  --theme-accent-glow-secondary: 0 0 24px rgba(30, 144, 255, 0.4);
  --theme-x-glass-tint: rgba(4, 12, 28, 0.72);
  --theme-backdrop-blur: 14px;

  --theme-x-font-family-base: "Inter", system-ui, sans-serif;
  --theme-x-font-size-sm: 0.875rem;
  --theme-x-font-size-base: 1rem;
  --theme-x-font-size-lg: 1.25rem;
  --theme-x-font-size-xl: 1.75rem;
  --theme-x-line-height-base: 1.5;
  --theme-x-space-unit: 0.5rem;
}

:root[data-theme="crystal-gate"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
  font-family: var(--theme-x-font-family-base);
}

:root[data-theme="crystal-gate"] a { color: var(--theme-accent-primary); }
:root[data-theme="crystal-gate"] p, :root[data-theme="crystal-gate"] li { color: var(--theme-x-text-secondary); }
:root[data-theme="crystal-gate"] .bu-brick { color: var(--theme-x-text-secondary); }

:root[data-theme="crystal-gate"] .bu-rail {
  background-color: var(--theme-x-bg-sunken);
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="crystal-gate"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}
:root[data-theme="crystal-gate"] .bu-soffit a { color: var(--theme-text-muted); }
:root[data-theme="crystal-gate"] .bu-soffit a:hover { color: var(--theme-text-main); }

:root[data-theme="crystal-gate"] .bu-btn {
  background: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}
:root[data-theme="crystal-gate"] .bu-btn:hover {
  background: var(--theme-x-accent-hover);
  border-color: var(--theme-x-accent-hover);
  box-shadow: var(--theme-accent-glow);
}
:root[data-theme="crystal-gate"] .bu-btn:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }
:root[data-theme="crystal-gate"] .bu-btn:disabled {
  background: var(--theme-x-accent-disabled);
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="crystal-gate"] .bu-btn-secondary {
  background: transparent;
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}
:root[data-theme="crystal-gate"] .bu-btn-secondary:hover { border-color: var(--theme-border-active); color: var(--theme-accent-primary); }
:root[data-theme="crystal-gate"] .bu-btn-secondary:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }
:root[data-theme="crystal-gate"] .bu-btn-secondary.is-active {
  border-color: var(--theme-border-active);
  color: var(--theme-x-accent-text);
  background: var(--theme-accent-primary);
}

:root[data-theme="crystal-gate"] .bu-control {
  background: var(--theme-bg-card);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}
:root[data-theme="crystal-gate"] .bu-control:hover { border-color: var(--theme-border-active); }
:root[data-theme="crystal-gate"] .bu-control:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }

:root[data-theme="crystal-gate"] .bu-gate { background: var(--theme-x-glass-tint); }

:root[data-theme="crystal-gate"] .bu-gauge svg .bg { stroke: var(--theme-border-inactive); }
:root[data-theme="crystal-gate"] .bu-gauge svg .fg { stroke: var(--theme-accent-primary); }
:root[data-theme="crystal-gate"] .bu-progress-track { background: var(--theme-x-bg-sunken); }
:root[data-theme="crystal-gate"] .bu-badge-tag {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="crystal-gate"] .bu-status-dot { background: var(--theme-text-muted); }
:root[data-theme="crystal-gate"] .bu-status-dot.is-healthy { background: var(--theme-state-healthy); }
:root[data-theme="crystal-gate"] .bu-status-dot.is-active { background: var(--theme-state-healthy); }
:root[data-theme="crystal-gate"] .bu-status-dot.is-warning { background: var(--theme-state-warning); }
:root[data-theme="crystal-gate"] .bu-status-dot.is-alert { background: var(--theme-state-warning); }
:root[data-theme="crystal-gate"] .bu-status-dot.is-error { background: var(--theme-state-error); }
:root[data-theme="crystal-gate"] .bu-status-dot.is-neutral { background: var(--theme-text-muted); }

/* --- THE CONSTRUCTION: a faceted gate, not a rectangle -----------------------
   Corners are cut top-left and bottom-right, and the "border" is an inset ring
   drawn by a pseudo-element rather than a real border — a real border cannot
   follow a clip-path, which is exactly why this is done with ::before.
   Ported from six-terminals.html §s2 (clip-path polygon + inset ring recipe). */
:root[data-theme="crystal-gate"] .bu-panel {
  position: relative;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  background: linear-gradient(160deg, rgba(10, 26, 52, 0.95) 0%, rgba(4, 12, 28, 0.98) 100%);
  border: none;
  box-shadow: var(--theme-x-elevation-2);
  color: var(--theme-text-main);
}

:root[data-theme="crystal-gate"] .bu-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  box-shadow: inset 0 0 0 1px var(--theme-border-active);
}

/* Headings carry the gate's light. text-shadow, not colour, is what makes this
   read as "emitting" rather than merely blue. */
:root[data-theme="crystal-gate"] h1, :root[data-theme="crystal-gate"] h2, :root[data-theme="crystal-gate"] h3, :root[data-theme="crystal-gate"] h4, :root[data-theme="crystal-gate"] h5, :root[data-theme="crystal-gate"] h6 {
  color: var(--theme-text-main);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px var(--theme-border-active), 0 0 30px rgba(0, 212, 255, 0.6);
}

/* Buttons echo the same cut, at a scale that respects the 5px interactive cap. */
:root[data-theme="crystal-gate"] .bu-btn, :root[data-theme="crystal-gate"] .bu-btn-secondary {
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ===========================================================================
   DEPTH — the parallaxing atmosphere behind the panels
   ===========================================================================
   Owner 2026-08-23: the skins read flat because the panels had nothing to float
   in front of. The reference (panel-theme-kit.html) always had this: a `.sky`
   of stacked radial pools, drifting motes, and a mesh behind the panels.

   The parallax is pure CSS. `background-attachment: fixed` anchors a layer to
   the viewport so it does NOT move on scroll, while a `scroll` layer travels
   with the content. Stack both and they separate as the page moves —
   differential motion is parallax. No JS, no scroll listener, nothing to jank.

   Far to near: colour pools (fixed) -> fine motes (fixed) -> coarse motes
   (scroll) -> vignette (fixed). The coarse layer moving against the fixed ones
   is what the eye actually reads as depth.

   Mobile note: several mobile browsers ignore `background-attachment: fixed`
   and will render this static. That degrades to a still backdrop — no parallax,
   nothing broken — which is the right floor for a scroll effect.
   =========================================================================== */
:root[data-theme="crystal-gate"] body {
  background-color: #040C1C;
  background-image:
    /* 4. vignette — burns the edges so the centre reads deeper */
    radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(0,0,0, 0.55) 100%),
    /* 3. NEAR motes — travel with the content */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='rgb(0,212,255)' opacity='0.55'><circle cx='44.2' cy='71.4' r='1.5'/><circle cx='159.8' cy='30.6' r='1.5'/><circle cx='268.6' cy='105.4' r='1.5'/><circle cx='95.2' cy='197.2' r='1.5'/><circle cx='210.8' cy='244.8' r='1.5'/><circle cx='309.4' cy='214.2' r='1.5'/><circle cx='23.8' cy='285.6' r='1.5'/><circle cx='187.0' cy='319.6' r='1.5'/><circle cx='125.8' cy='139.4' r='1.5'/><circle cx='244.8' cy='57.8' r='1.5'/></g></svg>"),
    /* 2. FAR motes — pinned to the viewport */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'><g fill='rgb(0,212,255)' opacity='0.55'><circle cx='24.7' cy='39.9' r='0.9'/><circle cx='89.3' cy='17.1' r='0.9'/><circle cx='150.1' cy='58.9' r='0.9'/><circle cx='53.2' cy='110.2' r='0.9'/><circle cx='117.8' cy='136.8' r='0.9'/><circle cx='172.9' cy='119.7' r='0.9'/><circle cx='13.3' cy='159.6' r='0.9'/><circle cx='104.5' cy='178.6' r='0.9'/></g></svg>"),
    /* 1. atmosphere: pools of light at infinity */
    radial-gradient(120% 80% at 50% -12%, #0B3559 0%, transparent 56%),
    radial-gradient(80% 60% at 6% 100%, #0A1A2E 0%, transparent 62%),
    radial-gradient(70% 55% at 94% 76%, #0A1A2E 0%, transparent 64%);
  background-attachment: fixed, scroll, fixed, fixed, fixed, fixed;
  background-size: cover, 340px 340px, 190px 190px, cover, cover, cover;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  animation: bu-atmosphere-drift 90s linear infinite;
}

/* Only the near mote layer drifts; everything else is anchored. Animating just
   one layer's position keeps the parallax reading as depth rather than as the
   whole backdrop sliding. */
@keyframes bu-atmosphere-drift {
  to {
    background-position:
      center, 340px 340px, 0 0, center, center, center;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="crystal-gate"] body { animation: none; }
}

/* The app's own preference, honoured separately from the OS query. */
:root[data-reduced-motion="true"][data-theme="crystal-gate"] body {
  animation: none;
}