/* EL STUDIO — vhs.css: analog VHS/CRT realism layer (loaded last; appearance only, no layout) */

/* ---------- analog snow: the low-res static canvases scale up soft, like a tube, not as square pixels */
.tv__static { image-rendering: auto; }
.tv--hero.is-static .tv__static { filter: contrast(1.12) brightness(1.06); }

/* ---------- tape picture: soft VHS resolution, warm bleeding chroma, slightly lifted blacks */
.vhs video { filter: saturate(1.2) contrast(1.05) brightness(1.05) sepia(.06) blur(.35px); }
.vhs--cam video { filter: saturate(1.1) contrast(1.06) brightness(1.04) blur(.3px); }

/* ---------- the VHS layer (injected by vhs.js right above each tape's picture) */
.vhs-fx {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit;
  /* CRT misconvergence at the glass edge + a little phosphor bloom in the middle of the tube */
  background: radial-gradient(ellipse 62% 56% at 50% 46%, rgba(255,244,226,.055), transparent 72%);
  box-shadow: inset 2px 0 2px -1px rgba(255,46,70,.2), inset -2px 0 2px -1px rgba(46,210,255,.18), inset 0 0 1px rgba(0,0,0,.6);
}
/* AGC / mains hum: the picture breathes a touch */
.vhs-fx::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.07); opacity: 0; }

/* head-switching noise: the jittering, smeared band at the very bottom of every VHS frame */
.vhs-fx__head, .vhs-fx__tear, .vhs-fx__track::before {
  position: absolute; left: -12%; right: -12%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.5) 22%, rgba(235,240,255,.1) 46%, rgba(0,0,0,.45) 100%),
    var(--noise) 0 0 / 150px 4px;
}
.vhs-fx__head { bottom: 0; height: 2.4%; opacity: .5; transform: translateX(-3%) skewX(-24deg); }
.vhs--cam .vhs-fx__head { opacity: .3; }

/* a tracking line that drifts up through the picture now and then */
.vhs-fx__track { position: absolute; inset: 0; opacity: 0; }
.vhs-fx__track::before {
  content: ""; bottom: 0; height: 1.6%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.3) 50%, rgba(255,255,255,0)),
    var(--noise) 0 0 / 190px 3px;
}

/* tracking slip (vhs.js adds .is-glitch for a fraction of a second) */
.vhs-fx__tear { top: var(--tear, 60%); height: 4.5%; opacity: 0; }
.vhs.is-glitch .vhs-fx__tear { opacity: .75; }

@media (prefers-reduced-motion: no-preference) {
  .vhs.is-vis video { animation: vhsJitter 5.3s steps(1, end) infinite; }
  .vhs.is-vis.is-glitch video { animation: vhsKick .36s steps(1, end) infinite; }
  .tv.is-static .vhs.is-vis video { animation: none; }
  .vhs.is-vis .vhs-fx__head { animation: vhsHead .27s steps(1, end) infinite; }
  .vhs.is-vis.is-glitch .vhs-fx__tear { animation: vhsHead .18s steps(1, end) infinite; }
  .vhs.is-vis .vhs-fx__track { animation: vhsTrack 14s linear infinite 2s; }
  .vhs.is-vis .vhs-fx::before { animation: vhsBreath 3.9s steps(1, end) infinite; }
  .vhs-hidden .vhs * , .vhs-hidden .vhs-fx::before { animation-play-state: paused !important; }
}

/* sub-pixel timebase wobble of the whole picture */
@keyframes vhsJitter {
  0%, 100% { transform: none; }
  9% { transform: translateX(.6px); }
  10.5% { transform: none; }
  31% { transform: translateX(-.5px); }
  32% { transform: translateX(.45px); }
  33.5% { transform: none; }
  58% { transform: translateX(.7px); }
  59% { transform: none; }
  77% { transform: translateX(-.6px); }
  78.5% { transform: none; }
}
@keyframes vhsKick {
  0% { transform: translateX(3px) skewX(-1deg); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(4px) skewX(.6deg); }
  75% { transform: translateX(-1px); }
}
@keyframes vhsHead {
  0% { transform: translateX(-3%) skewX(-24deg); background-position: 0 0, 0 0; }
  25% { transform: translateX(4%) skewX(-18deg); background-position: 0 0, -37px 2px; }
  50% { transform: translateX(-1%) skewX(-30deg); background-position: 0 0, 61px 1px; }
  75% { transform: translateX(6%) skewX(-21deg); background-position: 0 0, -88px 3px; }
}
@keyframes vhsTrack {
  0% { transform: translateY(4%); opacity: 0; }
  5% { opacity: .55; }
  28% { opacity: .3; }
  40% { transform: translateY(-104%); opacity: 0; }
  100% { transform: translateY(-104%); opacity: 0; }
}
@keyframes vhsBreath {
  0%, 100% { opacity: 0; }
  21% { opacity: .7; }
  23% { opacity: .2; }
  47% { opacity: 1; }
  49% { opacity: 0; }
  71% { opacity: .5; }
  74% { opacity: 0; }
}

/* ---------- big player: barely-there phosphor bloom only, the film stays clean */
.tv--big .crt-fx--light { background-image: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255,244,226,.03), transparent 72%), linear-gradient(166deg, rgba(255,255,255,.07), transparent 26%), radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.42) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px); }

/* ---------- glass: a touch more tube curvature in the corners of the small sets */
.crt-fx { box-shadow: inset 0 0 24px rgba(0,0,0,.75), inset 0 0 3px rgba(0,0,0,.9), inset 0 0 60px -20px rgba(0,0,0,.55); }
.crt-fx--light { box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
/* ---------- intro: no tracking kick on the broadcast either */