/* Season hero multiview: one vision-mixer monitor split the way a real multiviewer splits it.
   Preview and Program on top, ten sources below, labels in the UMD strip under each window.
   Orange is Program, white is Preview. reel.js runs the cuts and the scroll; without it the
   .mv stays hidden and the board is the hero. */

.mv[hidden]{display:none}
.ws-head.has-mv{overflow:clip}
.mv{container-type:inline-size; perspective:1700px; perspective-origin:20% 50%; animation:mvFloat 7s ease-in-out infinite alternate}
@keyframes mvFloat{from{translate:0 -5px} to{translate:0 5px}}

.mv__mon{position:relative; padding:clamp(5px,.6vw,9px); background:var(--bezel); border-radius:3px;
  box-shadow:0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06); transform-origin:0 50%; will-change:transform}
.mv__screen{display:grid; gap:3px; padding:3px; background:#000; font-family:var(--f-mono); color:var(--umd-ink); border-radius:1px}

.mv__top{display:flex; align-items:center; gap:.5rem; padding:.32rem .55rem; background:var(--umd);
  font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.mv__top .tally{width:7px; height:7px}
.mv__tc{margin-left:auto; color:var(--lcd); letter-spacing:.06em; font-variant-numeric:tabular-nums; text-shadow:0 0 6px rgba(245,154,98,.35)}

.mv__big{display:grid; grid-template-columns:1fr 1fr; gap:3px}
.mv__srcs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px}

.mv__win,.mv__src{position:relative; display:flex; flex-direction:column; min-width:0; background:#0A0909; outline:1px solid #2A2728; outline-offset:-1px}
.mv__pic{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#000}
.mv__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.mv__lab{display:flex; align-items:center; gap:.38rem; padding:.24rem .42rem; background:var(--umd); border-top:1px solid #000;
  font-size:.5625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; overflow:hidden}
.mv__lab b{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.mv__lab .tally{width:6px; height:6px}

/* a small monitor drops the source numbers and tallies so the names still fit */
@container (max-width:600px){
  .mv__src .mv__lab{gap:0; padding:.2rem .32rem; letter-spacing:.06em}
  .mv__src .mv__lab .tally,.mv__src .mv__lab .mv__n{display:none}
}

/* tallies: the source on Program goes orange, the one in Preview goes white */
.mv__pgm{outline:2px solid var(--accent)}
.mv__pgm .mv__lab{background:var(--accent); color:#000; font-weight:700}
.mv__pvw{outline:2px solid var(--on-black)}
.mv__pvw .mv__lab{background:var(--on-black); color:#000; font-weight:700}
.mv__src.is-pgm{outline:2px solid var(--accent); z-index:1}
.mv__src.is-pgm .mv__lab{background:var(--accent); color:#000}
.mv__src.is-pgm .tally{background:#000; box-shadow:none}
.mv__src.is-pvw{outline:2px solid var(--on-black); z-index:1}
.mv__src.is-pvw .tally{background:var(--on-black); box-shadow:0 0 6px rgba(255,255,255,.6)}

/* Program: a slow push-in on every shot, an orange-edged wipe on every third cut */
.mv__pgm .mv__a{transform-origin:50% 0}
.mv__pgm.is-cut .mv__a{animation:mvPush 2.6s linear both}
@keyframes mvPush{from{transform:scale(1)} to{transform:scale(1.07)}}
.mv__pgm .mv__b{z-index:1; clip-path:inset(0 100% 0 0)}
.mv__pgm.is-wipe .mv__b{animation:mvWipe .44s cubic-bezier(.75,0,.25,1) both}
.mv__wipe{position:absolute; z-index:2; top:0; bottom:0; left:0; width:5px; margin-left:-5px; background:var(--accent); box-shadow:0 0 14px rgba(247,126,45,.85); opacity:0; pointer-events:none}
.mv__pgm.is-wipe .mv__wipe{animation:mvBar .44s cubic-bezier(.75,0,.25,1) both}
@keyframes mvWipe{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes mvBar{0%{left:0; opacity:1} 92%{opacity:1} to{left:100%; opacity:0}}
.mv__bug{position:absolute; z-index:3; top:7%; right:4.5%; width:clamp(12px,6%,24px); height:auto; opacity:.75}

/* the lower third: an orange tally block, the name on black, the platform on paper */
.mv__super{position:absolute; z-index:4; left:5.5%; bottom:8%; display:grid; grid-template-columns:auto auto; justify-content:start; max-width:90%;
  font-size:clamp(.5rem,.85vw,.78rem)}
.mv__super i{grid-row:1 / 3; width:.55em; background:var(--accent); transform-origin:50% 100%}
.mv__super b{grid-column:2; padding:.38em .65em .3em; background:#000; color:#fff; font-family:var(--f-display); font-stretch:var(--display-width);
  font-weight:800; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mv__super span{grid-column:2; justify-self:start; padding:.3em .65em .28em; background:var(--paper); color:var(--ink);
  font-size:.78em; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.mv__super.is-in i{animation:supI .3s var(--ease) both}
.mv__super.is-in b{animation:supB .42s .07s var(--ease) both}
.mv__super.is-in span{animation:supB .42s .15s var(--ease) both}
@keyframes supI{from{transform:scaleY(0)}}
@keyframes supB{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

/* source 10: the open slot, on bars until it's someone's site */
.mv__bars{position:absolute; z-index:2; inset:0; display:none; place-items:center;
  background:
    linear-gradient(90deg,#F4F3F2 0 14.3%,#D6D3D2 0 28.6%,#A6A2A1 0 42.9%,var(--accent) 0 57.1%,#6F6C6D 0 71.4%,#4A4748 0 85.7%,#231F20 0) top/100% 74% no-repeat,
    linear-gradient(90deg,#231F20 0 28.6%,#F4F3F2 0 42.9%,#0B0B0D 0 71.4%,#4A4748 0) bottom/100% 26% no-repeat}
.mv__bars span{padding:.35em .7em .3em; background:#000; color:#fff; font-family:var(--f-display); font-stretch:var(--display-width);
  font-weight:800; font-size:.5rem; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap}
.mv__src--you .mv__bars,.mv__win.is-you .mv__bars{display:grid}
.mv__win .mv__bars span{font-size:clamp(.7rem,1.5vw,1.25rem)}
.mv__pgm.is-you .mv__super span{background:var(--accent)}
.mv__pgm .mv__bars span{display:none}  /* Program names it in the lower third */

/* desktop: the monitor shares the board's cell, bleeds right, and the scroll swaps them */
@media (min-width:981px){
  .ws-head.has-mv .ws-head__grid{grid-template-areas:"copy stage"}
  .ws-head.has-mv .ws-head__copy{grid-area:copy}
  .ws-head.has-mv .mv,.ws-head.has-mv .board,.ws-cut{grid-area:stage}
  .ws-head.has-mv .mv{position:relative; z-index:1; align-self:center}
  .ws-head.has-mv .board{position:relative; z-index:2; align-self:center}
  .ws-cut{position:relative; z-index:3; align-self:stretch; justify-self:start; width:6px; margin-block:-1.5rem; background:var(--accent);
    box-shadow:0 0 18px rgba(247,126,45,.8); opacity:0; pointer-events:none}
}
/* phone and tablet: the monitor opens the page above the headline; the board stays below the copy */
@media (max-width:980px){
  .ws-head.has-mv .mv{order:-1; margin-bottom:.5rem}
  .mv__mon{transform-origin:50% 100%}
}
@media (max-width:600px){
  .mv__lab{gap:.25rem; padding:.18rem .28rem; font-size:.5rem; letter-spacing:.08em}
  .mv__src .mv__lab b{display:none}
  .mv__top{font-size:.5625rem; padding:.26rem .45rem}
  .mv__super{font-size:.5rem}
  .mv__src--you .mv__bars span{font-size:.375rem; padding:.3em .45em}
}

/* ---------- the WebGL studio (studio3d.js) takes over from the DOM monitor ---------- */
.mv{position:relative}
.s3d{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0}
.s3d canvas{position:absolute; inset:0; width:100%; height:100%; display:block; outline:0}
.mv.is-3d{animation:none}
.mv.is-3d .mv__mon{opacity:0; visibility:hidden; transition:opacity .6s, visibility 0s .6s}
@media (min-width:981px) and (min-height:560px){
  /* the canvas sits behind the copy and the board, and reaches below the head so the mixer can leave the frame */
  .ws-head.has-3d{overflow:visible}
  .ws-head.has-3d .ws-head__grid{position:relative; z-index:1; pointer-events:none}
  .ws-head.has-3d .ws-head__copy,.ws-head.has-3d .board{pointer-events:auto}
}
@media (max-width:980px),(max-height:559px){
  /* phone: the canvas lives in the multiview's own box and bleeds to the screen edges */
  .mv .s3d{inset:-12% calc(var(--pad-x) * -1) -16%}
  .mv.is-3d{touch-action:pan-y}
}