/* ============================================================
   H7V OFFICIAL — fx.css
   WebGL canvas (#fx) + comic overlays: scanlines, halftone,
   vignette. All fixed, full-bleed, click-through (z 0).
   Content sits above (z 1, owned by style.css).
   ============================================================ */

#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
  background:#0a0a12;
}

/* shared overlay base — above canvas, below content, never block clicks */
.scanlines,
.halftone,
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* subtle moving horizontal VHS scanlines */
.scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0,
    rgba(255,255,255,.05) 1px,
    transparent 1px,
    transparent 3px
  );
  background-size:100% 3px;
  opacity:.9;
  mix-blend-mode:soft-light;
  animation:fx-scan 7s linear infinite;
}
@keyframes fx-scan{
  from{ background-position:0 0; }
  to{   background-position:0 3px; }
}

/* faint fixed comic halftone dot grid */
.halftone{
  background:
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0/8px 8px,
    radial-gradient(circle, rgba(0,229,255,.04) 1px, transparent 1.4px) 4px 4px/8px 8px;
  opacity:.6;
}

/* radial vignette darkening the edges for depth + readability */
.vignette{
  background:radial-gradient(
    ellipse at center,
    transparent 38%,
    rgba(5,6,10,.30) 72%,
    rgba(5,6,10,.62) 100%
  );
}

/* degrade gracefully — no motion when requested */
@media (prefers-reduced-motion:reduce){
  .scanlines{
    animation:none;
    opacity:.5;
  }
}