/* Cade explainer cabinet (2026-10-03). The vertical explainer video plays as the screen of an illustrated Cade arcade
   cabinet (Cade, the Prediction Arcade). One implementation: lib/explainer.js renders it (CadeExplainer.mount), this file
   dresses it. Used by /landing/v3/ (How it works) and the DS (/ds/, Patterns: Explainer cabinet). Needs /ds/ds.css (.ssb,
   .shape, tokens) and /lib/motion.css (.cm-tag, their speech bubble).

   The cabinet drawing is OURS, OWNER APPROVED (2026-10-03, "un frame bun, ceva creativ, ceva cade"): the one piece where
   a new illustrated object is allowed. It is one inline SVG on a 400 x 750 grid (marquee, violet side rails, the screen
   bezel, the control deck, a short lower body with their starburst and a small coin door), ink outlines, a hard 10px shadow.
   Polish 2026-10-03 (owner): no LIVE tag, no INSERT PICK, no caption plate; the grid lost 100 units of dead height (marquee
   100 to 68, deck slope 32 to 26, deck 70 to 68, lower body 84 to 38) so the whole cabinet fits one 1280 x 800 screen.
   Everything on it is a house part, placed on that grid in percentages so it scales as one object:
     marquee        the CADE display mark, lit (a slow glow, opacity only), PREDICTION ARCADE under it
     the screen     the video, a CRT glass on it (scanlines, vignette, a highlight; one static layer), the big PLAY plate
                    (HERO_CTA, yellow) on the poster and when paused
     the lip        the split bar (.ssb, ShareSplitBar) lit under the screen: lime watched, red still to come; a range
                    input over it seeks; chapter notches named in a tip
     the deck       two arcade buttons, real buttons: green (YES) plays / pauses, red (NO) turns the sound on / off; between
                    them the MarketCard's yellow clock chip stuck on as a sticker, counting the video down
     YOU            their speech bubble (.cm-tag), pointing at the screen
     coins          the kit's coin (.cm-coin look), by the coin door
     the burst      their starburst polygon, a soft orange light behind the cabinet, one beat when it comes into view
   States on the figure: data-state = poster | playing | paused, data-sound = on | off. Nothing changes size between states
   (zero layout shift): the cabinet is a fixed-ratio box, every overlay is absolutely placed. */

.xf{--xf-burst:polygon(76.96% 15.82%,68.58% 0.65%,57.99% 18.01%,48.92% 0%,39.78% 21.01%,33.76% 5.83%,25.42% 21.43%,4.99% 17.72%,12.17% 38.54%,0% 51.54%,10.43% 61.88%,4.58% 76.64%,22.61% 80.52%,31% 100%,41.48% 83.43%,47.48% 99.65%,55.78% 81.8%,65.96% 97.17%,73.75% 78.49%,92.45% 84.33%,85.47% 67.52%,99.18% 65.05%,91.2% 53.02%,100% 37.99%,84.74% 30.57%,91.29% 13.45%);
  position:relative;margin:0;padding-top:6px;width:100%;color:var(--paper,#EFE9D8)}
.xf *{box-sizing:border-box}
.xf-stage{position:relative;isolation:isolate}

/* the light behind: their starburst, soft, one beat on first view */
.xf-burst{position:absolute;z-index:-1;left:50%;top:44%;width:165%;aspect-ratio:1;margin:0;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg);
  clip-path:var(--xf-burst);background:radial-gradient(circle,rgba(255,168,0,.5) 0,rgba(255,168,0,.26) 36%,rgba(255,122,0,.09) 56%,transparent 72%)}
.xf.xf-beat .xf-burst{animation:xfBeat 620ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes xfBeat{from{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

/* ── the cabinet: a 400 x 750 box; every part below is placed on that grid ── */
.xf-cab{position:relative;aspect-ratio:400/750;container-type:inline-size}
.xf-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(10px 10px 0 #000)}
.xf-slot{animation:xfSlot 1.6s ease-in-out infinite alternate}
@keyframes xfSlot{from{opacity:.55}to{opacity:1}}

/* marquee (10..390 x 12..80): the mark, lit */
.xf-mq{position:absolute;left:calc(10 / 400 * 100%);top:calc(12 / 750 * 100%);width:calc(380 / 400 * 100%);height:calc(68 / 750 * 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;pointer-events:none;isolation:isolate}
.xf-mq::before{content:"";position:absolute;inset:8% 10%;z-index:-1;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,250,200,.85),transparent 70%);
  animation:xfGlow 3.2s ease-in-out infinite alternate}
@keyframes xfGlow{from{opacity:.45}to{opacity:1}}
.xf-mq img{display:block;height:8.6cqw;width:auto}
.xf-mq b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:max(10px,2.7cqw);line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0B}

/* YOU: their bubble, off the cabinet's left side, pointing at the screen */
.xf .xf-you{--cm-fs:max(15px,4.6cqw);z-index:5;left:-5%;bottom:auto;top:40%;transform:rotate(-6deg);transform-origin:50% 100%}

.xf-coin{position:absolute;z-index:3;width:var(--s,28px);height:var(--s,28px);pointer-events:none}
.xf-coin>b{position:absolute;inset:0;border-radius:50%;background:#FFA800;border:2px solid #0B0B0B;box-shadow:inset 0 0 0 3px #FAF424,3px 3px 0 #000}
.xf-coin.c1{--s:clamp(20px,6cqw,28px);left:calc(266 / 400 * 100%);top:calc(708 / 750 * 100%)}
.xf-coin.c2{--s:clamp(16px,4.6cqw,22px);left:calc(300 / 400 * 100%);top:calc(722 / 750 * 100%)}
.xf-coin.c3{--s:clamp(18px,5.2cqw,24px);left:calc(100 / 400 * 100%);top:calc(714 / 750 * 100%)}

/* the screen (66..334 x 96..572, 9:16) */
.xf-screen{position:absolute;left:calc(66 / 400 * 100%);top:calc(96 / 750 * 100%);width:calc(268 / 400 * 100%);height:calc(476 / 750 * 100%);
  background:#0E0D0C;border-radius:3.5cqw / 3cqw;overflow:hidden;box-shadow:0 0 0 2px #0B0B0B}
.xf-screen video,.xf-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#0E0D0C}
.xf-poster{z-index:1;transition:opacity .2s}
.xf:not([data-state=poster]) .xf-poster{opacity:0;pointer-events:none}
/* the CRT glass: scanlines, a vignette, a highlight; one static layer, never over the controls */
.xf-crt{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(ellipse 72% 66% at 50% 50%,transparent 60%,rgba(0,0,0,.5) 100%),linear-gradient(155deg,rgba(255,255,255,.08),transparent 36%)}
/* the dim under the big PLAY when paused or on the poster */
.xf-screen::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(14,13,12,.36);pointer-events:none;transition:opacity .2s}
.xf[data-state=playing] .xf-screen::after{opacity:0}
.xf-big{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:0;border:0;background:none;cursor:pointer;color:#0B0B0B}
.xf-big .shape{width:clamp(150px,50cqw,212px);height:clamp(64px,20cqw,84px);display:grid;place-items:center;align-content:center;gap:4px;padding:0 14px}
.xf-big b{font-family:var(--shout);font-style:italic;font-weight:900;font-size:clamp(32px,10.5cqw,44px);line-height:.9;letter-spacing:.02em;text-transform:uppercase}
.xf-big small{font-family:var(--data);font-weight:800;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.xf[data-state=playing] .xf-big{opacity:0;pointer-events:none}
.xf-big:hover .shape{transform:translate(-2px,-2px)}
.xf-big:hover .shape>svg .sh{transform:translate(7px,7px)}
.xf-big:active .shape{transform:translate(3px,3px)}
.xf-big:active .shape>svg .sh{transform:translate(1px,1px)}
.xf-big:focus-visible{outline:none}
.xf-big:focus-visible .shape{outline:3px solid #FFA800;outline-offset:3px}

/* the lip under the screen (70..330, centre y 589): the split bar, lit; a 44px seek over it */
.xf-prog{position:absolute;z-index:3;left:calc(70 / 400 * 100%);width:calc(260 / 400 * 100%);top:calc(589 / 750 * 100% - 22px);height:44px;display:flex;align-items:center}
.xf-prog .ssb{flex:1;--ssb-h:clamp(14px,4.4cqw,20px);--ssb-drop:2px}
.xf-prog .ssb .l,.xf-prog .ssb .r{transition:none}
.xf-seek{position:absolute;z-index:2;inset:0;width:100%;height:44px;margin:0;opacity:0;cursor:pointer}
.xf-prog:has(.xf-seek:focus-visible){outline:3px solid #FFA800;outline-offset:1px}
.xf-ticks{position:absolute;inset:0;pointer-events:none}
.xf-ticks i{position:absolute;top:calc(50% - 8px);height:16px;width:3px;margin-left:-1.5px;background:#0B0B0B;box-shadow:0 0 0 1px rgba(240,234,217,.6)}
.xf-tip{position:absolute;z-index:3;bottom:calc(100% - 2px);left:0;transform:translateX(-50%);margin:0;padding:5px 8px 4px;white-space:nowrap;pointer-events:none;
  background:#EFE9D8;color:#0B0B0B;border:2px solid #0B0B0B;box-shadow:3px 3px 0 #000;font-family:var(--data);font-weight:800;font-size:12px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.xf-tip[hidden]{display:none}

/* the control deck (2..398 x 610..704): the two arcade buttons and the clock chip sticker */
.xf-deck{position:absolute;z-index:3;left:calc(2 / 400 * 100%);width:calc(396 / 400 * 100%);top:calc(610 / 750 * 100%);height:calc(94 / 750 * 100%);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:2cqw;padding:0 5cqw}
.xf-ab{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:max(3px,1cqw);min-width:44px;min-height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;color:#0B0B0B}
.xf-ab i{--c:#91BB4F;--hi:#C9E59A;display:block;width:clamp(44px,14cqw,62px);aspect-ratio:1;border-radius:50%;border:3px solid #0B0B0B;
  background:radial-gradient(circle at 36% 30%,var(--hi) 0 16%,transparent 17%),var(--c);box-shadow:0 6px 0 #0B0B0B,inset 0 -5px 0 rgba(0,0,0,.22);
  transition:transform 150ms cubic-bezier(0,0,.2,1),box-shadow 150ms cubic-bezier(0,0,.2,1)}
.xf-ab[data-tone=no] i{--c:#EA2A46;--hi:#FF9AA9}
.xf-ab span{font-family:var(--shout);font-style:italic;font-weight:800;font-size:max(13px,3.6cqw);line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:2px 6px 1px;background:#0B0B0B;color:#EFE9D8;min-width:9ch;text-align:center}
.xf-ab:hover i{transform:translateY(-2px);box-shadow:0 8px 0 #0B0B0B,inset 0 -5px 0 rgba(0,0,0,.22)}
.xf-ab:active i{transform:translateY(4px);box-shadow:0 2px 0 #0B0B0B,inset 0 -3px 0 rgba(0,0,0,.22)}
.xf-ab:focus-visible{outline:none}
.xf-ab:focus-visible i{outline:3px solid #FFA800;outline-offset:3px}
/* lit: green while it plays, red while the sound is on (a yellow ring, the commit colour) */
.xf[data-state=playing] .xf-pp i,.xf[data-sound=on] .xf-snd i{box-shadow:0 6px 0 #0B0B0B,0 0 0 4px #FAF424,inset 0 -5px 0 rgba(0,0,0,.22)}
.xf[data-state=playing] .xf-pp:active i,.xf[data-sound=on] .xf-snd:active i{box-shadow:0 2px 0 #0B0B0B,0 0 0 4px #FAF424}

/* the clock chip: the MarketCard's (.mcard .clk: yellow, 1px #141414 keyline, hard shadow), stuck on the deck */
.xf-tab{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px 10px 5px;max-width:42cqw;
  background:var(--yellow,#FAF424);color:#0B0B0B;outline:1px solid #141414;box-shadow:4px 4px 0 #000;transform:rotate(-3deg)}
.xf-tab b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:max(12px,3.3cqw);line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.xf-tab span{font-family:var(--data);font-weight:800;font-size:max(15px,4.6cqw);line-height:1;font-variant-numeric:tabular-nums;min-width:4.2ch}

@media (max-width:760px){.xf-art{filter:drop-shadow(6px 6px 0 #000)}}
@media (prefers-reduced-motion:reduce){.xf.xf-beat .xf-burst,.xf-slot,.xf-mq::before{animation:none}.xf-ab:hover i,.xf-big:hover .shape{transform:none}}
html.static .xf.xf-beat .xf-burst,html.static .xf-slot,html.static .xf-mq::before{animation:none}