/**
 * VoiceX — Hero Background Layers
 * ---------------------------------------------------------------
 * Purely additive. Does not redeclare or override any existing
 * .hero-* rule in assets/style.css — only new, uniquely-prefixed
 * classes injected behind the existing hero content by
 * assets/js/hero-glow.js.
 *
 * Stacking order inside .hero-section (position:relative, z-index
 * context already established in style.css):
 *   z-index 0  -> existing .hero-section::before/::after glow blobs
 *   z-index 1  -> .hero-bg-layers (grid + nodes + cursor glow)  <- new
 *   z-index 2  -> .hero-content (existing, untouched)
 * ---------------------------------------------------------------
 */

.hero-bg-layers{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden; /* belt-and-braces; .hero-section already clips */
}

/* ============================================================
   LAYER 2 — HAIRLINE SQUARE GRID (CSS gradients only, no images)
   ============================================================ */

.hero-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(106,124,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,124,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 82% 68% at 50% 32%, #000 30%, transparent 88%);
          mask-image: radial-gradient(ellipse 82% 68% at 50% 32%, #000 30%, transparent 88%);
  animation:
    heroGridDrift 30s ease-in-out infinite,
    heroGridPulse 11s ease-in-out infinite;
  will-change: background-position, opacity;
}

/* brighter overlay grid, only visible in a soft circle around the
   cursor via mask — this is the "nearby grid lines brighten" effect */
.hero-bg-grid::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(106,124,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,124,255,.55) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(200px circle at var(--gx,50%) var(--gy,50%), #000 0%, transparent 70%);
          mask-image: radial-gradient(200px circle at var(--gx,50%) var(--gy,50%), #000 0%, transparent 70%);
  opacity: var(--grid-boost, 0);
}

@keyframes heroGridDrift{
  0%,100%{ background-position: 0 0, 0 0; }
  50%{ background-position: 16px 12px, 16px 12px; }
}

@keyframes heroGridPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

/* ============================================================
   LAYER 3 — FLOATING SQUARE NODES
   ============================================================ */

.hero-bg-nodes{
  position:absolute;
  inset:0;
}

.hero-node{
  position:absolute;
  width:4px;
  height:4px;
  margin:-2px 0 0 -2px;
  background:#7c8bff;
  border-radius:1px;
  box-shadow:0 0 6px 1px rgba(59,130,246,.35);
  opacity: calc(.16 + var(--boost, 0) * 0.6);
  animation: heroNodeDrift var(--node-dur, 9s) ease-in-out infinite;
  animation-delay: var(--node-delay, 0s);
  transition: opacity .45s ease, box-shadow .45s ease;
  will-change: opacity, transform;
}

.hero-node::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:2px;
  background: rgba(124,92,255,.45);
  opacity:0;
  animation: heroNodePulse var(--node-dur, 9s) ease-in-out infinite;
  animation-delay: var(--node-delay, 0s);
}

@keyframes heroNodeDrift{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(1.5px,-1.5px); }
}

@keyframes heroNodePulse{
  0%,100%{ opacity:0; transform:scale(.8); }
  50%{ opacity:.4; transform:scale(1.3); }
}

/* ============================================================
   LAYER 4 — CURSOR-FOLLOWING GLOW
   VoiceX palette: Primary #4F6BFF · Secondary #6A5CFF ·
                   Accent #3B82F6 · Optional Violet #7C3AED
   ============================================================ */

.hero-cursor-glow{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(79,107,255,.22),  transparent 38%),
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(106,92,255,.15),  transparent 50%),
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(59,130,246,.09),  transparent 62%),
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(124,58,237,.05),  transparent 75%);
  -webkit-mask-image: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), #000, transparent 75%);
          mask-image: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), #000, transparent 75%);
  transform: translateZ(0); /* own compositor layer -> isolates repaint, keeps 60fps */
  backface-visibility:hidden;
  will-change: opacity;
}

@media (hover:none){
  .hero-cursor-glow{ display:none; }
}

/* ============================================================
   ACCESSIBILITY — respect prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  .hero-bg-grid,
  .hero-bg-grid::after,
  .hero-node,
  .hero-node::before,
  .hero-cursor-glow{
    animation:none !important;
    transition:none !important;
  }
}