/* =========================================================================
   Aversions Crown — TV Stack (final)
   - Positions unchanged (as supplied)
   - Enhanced per-screen effects + global CRT glass
   - Debug overlays toggled via .tvstack.is-debug or body.debug-tv
   ========================================================================= */

/* =============================
   TV STACK — Base layout
   ============================= */
.tvstack {
  position: relative;
  padding: clamp(36px, 4vw, 56px) 0;

  /* global effect strength knobs */
  --scanline-alpha: .33;
  --crt-vignette: .25;
  --hover-neon: rgba(0,255,180,.28);
  --hover-neon-inner: rgba(0,255,180,.18);
}
.tvstack__frame {
  position: relative;
  max-width: min(980px, 92vw);
  margin: 0 auto;
}
.tvstack__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,.6));
  pointer-events: none; /* clicks pass to hotspots */
}

/* =============================
   Shared hotspot base
   ============================= */
.tv {
  position: absolute;
  display: block;
  outline: none;
  border-radius: 4px;               /* slightly rounds glow */
  isolation: isolate;               /* clean blend of ::after */
}
.tv::before,
.tv::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Global scanlines (light) */
@media (prefers-reduced-motion: no-preference) {
  .tv::before {
    background-image:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,var(--scanline-alpha)) 0px,
        rgba(255,255,255,var(--scanline-alpha)) 1px,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,0) 3px
      );
    mix-blend-mode: soft-light;
    opacity: .35;
  }
}

/* Subtle CRT glass/vignette */
.tv {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.28) inset,
    0 14px 24px rgba(0,0,0,.22);
}
.tv::after {
  background:
    radial-gradient(120% 160% at 50% 10%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,var(--crt-vignette)), rgba(0,0,0,0) 50%);
  mix-blend-mode: overlay;
  opacity: .65;
}

/* Hover/focus neon */
.tv:focus-visible,
.tv:hover {
  box-shadow:
    0 0 0 2px var(--hover-neon),
    0 0 24px var(--hover-neon-inner) inset,
    0 14px 24px rgba(0,0,0,.22);
}

/* =============================
   Per-screen FX (enhanced)
   ============================= */

/* 1) AC code — terminal boot + phosphor glow */
.tv--ac::after{
  background: radial-gradient(120% 140% at 50% 50%, rgba(0,255,140,.25), rgba(0,0,0,0) 60%);
  animation: acBoot 4.5s ease-in-out infinite;
  opacity:.18;
}
@keyframes acBoot{
  0%,100%{ opacity:.14; filter: blur(.5px) brightness(1.05); }
  40%    { opacity:.45; filter: blur(1.1px) brightness(1.25); }
}

/* 2) Spotify — equalizer sweep + glass blink */
.tv--spotify::after{
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,255,135,.30), rgba(0,0,0,0));
  mix-blend-mode: screen;
  animation: eqSweep 2.6s linear infinite, glassBlink 6s ease-in-out infinite;
  opacity:.0;
}
@keyframes eqSweep{
  0%{ opacity:.0; transform: translateX(-40%); }
  40%{ opacity:.62; transform: translateX(0%); }
  100%{ opacity:.0; transform: translateX(60%); }
}
@keyframes glassBlink {
  0%,100% { filter: saturate(100%); }
  50%     { filter: saturate(120%); }
}

/* 3) Instagram — magenta/orange CRT flicker */
.tv--instagram::after{
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(255,90,180,.30),
              rgba(255,140,0,.20) 60%,
              rgba(0,0,0,0) 65%);
  mix-blend-mode: screen;
  animation: igFlicker 3.2s steps(2,end) infinite;
  opacity:.24;
}
@keyframes igFlicker{
  0%, 12% { opacity:.14 }
  13%, 18% { opacity:.44 }
  19%, 100% { opacity:.24 }
}

/* 4) Facebook — blue pixel glitch sweep */
.tv--facebook::after{
  background: repeating-linear-gradient(90deg,
              rgba(100,170,255,.34) 0 2px,
              rgba(0,0,0,0) 2px 4px);
  mix-blend-mode: screen;
  opacity:.14;
  animation: fbGlitch 5s infinite;
}
@keyframes fbGlitch{
  0%, 86% { transform: translateX(0); opacity:.14 }
  87% { transform: translateX(-6%); opacity:.48 }
  88% { transform: translateX(5%); opacity:.36 }
  90%,100% { transform: translateX(0); opacity:.14 }
}

/* 5) YouTube — red buffer burst */
.tv--youtube::after{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,40,40,.36), rgba(0,0,0,0) 60%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.18) 0 2deg, rgba(0,0,0,0) 2deg 4deg);
  mix-blend-mode: screen;
  opacity:.0;
  animation: ytBurst 7s infinite;
}
@keyframes ytBurst{
  0%, 80% { opacity:0; filter:none }
  82% { opacity:.50; filter: contrast(150%) saturate(135%) }
  86% { opacity:.22; filter: contrast(120%) saturate(110%) }
  100% { opacity:0 }
}

/* 6) Apple Music — power-on flash */
.tv--apple::after{
  background: radial-gradient(70% 70% at 50% 50%, rgba(255,255,255,.60), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity:0;
  animation: appleFlash 5.4s ease-in-out infinite;
}
@keyframes appleFlash{
  0%, 86% { opacity:0 }
  87% { opacity:.78 }
  92% { opacity:.10 }
  100% { opacity:0 }
}

/* De-sync each TV a touch so nothing loops in perfect unison */
.tvstack .tv:nth-of-type(1) { animation-delay: .05s; }
.tvstack .tv:nth-of-type(2) { animation-delay: .22s; }
.tvstack .tv:nth-of-type(3) { animation-delay: .38s; }
.tvstack .tv:nth-of-type(4) { animation-delay: .61s; }
.tvstack .tv:nth-of-type(5) { animation-delay: .84s; }
.tvstack .tv:nth-of-type(6) { animation-delay: 1.05s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tv::before, .tv::after { animation: none !important; }
}

/* =============================
   Positioning (UNCHANGED)
   ============================= */
.tv--ac      { left: 38%;   top: 14.5%; width: 18%;   height: 14%;   }
.tv--spotify { left: 40.5%; top: 33.5%; width: 19%;   height: 15.5%; }
.tv--instagram{left: 20.8%; top: 55%;   width: 15%; height: 10.8%; }
.tv--facebook{ left: 23%;   top: 70.8%; width: 13.2%; height: 11.8%; }
.tv--youtube { left: 43.0%; top: 71.5%; width: 18%; height: 14%;   }
.tv--apple   { left: 69.2%; top: 69%;   width: 12.5%; height: 11.8%; }

/* =============================
   Debug overlay (toggle)
   - Add .is-debug to the tvstack section OR
     add .debug-tv to <body> to show colored hitboxes
   ============================= */
.tvstack.is-debug .tv,
.debug-tv .tv {
  background: rgba(0,255,0,0.25);
  outline: 1px dashed rgba(255,255,255,0.6);
  z-index: 10;
}
.tvstack.is-debug .tv--ac,        .debug-tv .tv--ac        { background: rgba(0,255,0,.35);      }
.tvstack.is-debug .tv--spotify,   .debug-tv .tv--spotify   { background: rgba(0,180,255,.35);    }
.tvstack.is-debug .tv--instagram, .debug-tv .tv--instagram { background: rgba(255,0,180,.35);    }
.tvstack.is-debug .tv--facebook,  .debug-tv .tv--facebook  { background: rgba(0,90,255,.35);     }
.tvstack.is-debug .tv--youtube,   .debug-tv .tv--youtube   { background: rgba(255,0,0,.35);      }
.tvstack.is-debug .tv--apple,     .debug-tv .tv--apple     { background: rgba(255,255,255,.35);  }
/* =========================================================================
   OVERRIDE: upgraded per-screen FX (no position changes)
   ========================================================================= */

/* shared CRT “breath” flicker */
@keyframes crtBreath {
  0%,100% { filter: brightness(1) contrast(1); }
  50%     { filter: brightness(1.05) contrast(1.07); }
}
.tv { animation: crtBreath 6.5s ease-in-out infinite; }

/* helper fx */
@keyframes chromaShiftX {
  0%,100% { box-shadow: 1px 0 0 rgba(255,0,80,.18), -1px 0 0 rgba(0,220,255,.18) inset; }
  50%     { box-shadow: 2px 0 0 rgba(255,0,80,.25), -2px 0 0 rgba(0,220,255,.25) inset; }
}
@keyframes rollLine {
  0% { background-position-y: -120%; opacity:.0; }
  12%{ opacity:.45; }
  24%{ background-position-y: 120%; opacity:.0; }
  100%{ background-position-y: 120%; opacity:.0; }
}
@keyframes tearGlitch {
  0%,92%,100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  94% { clip-path: inset(42% 0 42% 0); transform: translateX(-2%); }
  96% { clip-path: inset(42% 0 42% 0); transform: translateX(2%); }
  98% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* base rolling highlight layer for all TVs */
.tv::after {
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.00) 0%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,.00) 100%);
  background-size: 100% 14%;
  background-repeat: no-repeat;
  background-position: 50% -120%;
  animation: rollLine 7s cubic-bezier(.25,.1,.25,1) infinite;
  mix-blend-mode: overlay;
  opacity: .35;
}

/* AC — green phosphor + matrix bloom */
.tv--ac::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 140% at 50% 50%, rgba(0,255,120,.32), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  animation: chromaShiftX 4.6s ease-in-out infinite;
}

/* Spotify — spectrum sweep + color pop */
.tv--spotify::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,255,135,.30), rgba(0,0,0,0));
  mix-blend-mode: screen;
  animation: eqSweep 2.4s linear infinite, tearGlitch 10s ease-in-out infinite;
}
@keyframes eqSweep {
  0%{ opacity:.0; transform: translateX(-40%); }
  40%{ opacity:.65; transform: translateX(0%); }
  100%{ opacity:.0; transform: translateX(60%); }
}

/* Instagram — hot magenta/orange pulse */
.tv--instagram::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(255,90,180,.34),
              rgba(255,140,0,.22) 60%,
              rgba(0,0,0,0) 66%);
  mix-blend-mode: screen;
  animation: igPulse 3s steps(2,end) infinite;
}
@keyframes igPulse {
  0%, 12% { opacity:.14 }
  13%, 22% { opacity:.42 }
  23%, 100% { opacity:.24 }
}

/* Facebook — horizontal glitch bands */
.tv--facebook::before {
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg,
              rgba(120,180,255,.34) 0 2px,
              rgba(0,0,0,0) 2px 4px);
  mix-blend-mode: screen;
  animation: fbGlitch 5s infinite;
}
@keyframes fbGlitch {
  0%, 84% { transform: translateX(0); opacity:.14 }
  86%     { transform: translateX(-6%); opacity:.50 }
  88%     { transform: translateX(5%);  opacity:.36 }
  92%,100%{ transform: translateX(0);  opacity:.14 }
}

/* YouTube — red flare + burst */
.tv--youtube::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(255,40,40,.40), rgba(0,0,0,0) 60%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.20) 0 2deg, rgba(0,0,0,0) 2deg 4deg);
  mix-blend-mode: screen;
  animation: ytBurst 7.2s infinite;
}
@keyframes ytBurst {
  0%, 78% { opacity:0; filter:none }
  81%     { opacity:.55; filter: contrast(150%) saturate(135%) }
  85%     { opacity:.22; filter: contrast(120%) saturate(110%) }
  100%    { opacity:0;  filter:none }
}

/* Apple — white power flash */
.tv--apple::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(72% 72% at 50% 50%, rgba(255,255,255,.65), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  animation: appleFlash 5.8s ease-in-out infinite;
}
@keyframes appleFlash {
  0%, 86% { opacity:0 }
  87%     { opacity:.80 }
  92%     { opacity:.12 }
  100%    { opacity:0 }
}
/* =========================================================================
   OVERRIDE ++ : Cinematic CRT / Glitch FX (no position changes)
   Paste at the very bottom of tv-stack.css
   ========================================================================= */

/* ---- Master knobs (tweak if you want stronger/weaker global look) ---- */
.tvstack {
  --fx-breath-bright: 1.06;
  --fx-breath-contrast: 1.08;
  --fx-chroma-r: rgba(255, 0, 90, .22);
  --fx-chroma-c: rgba(0, 220, 255, .22);
  --fx-bloom: .14;            /* global bloom strength */
  --fx-roll-speed: 6.6s;      /* rolling line speed */
  --fx-vhold-speed: 13s;      /* vertical hold drift */
  --fx-wobble-speed: 7.5s;    /* tube wobble */
}

/* ---- Global tube “breath” and micro-wobble ---- */
@keyframes crtBreathX {
  0%,100% { filter: brightness(1) contrast(1); transform: translate3d(0,0,0) }
  50%     { filter: brightness(var(--fx-breath-bright)) contrast(var(--fx-breath-contrast)); transform: translate3d(0,0,0) }
}
@keyframes crtWobble {
  0%,100% { transform: translate(0,0) skewX(0deg) }
  25%     { transform: translate(.15%, -.1%) skewX(.08deg) }
  50%     { transform: translate(-.2%, .12%) skewX(-.06deg) }
  75%     { transform: translate(.1%, .06%) skewX(.05deg) }
}
.tv {
  animation: crtBreathX 6.8s ease-in-out infinite, crtWobble var(--fx-wobble-speed) ease-in-out infinite;
  will-change: transform, filter;
}

/* ---- Chroma bleed (RGB misalignment on the glass) ---- */
@keyframes chromaBleed {
  0%,100% { box-shadow:
    1px 0 0 var(--fx-chroma-r),
   -1px 0 0 var(--fx-chroma-c) inset; }
  50%     { box-shadow:
    2px 0 0 var(--fx-chroma-r),
   -2px 0 0 var(--fx-chroma-c) inset; }
}
.tv { animation-name: crtBreathX, crtWobble, chromaBleed; animation-duration: 6.8s, var(--fx-wobble-speed), 4.4s; }

/* ---- Shared rolling highlight + vertical-hold drift on ::after ---- */
@keyframes rollLineX {
  0%   { background-position-y: -120%; opacity: .0; }
  10%  { opacity: .42; }
  25%  { background-position-y: 120%; opacity: .0; }
  100% { background-position-y: 120%; opacity: .0; }
}
@keyframes vHold {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(.35%); }
}

/* Rebuild ::after so it stacks with your previous rules and wins by cascade */
.tv::after {
  content:"";
  position:absolute; inset:0;
  background:
    /* highlight sweep */
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,0) 100%);
  background-size: 100% 14%;
  background-repeat: no-repeat;
  background-position: 50% -120%;
  mix-blend-mode: overlay;
  opacity: .38;
  animation: rollLineX var(--fx-roll-speed) cubic-bezier(.25,.1,.25,1) infinite,
             vHold var(--fx-vhold-speed) ease-in-out infinite;
}

/* ---- Gentle bloom on every screen (subtle, not foggy) ---- */
@keyframes bloomPulse {
  0%,100% { filter: saturate(105%) contrast(105%); }
  50%     { filter: saturate(115%) contrast(112%); }
}
.tv::before { animation: bloomPulse 9s ease-in-out infinite; }

/* ---- Occasional horizontal tear glitch (per-screen opt-in) ---- */
@keyframes tearGlitch {
  0%,92%,100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  94% { clip-path: inset(40% 0 40% 0); transform: translateX(-1.8%); }
  96% { clip-path: inset(40% 0 40% 0); transform: translateX(1.8%); }
  98% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* =========================
   PER-SCREEN IDENTITY FX++
   (no positions changed)
   ========================= */

/* 1) AC — green terminal + faint rain bands */
@keyframes acRain {
  0%   { background-position: 0 0, 0 0; opacity:.20; }
  100% { background-position: 0 60%, 0 0; opacity:.28; }
}
.tv--ac::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(110% 130% at 50% 50%, rgba(0,255,120,.30), rgba(0,0,0,0) 60%),
    repeating-linear-gradient( to bottom, rgba(0,255,120,.09) 0 2px, rgba(0,0,0,0) 2px 6px );
  mix-blend-mode: screen;
  animation: acRain 3.6s linear infinite;
}

/* 2) Spotify — EQ sweep + tear blip (rare) */
@keyframes eqSweepX {
  0%   { opacity:0; transform: translateX(-42%); }
  40%  { opacity:.66; transform: translateX(0%); }
  100% { opacity:0; transform: translateX(58%); }
}
.tv--spotify::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(0,255,135,.34), rgba(0,0,0,0));
  mix-blend-mode: screen;
  animation: eqSweepX 2.3s linear infinite, tearGlitch 11s ease-in-out infinite;
}

/* 3) Instagram — neon magenta/orange shimmer + diagonal kiss */
@keyframes igSweep {
  0%   { background-position: 120% -120%; opacity:.14; }
  50%  { background-position: -120% 120%; opacity:.38; }
  100% { background-position: 120% -120%; opacity:.24; }
}
.tv--instagram::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(45deg, rgba(255,95,190,.32), rgba(255,140,0,.20) 60%, rgba(0,0,0,0) 70%),
    radial-gradient(60% 60% at 50% 50%, rgba(255,90,180,.30), rgba(255,140,0,.22) 62%, rgba(0,0,0,0) 68%);
  background-size: 140% 140%, cover;
  mix-blend-mode: screen;
  animation: igSweep 3.2s ease-in-out infinite;
}

/* 4) Facebook — multi-band pixel sweep */
@keyframes fbBands {
  0%   { background-position: 0 0; opacity:.12; }
  45%  { background-position: 35% 0; opacity:.40; }
  100% { background-position: 100% 0; opacity:.12; }
}
.tv--facebook::before {
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(120,180,255,.36) 0 2px,
      rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(90deg,
      rgba(120,180,255,.22) 0 1px,
      rgba(0,0,0,0) 1px 3px);
  background-size: auto, auto;
  mix-blend-mode: screen;
  animation: fbBands 5.4s ease-in-out infinite;
}

/* 5) YouTube — flare + scan pop + brief red overdrive */
@keyframes ytBurstX {
  0%, 78% { opacity:0; filter:none; transform: scale(1); }
  81%     { opacity:.56; filter: contrast(155%) saturate(140%); transform: scale(1.005); }
  84%     { opacity:.24; filter: contrast(120%) saturate(112%); transform: scale(1); }
  100%    { opacity:0;  filter:none; transform: scale(1); }
}
.tv--youtube::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(255,40,40,.42), rgba(0,0,0,0) 60%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.20) 0 2deg, rgba(0,0,0,0) 2deg 4deg);
  mix-blend-mode: screen;
  animation: ytBurstX 7.1s infinite;
}

/* 6) Apple — cleaner power flash + lens bloom */
@keyframes appleFlashX {
  0%, 86% { opacity:0; filter:none }
  87%     { opacity:.82; filter: brightness(1.25) }
  92%     { opacity:.12; filter: brightness(1.06) }
  100%    { opacity:0;  filter:none }
}
.tv--apple::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(74% 74% at 50% 50%, rgba(255,255,255,.66), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  animation: appleFlashX 5.7s ease-in-out infinite;
}

/* ---- Desync each TV further so nothing loops in sync ---- */
.tvstack .tv:nth-of-type(1) { animation-delay: .05s, .0s, .18s; }
.tvstack .tv:nth-of-type(2) { animation-delay: .22s, .05s, .35s; }
.tvstack .tv:nth-of-type(3) { animation-delay: .38s, .12s, .55s; }
.tvstack .tv:nth-of-type(4) { animation-delay: .61s, .18s, .75s; }
.tvstack .tv:nth-of-type(5) { animation-delay: .84s, .25s, .95s; }
.tvstack .tv:nth-of-type(6) { animation-delay: 1.05s, .32s, 1.15s; }

/* ---- Respect reduced motion (kills all the extra animations) ---- */
@media (prefers-reduced-motion: reduce) {
  .tv, .tv::before, .tv::after { animation: none !important; transform: none !important; filter: none !important; }
}
/* ==== Per-TV overlay base (needs a <span class="fx"> inside each .hs, or inject via JS) ==== */
.tvsfx .hs { position:absolute; display:block; }
.tvsfx .hs .fx{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.35) 35%,
      rgba(0,255,180,.25) 55%,
      rgba(0,0,0,0) 70%);
  filter: blur(1.2px);
}

/* Flicker + glow timing (stagger via nth-child on the hotspots you already have) */
@keyframes tv-surge {
  0%, 35%, 100% { opacity: 0; }
  45% { opacity: .7; }
  50% { opacity: 1; }
  55% { opacity: .6; }
}

@keyframes surge-flicker {
  0%, 18%, 22%, 100% { opacity: 1; }
  20% { opacity: .4; }
}

/* Staggered overlays per hotspot */
.tvsfx .hs:nth-child(1) .fx {
  animation: tv-surge 6s infinite ease-in-out 0s, surge-flicker 7s infinite steps(1) 0s;
}
.tvsfx .hs:nth-child(2) .fx {
  animation: tv-surge 6s infinite ease-in-out 1.2s, surge-flicker 7s infinite steps(1) 1.2s;
}
.tvsfx .hs:nth-child(3) .fx {
  animation: tv-surge 6s infinite ease-in-out 2.4s, surge-flicker 7s infinite steps(1) 2.4s;
}
.tvsfx .hs:nth-child(4) .fx {
  animation: tv-surge 6s infinite ease-in-out 3.6s, surge-flicker 7s infinite steps(1) 3.6s;
}
/* add more nth-child rules if you have more TVs */

/* Whole-stack power surge (hits the <img>) */
@keyframes stack-surge {
  0%,100% { filter:none; }
  40%     { filter:brightness(1.35) contrast(1.25) saturate(1.2); }
  50%     { filter:brightness(2.2) contrast(1.6)  saturate(1.8) drop-shadow(0 0 26px rgba(0,255,180,.85)); }
  60%     { filter:brightness(1.45) contrast(1.25) saturate(1.3); }
}
.tvsfx__frame.is-power-surge > img { animation: stack-surge .68s ease both; }
/* =============================
   TV WALL — Stagger + Power Surge
   (CSS-only; matches your HTML)
   ============================= */

/* Ensure correct layering */
.tvstack__frame { position: relative; }
.tvstack__frame > .tvstack__img { display:block; width:100%; height:auto; position:relative; z-index:0; }
.tvstack__frame > .tv { position:absolute; display:block; pointer-events:auto; z-index:2; }

/* Per-TV glow overlay (lights pixels beneath via screen blend) */
.tvstack__frame > .tv::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.35) 35%,
      rgba(0,255,180,.25) 55%,
      rgba(0,0,0,0) 72%);
  filter: blur(1.1px);
}

/* Flicker + glow */
@keyframes tv-flicker {
  0%, 32%, 100% { opacity: 0; transform: none; }
  40% { opacity: .65; transform: scale(1.01); }
  50% { opacity: 1;   transform: scale(1.02); }
  58% { opacity: .55; transform: scale(1.005); }
}

/* Staggered timings per DOM order (ac, spotify, instagram, facebook, youtube, apple) */
.tvstack__frame > .tv:nth-of-type(1)::before { animation: tv-flicker 6.5s ease-in-out infinite 0.0s; }
.tvstack__frame > .tv:nth-of-type(2)::before { animation: tv-flicker 6.5s ease-in-out infinite 1.0s; }
.tvstack__frame > .tv:nth-of-type(3)::before { animation: tv-flicker 6.5s ease-in-out infinite 2.0s; }
.tvstack__frame > .tv:nth-of-type(4)::before { animation: tv-flicker 6.5s ease-in-out infinite 3.0s; }
.tvstack__frame > .tv:nth-of-type(5)::before { animation: tv-flicker 6.5s ease-in-out infinite 4.0s; }
.tvstack__frame > .tv:nth-of-type(6)::before { animation: tv-flicker 6.5s ease-in-out infinite 5.0s; }
/* add more nth-of-type rules if you add more TVs */

/* Optional scanline flash during peaks */
.tvstack__frame > .tv::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.22) 0px,
      rgba(255,255,255,.22) 1px,
      transparent 2px,
      transparent 3px);
}
@keyframes tv-scan {
  0%, 32%, 100% { opacity: 0; }
  48% { opacity: .18; }
}
.tvstack__frame > .tv:nth-of-type(1)::after { animation: tv-scan 6.5s ease-in-out infinite 0.0s; }
.tvstack__frame > .tv:nth-of-type(2)::after { animation: tv-scan 6.5s ease-in-out infinite 1.0s; }
.tvstack__frame > .tv:nth-of-type(3)::after { animation: tv-scan 6.5s ease-in-out infinite 2.0s; }
.tvstack__frame > .tv:nth-of-type(4)::after { animation: tv-scan 6.5s ease-in-out infinite 3.0s; }
.tvstack__frame > .tv:nth-of-type(5)::after { animation: tv-scan 6.5s ease-in-out infinite 4.0s; }
.tvstack__frame > .tv:nth-of-type(6)::after { animation: tv-scan 6.5s ease-in-out infinite 5.0s; }

/* Whole-stack POWER SURGE on the PNG itself (periodic, no JS) */
@keyframes stack-surge {
  0%, 100% { filter:none; }
  42% { filter:brightness(1.28) contrast(1.22) saturate(1.12); }
  50% { filter:brightness(2.2) contrast(1.6) saturate(1.8) drop-shadow(0 0 26px rgba(0,255,180,.85)); }
  60% { filter:brightness(1.45) contrast(1.25) saturate(1.3); }
}
.tvstack__img{
  animation: stack-surge 14s ease-in-out infinite; /* adjust period as you like */
}

/* Debug helper: outline target boxes */
.tvstack.debug .tv{ outline:1px dashed rgba(0,255,180,.55); }