/* Film Packages: the 3D television (assets/js/mv-tv.js). Without WebGL (or before three.js loads) the same markup is a
   plain 16:9 player with the channel buttons showing. */
header#header, .header-inner { display: none !important; }
a.backbutton { position: fixed; left: 2.4vw; top: 2.4vw; z-index: 99; display: block; }
a.backbutton img { max-width: 84px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
a.backbutton:hover img { transform: translateX(-4px) scale(1.05); }
section.mvtv-section { padding: 0 !important; min-height: 0 !important; display: block !important; background: #060606; }
section.mvtv-section .content-wrapper, section.mvtv-section .content, section.mvtv-section .sqs-layout, section.mvtv-section .sqs-row, section.mvtv-section .sqs-block { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }

.mvtv { position: relative; width: 100%; color: #fff; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 72%, #1a1407 0%, rgba(26, 20, 7, 0) 70%), radial-gradient(ellipse at 50% 20%, #141210, #060606 70%); }
.mvtv__stage { position: relative; width: 100%; height: clamp(440px, 86vh, 980px); }
.mvtv__css3d, .mvtv__gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.mvtv__css3d { pointer-events: none; z-index: 1; }
.mvtv__gl { z-index: 2; touch-action: none; display: block; }
.mvtv.is-grabbing .mvtv__gl { cursor: grabbing !important; }
.mvtv__screen { width: 1280px; height: 960px; background: #000; overflow: hidden; }
.mvtv__screen iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* the channel number printed on the tube by the set itself */
.mvtv__ch { position: absolute; top: 56px; right: 70px; font: 700 64px/1 "ibm-plex-mono", monospace; letter-spacing: .08em; color: #8dff6a; text-shadow: 0 0 10px rgba(141, 255, 106, .9), 0 0 26px rgba(141, 255, 106, .5); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mvtv__ch.is-on { opacity: .9; }

/* under the set: what's on, the controls hint, the tagline and the price list */
.mvtv__hud { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 18px 54px; text-align: center; margin-top: -34px; }
.mvtv__readout { margin: 0; font: 700 12px/1 "ibm-plex-mono", monospace; letter-spacing: .22em; text-transform: uppercase; color: #fed031; }
.mvtv__readout::before { content: "●"; color: #ff3b2f; margin-right: .7em; text-shadow: 0 0 10px rgba(255, 59, 47, .9); transition: color .3s, text-shadow .3s; }
.mvtv.is-off .mvtv__readout::before { color: #3a1512; text-shadow: none; }
.mvtv__hint { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .55); font: 400 15px/1.5 "new-spirit-condensed", Georgia, serif; }
.mvtv__hint b { color: rgba(255, 255, 255, .85); font-weight: 400; }
.mvtv.has-sound .mvtv__hint .mvtv__hint-sound { display: none; }
.mvtv__tag { margin: 10px 0 0; max-width: 620px; font: 400 clamp(20px, 2.4vw, 28px)/1.25 "new-spirit-condensed", Georgia, serif; color: #fff; text-wrap: balance; }
.mvtv__hud .sqs-block-button-container { margin-top: 4px; }

/* keyboard / screen-reader controls (visible when the 3D set can't run, so the set still works as a plain player) */
.mvtv__a11y { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0; padding: 0 18px; }
.mvtv.is-3d .mvtv__a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mvtv.is-3d .mvtv__a11y:focus-within { position: relative; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin-top: 12px; }
.mvtv__a11y button { height: 40px; padding: 0 16px; border: 1px solid rgba(254, 208, 49, .5); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 700 11px/1 "ibm-plex-mono", monospace; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.mvtv__a11y button[aria-pressed="true"] { background: #fed031; color: #0d0d0d; border-color: #fed031; }
.mvtv__a11y label { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 "ibm-plex-mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mvtv__a11y input[type="range"] { accent-color: #fed031; width: 140px; }

/* flat fallback: no WebGL, or three.js didn't load */
.mvtv:not(.is-3d) .mvtv__stage { height: auto; }
.mvtv:not(.is-3d) .mvtv__css3d { position: relative; inset: auto; pointer-events: auto; width: min(960px, 92vw) !important; aspect-ratio: 16 / 9; height: auto !important; margin: 32px auto 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 6px #15130f, 0 0 0 9px #fed031; }
.mvtv:not(.is-3d) .mvtv__css3d > div { position: static !important; transform: none !important; width: 100% !important; height: 100% !important; perspective: none !important; }
.mvtv:not(.is-3d) .mvtv__screen { position: static !important; transform: none !important; width: 100% !important; height: 100% !important; }
.mvtv:not(.is-3d) .mvtv__screen iframe { pointer-events: auto; }
.mvtv:not(.is-3d) .mvtv__ch { display: none; }
.mvtv:not(.is-3d) .mvtv__hud { margin-top: 0; padding-top: 22px; }

@media (max-width: 760px) {
  .mvtv__stage { height: clamp(360px, 62vh, 620px); }
  .mvtv__hud { margin-top: -18px; padding-bottom: 40px; }
  .mvtv__hint { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mvtv__ch { transition: none; } }