/* === Digital Screen overlay — HYBRID (more motion, still GPU-safe) ===
   You liked ULTRA-SPARSE (low GPU) but want smoother/continuous feel.
   Strategy:
   - Keep the BIG container static (no continuous animation on the huge element)
   - Move only the scanlines layer with a *quantized drift* (steps) -> looks smooth-ish, low cost
   - Add a very subtle "float" wobble also quantized (steps) -> up/down vibe without 60fps
   - Keep glitch bursts (steps) as-is (you like them, very cheap most of the time)
*/

.digital-screen-overlay{
  --screen-opacity: 0.91;

  /* Tint */
  --scan: 230, 160, 255;
  --veil: 0.095;

  /* Motion tuning */
  --drift-distance: 28px;     /* how far scanlines drift before looping */
  --drift-speed: 14s;         /* lower = more motion (watch GPU) */
  --drift-steps: 220;          /* fewer step repaints; visually still smooth */          /* higher = smoother, slightly more work */

  --wobble-distance: 3px;     /* up/down amount */
  --wobble-speed: 34s;        /* slow float */
  --wobble-steps: 260;         /* fewer step repaints; visually still smooth */         /* smoother float without true continuous */

  /* Glitch */
  --glitch-cycle: 18s;
  --glitch-shift: 7px;
  --glitch-alpha-soft: 0.08;

  position:absolute;
  left:50%;
  top:-42.5px;
  bottom:540px;
  width:min(104vw,1560px);
  border-radius:10px;
  pointer-events:none;
  z-index:1;

  /* Perf: limit paint/compositing scope without changing visuals */
  contain: paint;
  isolation: isolate;
  overflow: hidden;

  background: rgba(var(--scan), var(--veil));
  opacity: var(--screen-opacity);

  /* IMPORTANT: base is static */
  transform: translate(-50%, 0);
}

/* Frames above overlay, content above frames */
.home-neon-frame { z-index: 1; }
.subtitle-box, .categories, .content { position: relative; z-index: 2; }

/* Typed custom props so drift+wobble can animate via compositor (no repaint) */
@property --_drift {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --_wobble {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}


/* Scanlines + micro texture (static gradients) */
.digital-screen-overlay::before{
  content:"";
  position:absolute;
  inset: calc(-1 * (var(--drift-distance) + var(--wobble-distance))) 0;
  border-radius:inherit;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.056) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.045) 0 2px,
      transparent 2px 72px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.038) 0 0.5px,
      transparent 0.5px 3px
    );

  background-position: 0 0, 0 6px, 0 1px;
  opacity: 0.95;

  transform: translateY(calc(var(--_drift) + var(--_wobble)));

  /* "Smooth-ish" drift: quantized steps instead of per-frame */
  animation:
    drift-var var(--drift-speed) steps(var(--drift-steps), end) var(--va-drift-delay, 0ms) infinite,
    wobble-var var(--wobble-speed) steps(var(--wobble-steps), end) var(--va-wobble-delay, 0ms) infinite;}

/* Glitch layer: OFF most of the time; short bursts; steps() */
.digital-screen-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), var(--glitch-alpha-soft)) 0 2px,
      transparent 2px 12px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), calc(var(--glitch-alpha-soft) * .8)) 0 1px,
      transparent 1px 7px
    );
  background-position: 0 0, 0 3px;

  opacity:0;
  will-change: opacity;
  animation: glitch-bursts var(--glitch-cycle) steps(1,end) var(--va-glitch-delay, 0ms) infinite;
}

/* === Keyframes (composited vars / opacity only) === */

/* Drift down then loop (looks continuous because of many steps) */
@keyframes drift-var{
  from { --_drift: 0px; }
  to   { --_drift: var(--drift-distance); }
}

/* Wobble feel: not a true sine, but enough to read as "floating" */
@keyframes wobble-var{
  0%,100% { --_wobble: 0px; }
  25%     { --_wobble: calc(var(--wobble-distance) * -1); }
  50%     { --_wobble: 0px; }
  75%     { --_wobble: var(--wobble-distance); }
}

/* Rare glitch bursts */
@keyframes glitch-bursts{
  0%, 84%, 100% { opacity: 0; background-position: 0 0, 0 3px; }

  85% { opacity: .25; background-position: 3px 0, 3px 3px; }
  86% { opacity: 0;   background-position: 0 0, 0 3px; }

  92% { opacity: .22; background-position: -2px 0, -2px 3px; }
  93% { opacity: 0;   background-position: 0 0, 0 3px; }

  97% { opacity: .18; background-position: 1px 0, 1px 3px; }
  98% { opacity: 0;   background-position: 0 0, 0 3px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .digital-screen-overlay::before,
  .digital-screen-overlay::after{
    animation: none !important;
    transform: none !important;
  }
}