/* ============================================================================
 * ZorX shared theme layer — site-wide gaming-vibe background + palette tokens.
 *
 * Purpose: make EVERY page/feature share the homepage's exact look (dark base,
 * neon-green radial glows, subtle grid, animated light-sweep) WITHOUT importing
 * the homepage's component CSS.
 *
 * SCOPE GUARANTEE (do not change): this file defines ONLY :root tokens, the
 * `body` background, body::before / body::after backdrop layers, their
 * keyframes, and a reduced-motion guard. It must NEVER style components,
 * layout, text elements, or export surfaces (a, h1-6, p, button, input, *,
 * .wrap, canvas, .preview-shell, .stage, etc.) — that keeps tool exports and
 * every page's UI 100% intact. The `!important` is applied ONLY to the body
 * background so it reliably overrides each page's inline body background
 * regardless of <link> order; it does not touch color/layout.
 *
 * Values copied verbatim from assets/css/zorx-landing-neon.css so it is
 * pixel-identical to the homepage. Audit: 2026-06-05-009.
 * ==========================================================================*/

:root {
  /* Canonical homepage palette */
  --zx-mint: #9cff00;
  --zx-mint-2: #d7ff00;
  --zx-mint-3: #39ff14;
  --zx-purple: #6cff00;
  --zx-pink: #ff2fb3;
  --zx-blue: #20c9ff;
  --zx-bg: #03050d;
  --zx-line: rgba(148, 255, 215, .18);
  --zx-ink: #f6fff9;
  --zx-muted: #a4b3bd;
}

/* Unified gaming background — identical to the homepage. !important only on the
   backdrop so it wins over any page's own inline `body { background: ... }`. */
body {
  background:
    radial-gradient(circle at 18% 14%, rgba(156, 255, 0, .22), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(215, 255, 0, .18), transparent 30%),
    radial-gradient(circle at 78% 82%, rgba(57, 255, 20, .2), transparent 34%),
    #03050d !important;
  overflow-x: hidden;
}

/* Subtle fixed neon grid overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* strictly behind all page content (pages here don't all use a z-indexed wrapper) */
  background-image:
    linear-gradient(rgba(0, 255, 157, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 157, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 16%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 16%, #000, transparent 72%);
}

/* Animated ambient light sweep */
body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1; /* strictly behind all page content */
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(156, 255, 0, .12) 43%, rgba(215, 255, 0, .2) 50%, rgba(57, 255, 20, .11) 58%, transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(156, 255, 0, .12), transparent 36%);
  mix-blend-mode: screen;
  filter: blur(14px);
  opacity: .72;
  animation: zxLightSweep 9s ease-in-out infinite alternate;
}

@keyframes zxLightSweep {
  0% { transform: translate3d(-18%, -4%, 0) rotate(-8deg); }
  45% { transform: translate3d(12%, 3%, 0) rotate(5deg); }
  100% { transform: translate3d(18%, -2%, 0) rotate(8deg); }
}

/* Respect users who prefer reduced motion: keep the look, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}