/* ------------------------------------------------------------------
   Qkey Background Animation System
   - Baseline: original (reference) wave + node design
   - Advanced Mode (optional): richer blurred cyan/orange variant
   Toggle advanced via adding class .waves-advanced to .electric-waves
   Debug utilities available via QkeyDebug helpers (from main.js)
------------------------------------------------------------------- */

/* =============== Baseline (Original Reference) ================== */
@keyframes electricWaveHorizontal { 0%{transform:translateX(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(100vw);opacity:0} }
@keyframes electricWaveVertical { 0%{transform:translateY(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(100vh);opacity:0} }
@keyframes electricPulse { 0%,100%{box-shadow:0 0 2px rgba(255,122,0,.1)}50%{box-shadow:0 0 8px rgba(255,122,0,.3),0 0 12px rgba(255,184,77,.2)} }

.electric-waves { position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.electric-wave-h { position:absolute; width:200px; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(255,122,0,.3) 20%,rgba(255,184,77,.5) 50%,rgba(255,122,0,.3) 80%,transparent 100%); animation:electricWaveHorizontal 4s linear infinite; box-shadow:0 0 4px rgba(255,122,0,.2); }
.electric-wave-v { position:absolute; width:1px; height:200px; background:linear-gradient(180deg,transparent 0%,rgba(255,122,0,.3) 20%,rgba(255,184,77,.5) 50%,rgba(255,122,0,.3) 80%,transparent 100%); animation:electricWaveVertical 5s linear infinite; box-shadow:0 0 4px rgba(255,122,0,.2); }
.electric-node { position:absolute; width:2px; height:2px; background:rgba(255,184,77,.4); border-radius:50%; animation:electricPulse 2s ease-in-out infinite; }

/* Position map matches original nth-child ordering */
.electric-wave-h:nth-child(1){ top:calc(var(--grid-size)*2); animation-delay:0s }
.electric-wave-h:nth-child(2){ top:calc(var(--grid-size)*5); animation-delay:1.5s }
.electric-wave-h:nth-child(3){ top:calc(var(--grid-size)*8); animation-delay:3s }
.electric-wave-h:nth-child(4){ top:calc(var(--grid-size)*11); animation-delay:.8s }
.electric-wave-h:nth-child(5){ top:calc(var(--grid-size)*3); animation-delay:2.2s }

.electric-wave-v:nth-child(6){ left:calc(var(--grid-size)*3); animation-delay:.5s }
.electric-wave-v:nth-child(7){ left:calc(var(--grid-size)*6); animation-delay:2s }
.electric-wave-v:nth-child(8){ left:calc(var(--grid-size)*9); animation-delay:3.5s }
.electric-wave-v:nth-child(9){ left:calc(var(--grid-size)*12); animation-delay:1.2s }

.electric-node:nth-child(10){ top:calc(var(--grid-size)*2); left:calc(var(--grid-size)*3); animation-delay:0s }
.electric-node:nth-child(11){ top:calc(var(--grid-size)*5); left:calc(var(--grid-size)*6); animation-delay:.3s }
.electric-node:nth-child(12){ top:calc(var(--grid-size)*8); left:calc(var(--grid-size)*9); animation-delay:.6s }
.electric-node:nth-child(13){ top:calc(var(--grid-size)*11); left:calc(var(--grid-size)*12); animation-delay:.9s }
.electric-node:nth-child(14){ top:calc(var(--grid-size)*3); left:calc(var(--grid-size)*11); animation-delay:1.2s }

/* Subtle grid pattern (reference) */
/* Unified grid overlay (replaces SVG pattern to eliminate inconsistent scaling)
   - Uses fixed background-size for consistent cell dimensions top-to-bottom
   - Adjust --grid-size below to tune spacing; waves positioned by percentage remain unaffected */
:root { --grid-size:42px; --grid-line:rgba(255,122,0,0.055); --grid-line-macro:rgba(255,122,0,0.12); }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  /* Two-layer grid: fine lines + thicker macro lines every 4 cells */
  background:
    /* macro vertical */ linear-gradient(to right, var(--grid-line-macro) 2px, transparent 2px) 0 0 / calc(var(--grid-size)*4) var(--grid-size),
    /* macro horizontal */ linear-gradient(to bottom, var(--grid-line-macro) 2px, transparent 2px) 0 0 / var(--grid-size) calc(var(--grid-size)*4),
    /* fine vertical */ linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    /* fine horizontal */ linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);
  background-attachment:fixed;
  opacity:.65; mix-blend-mode:normal;
}

/* =============== Advanced Mode (Optional Enhancement) =========== */
.waves-advanced.electric-waves { z-index:0; mix-blend-mode:screen; }
.waves-advanced .electric-wave-h, .waves-advanced .electric-wave-v { width:100%; height:2px; background:linear-gradient(90deg, rgba(0,204,255,0), rgba(0,204,255,.55), rgba(0,204,255,0)); filter:blur(14px) saturate(160%); opacity:.38; animation:waveOscillate 18s ease-in-out infinite; }
.waves-advanced .electric-wave-v { width:2px; height:100%; animation-duration:22s; }
.waves-advanced .electric-node { width:12px; height:12px; background:radial-gradient(circle at 38% 38%, #ffe9a8, #ff9d23 55%, #ff6000 90%); box-shadow:0 0 18px 6px rgba(255,140,0,.55), 0 0 38px 14px rgba(0,204,255,.28); animation:advPulse 6s ease-in-out infinite, advDrift 26s linear infinite; }

@keyframes waveOscillate { 0%{ transform:translate3d(-14%,0,0)}50%{transform:translate3d(14%,0,0)}100%{transform:translate3d(-14%,0,0)} }
@keyframes advPulse { 0%,100%{ transform:scale(.55); opacity:.85 } 45%{ transform:scale(1.4); opacity:1 } }
@keyframes advDrift { 0%{ transform:translate3d(0,0,0) rotate(0deg)} 50%{ transform:translate3d(16px,-20px,0) rotate(180deg)} 100%{ transform:translate3d(0,0,0) rotate(360deg)} }

/* Advanced mode positional mapping leverages existing order */
.waves-advanced .electric-wave-h:nth-child(1){ top:10%; animation-delay:-2s }
.waves-advanced .electric-wave-h:nth-child(2){ top:30%; animation-duration:20s; animation-delay:-6s }
.waves-advanced .electric-wave-h:nth-child(3){ top:50%; animation-duration:24s; animation-delay:-10s }
.waves-advanced .electric-wave-h:nth-child(4){ top:70%; animation-duration:22s; animation-delay:-4s }
.waves-advanced .electric-wave-h:nth-child(5){ top:85%; animation-duration:28s; animation-delay:-12s }
.waves-advanced .electric-wave-v:nth-child(6){ left:12%; }
.waves-advanced .electric-wave-v:nth-child(7){ left:28%; animation-duration:30s; }
.waves-advanced .electric-wave-v:nth-child(8){ left:54%; animation-duration:36s; }
.waves-advanced .electric-wave-v:nth-child(9){ left:72%; animation-duration:28s; }
.waves-advanced .electric-node:nth-child(10){ top:22%; left:18%; }
.waves-advanced .electric-node:nth-child(11){ top:46%; left:42%; animation-delay:1.2s }
.waves-advanced .electric-node:nth-child(12){ top:64%; left:63%; animation-delay:2.4s }
.waves-advanced .electric-node:nth-child(13){ top:78%; left:33%; animation-delay:3.6s }
.waves-advanced .electric-node:nth-child(14){ top:34%; left:77%; animation-delay:4.8s }

/* Visibility + Debug Enhancements (shared) */
.waves-strong .electric-wave-h, .waves-strong .electric-wave-v { opacity:.55; filter:blur(10px) saturate(180%); }
.waves-strong .electric-node { box-shadow:0 0 22px 8px rgba(255,140,0,.7),0 0 40px 14px rgba(0,204,255,.35); }
.waves-debug .electric-wave-h, .waves-debug .electric-wave-v { outline:1px dashed rgba(0,255,255,.35); }

/* Reduced motion handling */
@media (prefers-reduced-motion: reduce) {
  .electric-wave-h, .electric-wave-v, .electric-node { animation:none !important; }
  .electric-node { opacity:.4; }
}