/* Season page depth layer. Every panel is a slab with real thickness. depth.js gives each slab a shell
   of four side faces and projects them from one camera, so a panel below the eye line shows its top,
   one above it shows its underside, and the side facing the middle of the screen shows as you scroll.
   The desktop turntable monitors get true CSS 3D faces instead. Every key, link and panel answers a
   press: it sinks into its own depth and springs back, with an orange ring on release.
   Without depth.js nothing here shows except the restyles and press states. */

/* ---------- the shell: four 1px strips, stretched each frame by depth.js ---------- */
.dp-x{position:absolute; inset:calc(var(--dp-bw,0px) * -1); z-index:-1; pointer-events:none; display:none; border-radius:inherit; --dp-ax:0px; --dp-ay:0px;
  --dp-t1:#3B3637; --dp-t2:#1E1B1C; --dp-l1:#2C2829; --dp-l2:#171415; --dp-r1:#131011; --dp-r2:#0A0909; --dp-b1:#0D0B0C; --dp-b2:#050505;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 6px 12px 24px -12px rgba(0,0,0,.35)}
/* paper faces darken towards the wall, so a top lip still reads against a white page */
.dp-x--lt{--dp-t1:#EEEBEA; --dp-t2:#CCC7C6; --dp-l1:#E2DEDD; --dp-l2:#C6C0BF; --dp-r1:#D6D1D0; --dp-r2:#BAB4B3; --dp-b1:#C2BCBB; --dp-b2:#A8A1A0;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 6px 12px 24px -14px rgba(35,31,32,.28)}
html.dp .dp-x{display:block}
.dp-x > i{position:absolute; display:block; margin:0; padding:0; border:0; transform:matrix(1,0,0,0,0,0)}
.dp-x > .dp-t{left:0; right:0; bottom:100%; height:1px; transform-origin:50% 100%; background:linear-gradient(to top,var(--dp-t1),var(--dp-t2));
  clip-path:polygon(var(--dp-ax) 0,calc(100% - var(--dp-ax)) 0,100% 100%,0 100%)}
.dp-x > .dp-b{left:0; right:0; top:100%; height:1px; transform-origin:50% 0; background:linear-gradient(to bottom,var(--dp-b1),var(--dp-b2));
  clip-path:polygon(0 0,100% 0,calc(100% - var(--dp-ax)) 100%,var(--dp-ax) 100%)}
.dp-x > .dp-l{top:0; bottom:0; right:100%; width:1px; transform-origin:100% 50%; background:linear-gradient(to left,var(--dp-l1),var(--dp-l2));
  clip-path:polygon(0 var(--dp-ay),100% 0,100% 100%,0 calc(100% - var(--dp-ay)))}
.dp-x > .dp-r{top:0; bottom:0; left:100%; width:1px; transform-origin:0 50%; background:linear-gradient(to right,var(--dp-r1),var(--dp-r2));
  clip-path:polygon(0 0,100% var(--dp-ay),100% calc(100% - var(--dp-ay)),0 100%)}
/* the remote's odd outline can't take straight faces, so it's extruded with stacked shadow copies of its own shape */
.dp-x--plate{box-shadow:none}
.dp-x > .dp-p{inset:0; border-radius:inherit; transform:none}

/* ---------- stacking: faces sit under each section's content but over its background ---------- */
.ws-head,.ws-facts,.prev,.rates,#slot,#why,#how,.pitch,.faq{isolation:isolate}
.ws-head{position:relative}
.crawl{position:relative; z-index:1; overflow:visible}  /* .crawl__win still clips and masks the text */
.fdr .tv::after,.fdr .remote::after{z-index:-2}           /* the floor shadows go under the faces */

/* ---------- the strip of facts: four white source keys, the live one lit ---------- */
.ws-facts{background:var(--paper-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding-block:clamp(1.25rem,2.5vw,1.75rem)}
.ws-facts ul{gap:12px}
.ws-facts li:nth-child(n){position:relative; padding:1.1rem 1.2rem 1.2rem; border:1px solid var(--line-2); border-radius:2px;
  background:linear-gradient(180deg,#FFFFFF,#F9F8F8); box-shadow:inset 0 -2px 0 rgba(35,31,32,.05)}
.ws-facts li::before{content:""; position:absolute; top:12px; right:12px; width:7px; height:7px; background:var(--led-off)}
.ws-facts li:has(b[data-left])::before{background:var(--accent); box-shadow:var(--glow)}

/* ---------- how it works: the steps become rack units, screws on the ears ---------- */
.steps{border-top:0; display:grid; gap:6px}
.step{position:relative; padding:.95rem 1.4rem; background:linear-gradient(180deg,#2A2627,#1B1819); border:1px solid #000; border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.step__t{color:#fff}
.step__d{color:var(--on-black-2)}
.step::before,.step::after,.cue::before,.cue::after{content:""; position:absolute; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:#0d0b0c; box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.step::before,.cue::before{left:6px}
.step::after,.cue::after{right:6px}

/* ---------- FAQ: each question a drawer in the rack ---------- */
.faq-grid{row-gap:12px}
.faq-grid > details:nth-child(n){position:relative; border:1px solid var(--line-2); border-radius:2px; background:var(--paper-2); padding:0 1.1rem}

/* ---------- cues: a rack panel after every section ---------- */
.cue{position:relative; padding:clamp(1rem,2vw,1.4rem) clamp(1.3rem,2.6vw,1.8rem); border:1px solid var(--line-2); border-radius:2px; background:var(--paper-2)}
.cue::before,.cue::after{background:#D6D3D2; box-shadow:inset 0 1px 1px rgba(35,31,32,.35)}
.cue--dark{border-color:#000; background:linear-gradient(180deg,#1F1C1D,#171415)}
.cue--dark::before,.cue--dark::after{background:#0d0b0c; box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* ---------- others that become slabs ---------- */
.mod,.onair__sign{position:relative}
/* the finder TV's top lip needs room under the question; its own layer paints it over anything it reaches */
.fdr .head{margin-bottom:clamp(22px,2.6vw,30px)}
@media (max-width:600px){ .fdr .head{margin-bottom:20px} }
.fdr .tv__body{border-radius:6px}

/* ---------- press states, the same travel as each control's own :active ---------- */
.btn.is-press{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
.btn--nav.is-press{border-bottom-width:1px}
.fdr .k.is-press,.fdr .ck.is-press,.fdr .rk.is-press{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
.fdr .pwr.is-press i{transform:translateY(1px); border-bottom-width:2px}
.key.is-press span{transform:translateY(1px)}
.turn__arrow.is-press{transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.turn__keys button.is-press{transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.board__rows li.is-open:has(> a.is-press){background:#1a0f0a}
/* an inline link takes the press in its underline: it thickens and goes orange */
a.dp-inl{transition:text-decoration-color .3s, text-decoration-thickness .3s}
a.dp-inl.is-press{text-decoration-line:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; transition:none}
/* the release ring, one per page, moved and played by depth.js */
.press-ring{position:fixed; left:0; top:0; z-index:1900; pointer-events:none; opacity:0;
  box-shadow:0 0 0 2px rgba(247,126,45,.75), 0 0 12px rgba(247,126,45,.35)}

/* ---------- the turntable on desktop: true 3D faces, dimming by scrim ---------- */
@media (min-width:961px){
  html.js-turn .turn{perspective:1800px}
  html.js-turn .tp .mon,html.js-turn .tp .dp-x{transform-style:preserve-3d}
  html.js-turn .tp .dp-x{box-shadow:none}
  html.js-turn .tp .dp-x > i{transform:none; clip-path:none; backface-visibility:hidden;
    box-shadow:inset 0 0 0 999px rgba(0,0,0,var(--dp-dim,0)); transition:box-shadow .5s}
  html.js-turn .tp .dp-x > .dp-t{height:var(--dp); transform:rotateX(90deg)}
  html.js-turn .tp .dp-x > .dp-b{height:var(--dp); transform:rotateX(-90deg)}
  html.js-turn .tp .dp-x > .dp-l{width:var(--dp); transform:rotateY(-90deg)}
  html.js-turn .tp .dp-x > .dp-r{width:var(--dp); transform:rotateY(90deg)}
  /* opacity and filter flatten 3D, so the monitors either side dim under a scrim instead */
  html.js-turn .tp[data-d="1"],html.js-turn .tp[data-d="-1"]{opacity:1; filter:none; --dp-dim:.45}
  html.js-turn .tp[data-d="2"],html.js-turn .tp[data-d="-2"]{opacity:1; filter:none; --dp-dim:.8}
  html.js-turn .tp .mon::after{content:""; position:absolute; inset:0; border-radius:inherit; background:#000; opacity:var(--dp-dim,0);
    transition:opacity .5s; pointer-events:none; z-index:5}
  html.js-turn .tp .mon__screen{transition:filter .5s}
  html.js-turn .tp[data-d="1"] .mon__screen,html.js-turn .tp[data-d="-1"] .mon__screen{filter:saturate(.4)}
  html.js-turn .tp[data-d="2"] .mon__screen,html.js-turn .tp[data-d="-2"] .mon__screen{filter:saturate(0)}
  /* a press pushes the monitor back into its own depth */
  html.js-turn .tp .mon{transition:transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s}
  html.js-turn .tp.is-press .mon{transform:translateZ(-10px); transition-duration:.1s,.3s}
}
/* phone and tablet: room in the scroller for the faces above and below each monitor */
@media (max-width:960px){
  html.js-turn .turn{padding-top:24px; padding-bottom:24px; margin-block:-10px}
}

/* the film grain is a full-page blend layer that costs every scroll frame on a phone */
@media (hover:none),(max-width:760px){ body.ws::after{display:none} }

@media (prefers-reduced-motion:reduce){
  html.js-turn .tp .mon,html.js-turn .tp .mon::after,html.js-turn .tp .dp-x > i,html.js-turn .tp .mon__screen{transition:none}
}