/* ============================================================
   GOLDEN ARK · NEON FX (drop-in background widget)
   Particle field + drifting grid + color-cycling gradient halo
   for a uniform "3D / dopamine" feel across internal pages.
   Inject via:
     <link rel="stylesheet" href="/assets/css/neon-fx.css">
     <script src="/assets/js/neon-fx.js" defer></script>
   ============================================================ */

.gas-fx-halo,
.gas-fx-grid,
.gas-fx-particles,
.gas-fx-scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Color-cycling radial halo — sits ABOVE the page's own background
   but uses low alpha so it tints, doesn't overwrite. */
.gas-fx-halo {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,229,255,0.07),  transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(255,43,214,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(244,197,66,0.06), transparent 70%);
  animation: gasFxHaloShift 18s ease-in-out infinite alternate;
}
@keyframes gasFxHaloShift {
  0% {
    background:
      radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,229,255,0.08),  transparent 60%),
      radial-gradient(ellipse 70% 50% at 80% 70%, rgba(255,43,214,0.06), transparent 60%),
      radial-gradient(ellipse 60% 40% at 50% 100%, rgba(244,197,66,0.06), transparent 70%);
  }
  100% {
    background:
      radial-gradient(ellipse 70% 60% at 80% 30%, rgba(155,109,255,0.08),  transparent 60%),
      radial-gradient(ellipse 80% 50% at 20% 80%, rgba(0,255,156,0.06),    transparent 60%),
      radial-gradient(ellipse 60% 40% at 50% 50%, rgba(244,197,66,0.06),   transparent 70%);
  }
}

/* Drifting grid — VERY subtle, masks fade to transparent at edges */
.gas-fx-grid {
  background-image:
    linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at center, black 30%, transparent 80%);
  animation: gasFxGridDrift 40s linear infinite;
}
@keyframes gasFxGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 64px 64px; }
}

/* Particle field container */
.gas-fx-particles { overflow: hidden; }
.gas-fx-particles .gas-fx-particle {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  animation: gasFxFloat 18s linear infinite;
  will-change: transform, opacity;
}
@keyframes gasFxFloat {
  0%   { transform: translate(0, 100vh) scale(0);    opacity: 0; }
  10%  { transform: translate(0, 90vh)  scale(1);    opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(40px, -10vh) scale(0.4); opacity: 0; }
}

/* Horizontal scan line — slow, every 9 seconds */
.gas-fx-scan {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.45), rgba(255,43,214,0.45), transparent);
  box-shadow: 0 0 16px rgba(0,229,255,0.45);
  top: -10px;
  animation: gasFxScan 9s linear infinite;
  inset: -10px 0 auto 0;
}
@keyframes gasFxScan {
  0%   { top: -10px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* Reduced motion: stop animations, keep particles visible but static */
@media (prefers-reduced-motion: reduce) {
  .gas-fx-halo,
  .gas-fx-grid,
  .gas-fx-particles .gas-fx-particle,
  .gas-fx-scan {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .gas-fx-scan { display: none; }
}

/* Mobile: simplify */
@media (max-width: 640px) {
  .gas-fx-grid     { opacity: 0.6; }
  .gas-fx-particles .gas-fx-particle { animation-duration: 22s; }
}