/* EL STUDIO — tv: a late-80s CRT set + VCR deck (shared by hero, modal player .tv--big, coming-soon .tv--small) */
.tv { position: relative; width: 100%; --pad: 18px; --bz: 9px; --panel: 64px; }

/* ---------- moulded plastic cabinet */
.tv__body {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--panel); gap: var(--pad);
  padding: var(--pad); border-radius: 20px 20px 15px 15px / 18px 18px 13px 13px;
  background:
    radial-gradient(130% 70% at 28% -12%, rgba(255,255,255,.11), transparent 58%),
    linear-gradient(180deg, #312d30 0%, #242123 38%, #1b191b 78%, #151315 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.17), inset 0 -3px 1px rgba(0,0,0,.55),
    inset 2px 0 1px rgba(255,255,255,.05), inset -2px 0 1px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 0 1px #0b0a0b, 0 2px 0 1px #080708,
    0 30px 46px -12px rgba(0,0,0,.75), 0 60px 110px -20px rgba(0,0,0,.55);
}
/* fine sand-blast texture + parting line */
.tv__body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--noise); opacity: .22; mix-blend-mode: overlay; }
.tv__body::before { content: ""; position: absolute; left: 3%; right: 3%; bottom: 7px; height: 1px; background: rgba(0,0,0,.55); box-shadow: 0 1px 0 rgba(255,255,255,.05); pointer-events: none; }

/* ---------- inner bezel + curved glass */
.tv__bezel {
  position: relative; padding: var(--bz); border-radius: 16px / 14px;
  background: linear-gradient(#121012, #0a090a 60%, #100e10);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.07), 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08);
}
.tv__screen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; background: #070908;
  border-radius: 5% / 7%;
  box-shadow: 0 0 0 7px #0d0c0d, 0 0 0 9px #2a272a, 0 0 0 10px #0a090a, inset 0 0 40px rgba(0,0,0,.9);
}
.tv__bezel .tv__screen { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(255,255,255,.04); }
.tv__screen video, .tv__screen img, .tv__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; filter: saturate(1.12) contrast(1.08) brightness(1.03); }
.tv__osd {
  position: absolute; z-index: 4; left: 6%; right: 6%; bottom: 7%; display: flex; gap: .9em; align-items: baseline;
  font: 400 clamp(16px, 1.8vw, 26px)/1 var(--f-crt); color: #e9fff0; letter-spacing: .04em;
  text-shadow: 0 0 2px #fff, 0 0 8px rgba(140,255,170,.7), 2px 2px 0 rgba(0,0,0,.55);
  pointer-events: none;
}
.crt-fx {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(90% 70% at 34% 22%, rgba(255,255,255,.075), transparent 60%),
    linear-gradient(166deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 26%, transparent 26.4%),
    radial-gradient(ellipse at 50% 48%, transparent 56%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.82) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,40,40,.035) 0 1px, rgba(40,255,90,.03) 1px 2px, rgba(60,90,255,.04) 2px 3px);
  box-shadow: inset 0 0 24px rgba(0,0,0,.75), inset 0 0 3px rgba(0,0,0,.9);
}
/* window reflection on the glass */
.crt-fx::before { content: ""; position: absolute; left: 5%; top: 5%; width: 24%; height: 15%; border-radius: 45% 40% 50% 45%; background: linear-gradient(170deg, rgba(255,255,255,.13), rgba(255,255,255,.02)); filter: blur(5px); transform: skewX(-8deg); }
/* slow roll bar */
.crt-fx::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(transparent, rgba(255,255,255,.035) 50%, transparent); animation: roll 8s linear infinite; }
.crt-fx--light { background: 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); box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.crt-fx--light::after { display: none; }
@keyframes roll { from { transform: translateY(-110%); } to { transform: translateY(560%); } }
.tv.is-on .tv__bezel { box-shadow: inset 0 3px 5px rgba(0,0,0,.85), inset 0 0 22px rgba(150,180,255,.09), inset 0 -1px 0 rgba(255,255,255,.07), 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08); }

/* ---------- side control panel */
.tv__panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 2px; min-height: 0; }
.tv__brand { font: 400 13px/1 var(--f-crt); color: #d8d2dc; letter-spacing: .08em; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .78; text-shadow: 0 -1px 0 rgba(0,0,0,.8); }
.tv__brand small { display: block; font: 400 1em/1.2 var(--f-crt); letter-spacing: .1em; opacity: .8; }
.tv__grill {
  flex: 1; width: 100%; max-width: 46px; min-height: 50px; border-radius: 5px;
  background: radial-gradient(circle, #040304 0 1.25px, transparent 1.7px) 1px 1px / 6px 6px, linear-gradient(#2a272a, #1c1a1c);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.06);
}
.tv__knob {
  --k: 44px; position: relative; width: var(--k); height: var(--k); flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: repeating-conic-gradient(#2c292d 0 5deg, #111012 5deg 10deg);
  box-shadow: 0 0 0 2px #0a090a, 0 4px 5px rgba(0,0,0,.7), 0 1px 0 2px rgba(255,255,255,.06);
  transition: transform .45s cubic-bezier(.3,1.4,.5,1);
}
.tv__knob::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #6c666f, #2d2a2f 55%, #1b191c); box-shadow: inset 0 1px 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.6); }
.tv__knob::after { content: ""; position: absolute; left: 50%; top: 18%; width: 3px; height: 26%; margin-left: -1.5px; border-radius: 2px; background: #efe9e2; box-shadow: 0 0 1px rgba(0,0,0,.6); }
.tv__knob[aria-pressed="true"] { transform: rotate(130deg); }
.tv__knob:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.tv__led { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a1a1c, #2a0709); box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 0 0 1.5px #0b0a0b; margin-bottom: 2px; }
.tv__led--on, .tv.is-on .tv__led { background: radial-gradient(circle at 40% 35%, #ffd6d0, #ff3a2e 45%, #c4000c); box-shadow: 0 0 0 1.5px #0b0a0b, 0 0 6px #ff2020, 0 0 14px rgba(255,0,0,.7); }

/* ---------- VCR (basic deck: modal player / small uses) */
.vcr {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 10px 6% 0; height: 48px; padding: 0 16px;
  border-radius: 4px 4px 7px 7px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(#2d2a2e, #1b191c 55%, #121113);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.5), 0 0 0 1px #080708, 0 16px 26px rgba(0,0,0,.55);
}
.vcr__slot { position: relative; flex: 1; height: 14px; border-radius: 2px; background: linear-gradient(#020202, #0b0a0b); box-shadow: inset 0 2px 3px #000, 0 1px 0 rgba(255,255,255,.08); overflow: visible; }
.vcr__tape {
  position: absolute; z-index: 0; isolation: isolate; left: 10%; right: 10%; bottom: 3px; height: 17px; padding: 2px 9px 0;
  border-radius: 2px 2px 0 0; background: linear-gradient(#1a181b, #0e0d0f); border: 1px solid #2f2c31; border-bottom: 0;
  font: 400 13px/14px var(--f-marker); color: #1b1714; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.vcr__tape::before { content: ""; position: absolute; z-index: -1; inset: 2px 6px 2px; background: linear-gradient(#f3ead8, #e2d6bd); border-radius: 1px; }
.vcr__clock { font: 400 22px/1 var(--f-crt); color: #7dffc4; text-shadow: 0 0 6px rgba(80,255,180,.75), 0 0 14px rgba(80,255,180,.3); }
.vcr__btns { display: flex; gap: 6px; }
.vcr__btns i { width: 16px; height: 8px; border-radius: 2px; background: linear-gradient(#5a565d, #2e2b30); box-shadow: 0 2px 0 #0b0a0c; }
.vcr--big { height: 56px; }
.vcr__eject {
  border: 1px solid #000; border-radius: 3px; padding: 9px 13px 7px; cursor: pointer;
  background: linear-gradient(#e9e5e9, #a9a4ab 55%, #c9c4cb); color: #141214; font: 400 14px/1 var(--f-crt);
  box-shadow: 0 3px 0 #050405, inset 0 1px 0 rgba(255,255,255,.8);
}
.vcr__eject:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

/* ---------- VCR blue screen: the deck's own character generator, flat blue with chunky white letters
   (hero TV: #heroBlue in partials/onair.html; player: a cover core.js adds to #playerScreen) */
.tv__blue {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 42%, #1426c2, #0b1fae 58%, #08178c);
  font: 400 clamp(18px, 2.4vw, 34px)/1 var(--f-crt); letter-spacing: .06em; color: #f3f5ff;
  text-shadow: 0 0 1px #fff, 0 0 7px rgba(190,205,255,.45), .09em .09em 0 rgba(2,6,52,.8);
}
.tv__blue b { position: absolute; left: 8%; top: 10%; font: inherit; font-size: 1.55em; white-space: nowrap; }
.tv__blue span { position: absolute; left: 8%; right: 8%; bottom: 11%; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- shared VCR moves (timed by the CUE table in hero.js, see hero.css and the player rules below) */
@keyframes vcrKey {                                  /* a front-panel key pressed and held, then sprung back */
  0% { transform: none; filter: none; }
  10%, 66% { transform: translateY(2px); filter: brightness(.8); }
  82% { transform: translateY(-.5px); filter: brightness(1.04); }
  100% { transform: none; filter: none; }
}
@keyframes vcrThread {                               /* the threading motor kicks in: the whole deck shudders a hair */
  0%, 100% { transform: none; }
  18% { transform: translateY(1px); }
  42% { transform: translateY(-.7px); }
  66% { transform: translateY(.35px); }
  84% { transform: translateY(-.15px); }
}
@keyframes vcrDip { 0%, 100% { filter: none; } 22% { filter: brightness(.45); } 55% { filter: brightness(1.18); } }   /* VFD dims as the motor draws current */
@keyframes vcrBlink { 50% { opacity: .18; } }
@keyframes blueOn {                                  /* the blue screen comes up and the set catches its sync */
  0% { transform: translateY(-5%); filter: brightness(1.45); }
  34% { transform: translateY(2%); filter: brightness(1.12); }
  67% { transform: translateY(-.6%); filter: none; }
  100% { transform: none; filter: none; }
}
.vcr__clock.is-blink { animation: vcrBlink 1s steps(1, end) infinite; }

/* ---------- player modal (core.js): opening loads the cassette (pushed in, seats at --i-seat, threads at
   --i-thread) behind the blue screen, which breaks into static and clears by --m-clear. Closing ejects it (pops at
   --e-pop) before the whole set fades out over --m-fade. */
.tv--big #playerScreen::before { content: none; }    /* the old white warm-up flash: the blue screen replaces it */
#player .tv__blue { z-index: 4; }
#player .tv__blue::after {                           /* snow */
  content: ""; position: absolute; inset: -12%; opacity: 0;
  background: var(--noise) 0 0 / 150px 150px, #4a4c55; filter: grayscale(1) contrast(2.4) brightness(1.35);
}
#player.is-loading .tv__blue { animation: coverOut calc(var(--m-clear) - var(--i-seat)) cubic-bezier(.55,0,.75,.45) var(--i-seat) both; }
#player.is-loading .tv__blue::after { animation: coverSnow calc(var(--m-clear) - var(--i-seat)) linear var(--i-seat) both, snowShift .12s steps(1, end) infinite; }
#player.is-eject .tv__blue { animation: coverOn 1ms linear var(--e-blue) both, blueOn .16s steps(1, end) var(--e-blue) both; }
@keyframes coverOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes coverOn { from { opacity: 0; } to { opacity: 1; } }
@keyframes coverSnow { 0% { opacity: 0; } 22%, 100% { opacity: .92; } }
@keyframes snowShift { 0% { transform: translate(0, 0); } 33% { transform: translate(-7%, 4%); } 66% { transform: translate(5%, -6%); } 100% { transform: translate(-3%, 7%); } }

.vcr--big .vcr__tape { transform-origin: 50% 100%; }
#player.is-loading .vcr--big .vcr__tape {
  animation:
    bigPush var(--i-grab) cubic-bezier(.4,.1,.3,1) both,                                         /* 0–0.40 pushed in */
    bigPull calc(var(--i-seat) - var(--i-grab)) cubic-bezier(.32,.12,.42,1) var(--i-grab) forwards, /* carriage pulls it */
    bigSeat .2s linear var(--i-seat) forwards;                                                    /* seats with a bump */
}
#player.is-loading .vcr--big { animation: vcrThread .26s linear var(--i-thread) both; }
#player.is-loading .vcr--big .vcr__clock { animation: vcrDip .3s ease-out var(--i-thread) both; }
#player.is-eject .vcr--big .vcr__eject { animation: vcrKey .34s cubic-bezier(.3,.7,.4,1) both; }
#player.is-eject .vcr--big .vcr__clock { animation: vcrBlink 1s steps(1, end) infinite; }
#player.is-eject .vcr--big .vcr__tape {
  animation:
    bigLift calc(var(--e-pop) - var(--e-lift)) cubic-bezier(.3,.2,.3,1) var(--e-lift) both,      /* carriage rises */
    bigPop .45s linear var(--e-pop) forwards;                                                     /* 1.20 pops out */
}
#player.is-fading { opacity: 0; transition: opacity var(--m-fade) ease; }
#player.is-fading .player__inner { transform: translateY(10px) scale(.975); transition: transform var(--m-fade) ease-in; }
@keyframes bigPush { 0% { transform: translateY(-30px) scale(1.1); opacity: 0; filter: brightness(1.2); } 30% { opacity: 1; } 100% { transform: translateY(-5px) scale(1.01); opacity: 1; filter: brightness(1); } }
@keyframes bigPull { 0% { transform: translateY(-5px) scale(1.01); } 6% { transform: translateY(-4px) scale(1.005); } 100% { transform: translateY(-1px) scale(1); } }
@keyframes bigSeat { 0% { transform: translateY(-1px); } 15% { transform: translateY(2px); } 45% { transform: translateY(-.5px); } 75% { transform: translateY(.3px); } 100% { transform: none; } }
@keyframes bigLift { to { transform: translateY(-4px) scale(1.01); } }
@keyframes bigPop {
  0% { transform: translateY(-4px) scale(1.01); filter: brightness(1); animation-timing-function: cubic-bezier(.1,.75,.3,1); }
  13% { transform: translateY(-21px) scale(1.07); filter: brightness(1.16); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  30% { transform: translateY(-13px) scale(1.05); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  48% { transform: translateY(-16.5px) scale(1.06); animation-timing-function: ease-in-out; }
  100% { transform: translateY(-15px) scale(1.06); filter: brightness(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  #player .tv__blue, #player .tv__blue::after, #player .vcr--big, #player .vcr--big .vcr__tape, #player .vcr__eject, #player .vcr__clock, .vcr__clock.is-blink { animation: none !important; }
  #player.is-fading .player__inner { transform: none; }
}

/* ---------- size variants */
.tv--big { --pad: 16px; --panel: 56px; }
.tv--big .tv__screen { aspect-ratio: 16 / 9; }
.tv--small { max-width: 520px; cursor: pointer; transform: rotate(1.5deg); --pad: 14px; --panel: 44px; }
.tv--small .tv__body { border-radius: 18px; }
.tv--small .tv__screen { aspect-ratio: 16/10; }
@media (max-width: 640px) {
  .tv { --pad: 11px; --panel: 38px; }
  .tv__body { border-radius: 16px; }
  .tv__knob { --k: 32px; }
  .vcr { height: 38px; margin: 8px 4% 0; padding: 0 10px; }
  .vcr__btns { display: none; }
  .vcr__clock { font-size: 18px; }
  .tv--big .tv__body { grid-template-columns: 1fr; padding: 8px; border-radius: 14px; }
  .tv--big .tv__panel { display: none; }
}