/* Background scenes adapted from substation.com/lander/. */
.programming-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #171717;
  color: #e9e3dd;
  min-height: 710px;
}
.programming-background__scene {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #171717;
}
.programming-background__scene[hidden] { display: none; }
.programming-background__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 22% 38%, rgb(0 0 0 / 24%) 0%, transparent 72%),
    linear-gradient(90deg, #171717cf, #17171775);
  pointer-events: none;
}
.programming-background__copy { padding: 80px 6% 110px; }
.programming-background__copy h2 {
  max-width: 1050px;
  margin: 0 0 26px;
  color: #e9e3dd;
}
.programming-background__copy h2 span { color: #69eee6; }
.programming-background__legal {
  max-width: 600px;
  margin: 0 0 25px;
  font-size: 14px;
  line-height: 1.55;
}
.programming-background__tagline {
  max-width: 650px;
  margin: 0;
  font-size: clamp(18px, 2.5vw, 25px);
  font-weight: 800;
  line-height: 1.3;
}
.programming-background__controls { position: absolute; right: 5%; bottom: 22px; display: flex; align-items: center; gap: 3px; }
.programming-background__controls button { border: 0; background: transparent; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: #e9e3dd; padding: 0; }
.programming-background__controls [data-select]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--dot-color); }
.programming-background__controls [aria-pressed="true"]::before { box-shadow: 0 0 0 3px #171717, 0 0 0 4px var(--dot-color); }
.programming-background__controls button:focus-visible { outline: 2px solid #e9e3dd; outline-offset: 1px; border-radius: 50%; }
.programming-background.paused *, .programming-background.paused *::before, .programming-background.paused *::after { animation-play-state: paused !important; }
.programming-note { margin: 0; padding: 60px 6%; background: #171717; color: #e9e3dd; text-align: center; font-size: var(--text-xl); font-weight: 800; }
@media (max-width: 600px) {
  .programming-background { min-height: 660px; }
  .programming-background__copy { padding: 60px 6% 110px; }
}
.programming-background__controls [data-play] svg { grid-area: 1 / 1; }
.programming-background__controls [data-play][aria-pressed="true"] .background-play-icon,
.programming-background__controls [data-play][aria-pressed="false"] .background-pause-icon { display: none; }

/* Exact scene CSS from https://substation.com/lander/; scoped to this section. */
.programming-background [data-sports-wall] img{filter:grayscale(1) brightness(0) invert(1);max-height:96px}
.programming-background [data-sports-wall] img[alt="WatchWPT"]{filter:none;border-radius:8px}

.programming-background .bars{background:linear-gradient(90deg,#E9E3DD 0 14%,#F9F654 14% 28%,#69EEE6 28% 42%,#5CE666 42% 56%,#FC39F1 56% 70%,#F64131 70% 84%,#3030EC 84%)}
.programming-background .bars:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#17171777 3px 4px);opacity:.7}
.programming-background .logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:35px;padding:35px;width:125%;transform:rotate(-9deg) translate(-8%,-5%)}
.programming-background .logo-wall img{width:100%;height:105px;object-fit:contain;padding:18px;background:#242323;border-radius:16px;filter:grayscale(1) brightness(1.7)}
.programming-background.playing .logo-wall{animation:hero-wall 6s linear forwards}
@keyframes hero-wall{to{transform:rotate(-9deg) translate(-17%,5%)}}
.programming-background .tv-guide{width:140%;padding:45px 20px;transform:rotate(-7deg);display:grid;gap:12px}
.programming-background .guide-row{display:grid;grid-template-columns:110px repeat(3,1fr);gap:10px}
.programming-background .guide-row>*{background:#303033;padding:25px;font-size:22px;color:#E9E3DD;border-radius:8px}
.programming-background .guide-row img{width:110px;height:95px;object-fit:contain}
.programming-background.playing .tv-guide{animation:hero-guide 15s linear forwards}
@keyframes hero-guide{to{transform:rotate(-7deg) translateY(-850px)}}
@media (max-width:600px){.programming-background .logo-wall{grid-template-columns:repeat(3,1fr);width:160%;gap:16px}}
.programming-background .logo-wall{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:24px;width:112%;min-height:850px;transform:rotate(-7deg) translate(-4%,-5%)}
.programming-background .wall-tile{height:145px;display:flex;align-items:center;justify-content:center;background:#242323;border-radius:14px;padding:22px;text-align:center;color:#e9e3dd}
.programming-background .logo-wall img{height:100%;width:100%;padding:0;background:transparent;border-radius:0;filter:grayscale(1) brightness(1.45)}
.programming-background .wall-wordmark{font:800 clamp(19px,2.8vw,38px)/1.05 Inter,Arial,sans-serif;letter-spacing:-.045em}
.programming-background .wall-premium{background:#2d2d2d}
.programming-background .wall-secondary img{max-width:65%;opacity:.55}
.programming-background.playing .logo-wall{animation:hero-wall 7.5s linear both}
@keyframes hero-wall{from{transform:rotate(-7deg) translate(-4%,-5%)}to{transform:rotate(-7deg) translate(-8%,-13%)}}
.programming-background .bars{background:#171717;--hero-picture:linear-gradient(90deg,#f6f5f1 0 14.2857%,#f9f654 14.2857% 28.5714%,#69eee6 28.5714% 42.8571%,#5ce666 42.8571% 57.1429%,#fc39f1 57.1429% 71.4286%,#f64131 71.4286% 85.7143%,#3030ec 85.7143%) top/100% 65% no-repeat,linear-gradient(90deg,#3030ec,#171717,#fc39f1,#171717,#69eee6,#171717,#f6f5f1) 0 74%/100% 12% no-repeat,linear-gradient(90deg,#fff,#bdbdbd,#737373,#353535,#080808,#171717) bottom/100% 24% no-repeat}
.programming-background .hero-signal-picture,.programming-background .hero-signal-picture:before,.programming-background .hero-signal-picture:after{position:absolute;inset:0;background:var(--hero-picture)}
.programming-background .hero-signal-picture{animation:hero-reveal .3s steps(2,end) both}
.programming-background .hero-signal-picture:before,.programming-background .hero-signal-picture:after{content:"";animation:hero-tear .38s steps(2,end) both}
.programming-background .hero-signal-picture:before{clip-path:inset(18% 0 60%);--slice-x:-22px}
.programming-background .hero-signal-picture:after{clip-path:inset(58% 0 24%);--slice-x:24px;animation-delay:35ms}
.programming-background .hero-noise{position:absolute;inset:-4px;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='96'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23noise)' d='M0 0h160v96H0z'/%3E%3C/svg%3E");animation:hero-noise .38s steps(3,end) both}
@keyframes hero-reveal{0%{clip-path:inset(46% 0);transform:skewX(-8deg)}28%{clip-path:inset(16% 0 28%);transform:translateX(16px) skewX(4deg)}52%,100%{clip-path:inset(0);transform:none}}
@keyframes hero-tear{0%,100%{transform:translate(0)}20%{transform:translateX(var(--slice-x))}45%{transform:translateX(calc(var(--slice-x)*-.6))}70%{transform:translateX(calc(var(--slice-x)*.3))}}
@keyframes hero-noise{0%{opacity:.3;transform:translate(-3px)}40%{opacity:.18;transform:translate(3px)}70%{opacity:.25;transform:translate(-1px)}100%{opacity:0;transform:none}}
.programming-background.paused .logo-wall,.programming-background.paused .tv-guide,.programming-background.paused .hero-signal-picture,.programming-background.paused .hero-signal-picture:before,.programming-background.paused .hero-signal-picture:after,.programming-background.paused .hero-noise{animation-play-state:paused}
@media (max-width:600px){.programming-background .logo-wall{grid-template-columns:repeat(5,minmax(0,1fr));width:165%;margin-left:-32%;gap:12px;padding:16px}
.programming-background .wall-tile{height:140px;padding:13px}
.programming-background .wall-wordmark{font-size:18px}}
.programming-background .logo-wall{width:125%;transform:rotate(-3deg) translate(-8%,-5%);min-height:950px}
.programming-background.playing .logo-wall{animation:hero-wall 7.5s linear both}
@keyframes hero-wall{from{transform:rotate(-3deg) translate(-8%,-5%)}to{transform:rotate(-3deg) translate(-25%,5%)}}
.programming-background.playing .tv-guide{animation:hero-guide-loop 12s linear infinite}
@keyframes hero-guide-loop{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(-7deg) translateY(calc(-1 * var(--guide-loop-distance,1284px)))}}
.programming-background.paused .logo-wall,.programming-background.paused .tv-guide{animation-play-state:paused}
@media (max-width:600px){.programming-background .logo-wall{width:165%;margin-left:-24%}}

/* Keep the channel column in frame as the angled guide scrolls upward. */
.programming-background .tv-guide { translate: 11rem 0; }