/* Cade motion kit (window.CadeMotion, /lib/motion.js). Ported from Scotty's Remotion explainer
   (2026-10-02, 1080x1920 at 60fps), timings measured frame by frame. Transform and opacity only;
   prefers-reduced-motion and html.static (?static) jump every effect to its end state.
   Specimens: /ds/#effects, "Motion kit". House drawings only: the stamp is the rubber-stamp plate
   (ds.css .pnl-stamp: a rectangle, keyline, hard shadow, a tilt), the tag is their speech-bubble
   button (packages/shapes buttonTime), the stripes are the hazard yellow / ink of the video. */
:root{
  --cm-slam:260ms;      /* word / heading slam: scale 1.55 to .94 to 1 (video: ~270ms, 4 frames at 15fps) */
  --cm-stamp:240ms;     /* stamp: scale 1.5 to .96 to 1 with the tilt (video: CLOSED / YES WINS, ~200ms) */
  --cm-fall:220ms;      /* chip fall, gravity in (video: 5 frames at 30fps, ~170ms) */
  --cm-drop:440ms;      /* the whole chip drop: fall, squash, one bounce, settle */
  --cm-ripple:520ms;    /* one ring, three rings 90ms apart (video: ~450ms each, ~100ms apart) */
  --cm-pop:300ms;       /* the YOU tag pop, from its tail */
  --cm-roll:360ms;      /* a number rolling to its new value */
  --cm-coin:950ms;      /* a coin's arc in a burst */
  --cm-shutter:240ms;   /* the shutter drop (video: 3 frames at 30fps plus a bounce) */
  --cm-lift:260ms;      /* the shutter lift at the bell (video: ~130ms, slower here to read) */
  --cm-glow:18s;        /* the ground glow drift, one way (alternate) */
  --cm-tone:1200ms;     /* the ground's tone crossfade */
  --cm-ease-over:cubic-bezier(.34,1.56,.64,1);  /* back-out: slams, stamps, pops */
  --cm-ease-in:cubic-bezier(.55,0,1,.45);       /* gravity: falls, the shutter */
  --cm-ease-out:cubic-bezier(.16,1,.3,1);       /* rings, rolls, settles (= --pc-ease-emphasized) */
}

/* ── ground: near-black, a vignette, and one calm glow in a tone that drifts slowly. Never scroll-linked.
      Calmed 2026-10-03 (Scotty + the owner on the landing: "way too much dots", "prea mult gradient, bulele vin peste
      text"): the page-wide halftone is gone (.cm-g-dots stays in the markup, hidden, so older callers keep working),
      the glow carries no dots of its own, sits at a third of its old strength, and lives where a hero keeps its ART
      (the right, by default; --cm-gx / --cm-gy, or ground(el,{at:[x,y]}), move it). Under 760 the copy spans the
      column, so the glow steps out. Dots stay a component's accent (a card face, a burst's shadow), never a ground. ── */
.cm-ground{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0E0D0C;contain:strict}
.cm-ground>span{position:absolute;pointer-events:none}
.cm-g-dots{display:none}
.cm-glow{--cm-c:#FFA800;left:-12%;top:-260px;width:124%;height:min(1900px,100%);opacity:0;will-change:transform,opacity;
  background:radial-gradient(ellipse 26% 22% at var(--cm-gx,74%) var(--cm-gy,30%),color-mix(in srgb,var(--cm-c) 9%,transparent),transparent 100%)}
.cm-glow.on{opacity:1}
.cm-glow.drift{animation:cmDrift var(--cm-glow) ease-in-out infinite alternate}
@keyframes cmDrift{from{transform:translate3d(-1.5%,-.5%,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.04)}}
@media (max-width:760px){.cm-glow{display:none}}
.cm-g-vig{inset:0;background:radial-gradient(ellipse 75% 60% at 50% 38%,transparent 55%,rgb(0 0 0/.42) 100%)}

/* ── slamIn: the streak (a clone that trails and fades) ── */
.cm-ghost{pointer-events:none!important;z-index:5}

/* ── stamp: the rubber-stamp plate, filled as in the video ── */
.cm-stamp{--cm-face:#FAF424;--cm-ink:#0B0B0B;--cm-tilt:-3deg;position:absolute;display:block;z-index:6;left:50%;top:50%;margin:0;padding:.3em .62em .24em;
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:var(--cm-fs,28px);line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--cm-ink);background:var(--cm-face);border:2px solid #0B0B0B;box-shadow:4px 4px 0 #0B0B0B;
  transform:translate(-50%,-50%) rotate(var(--cm-tilt));pointer-events:none}
.cm-stamp[data-tone=closed]{--cm-face:#FAF424;--cm-tilt:-3deg}
.cm-stamp[data-tone=win]{--cm-face:#91BB4F;--cm-tilt:-4deg}
.cm-stamp[data-tone=loss]{--cm-face:#EA2A46;--cm-ink:#FFFFFF;--cm-tilt:4deg}
.cm-stamp[data-tone=void]{--cm-face:#EFE9D8;--cm-tilt:2deg}
.cm-stamp[data-tone=late]{--cm-face:#FFA800;--cm-tilt:3deg}

/* ── tag: their speech-bubble button (buttonTime), YOU in yellow, TOO LATE in orange ── */
.cm-tag{--cm-face:#FAF424;position:absolute;z-index:7;left:50%;bottom:calc(100% + 5px);margin:0;padding:.22em .5em .42em;transform:translateX(-50%);transform-origin:50% 100%;
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:var(--cm-fs,13px);line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#0B0B0B;pointer-events:none}
.cm-tag svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.cm-tag .fc{fill:var(--cm-face);stroke:#0B0B0B;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.cm-tag .sh{fill:#0B0B0B}
.cm-tag[data-tone=late]{--cm-face:#FFA800}
.cm-tag[data-tone=win]{--cm-face:#91BB4F}

/* ── chips and coins ── */
.cm-chip{position:absolute;z-index:8;width:var(--cm-size,22px);height:var(--cm-size,22px);margin:0;pointer-events:none;transform:translate(-50%,-50%)}
.cm-chip>b{position:absolute;inset:0;border-radius:50%;background:#FFA800;border:2px solid #0B0B0B;box-shadow:inset 0 0 0 3px #FAF424,2px 2px 0 #0B0B0B}
.cm-chip[data-look=you]>b{background:#FAF424;box-shadow:2px 2px 0 #0B0B0B}
.cm-chip>i{position:absolute;bottom:100%;width:2px;border-radius:1px;background:rgb(239 233 216/.7);transform-origin:50% 100%}
.cm-chip>i:nth-of-type(1){left:18%;height:120%}.cm-chip>i:nth-of-type(2){left:calc(50% - 1px);height:190%}.cm-chip>i:nth-of-type(3){right:18%;height:140%}
.cm-ring{position:absolute;z-index:7;width:var(--cm-size,28px);height:var(--cm-size,28px);margin:0;border-radius:50%;border:2px solid var(--cm-c,#91BB4F);pointer-events:none;transform:translate(-50%,-50%) scale(.4);opacity:0}
.cm-flash{position:absolute;z-index:7;width:var(--cm-size,28px);height:var(--cm-size,28px);border-radius:50%;background:var(--cm-c,#91BB4F);pointer-events:none;transform:translate(-50%,-50%);opacity:0}
.cm-coin{position:absolute;z-index:8;width:var(--cm-size,14px);height:var(--cm-size,14px);margin:0;pointer-events:none}
.cm-coin>b{position:absolute;inset:0;border-radius:50%;background:#FFA800;border:1.5px solid #0B0B0B;box-shadow:inset 0 0 0 2px #FAF424}

/* ── shutter: faint slats, the hazard band at its foot ── */
.cm-shutter{position:absolute;z-index:3;left:0;right:0;top:0;height:100%;pointer-events:none;transform:translateY(0)}
.cm-shutter .sl{position:absolute;inset:0 0 var(--cm-band,12px) 0;background:repeating-linear-gradient(180deg,rgb(14 13 12/.34) 0 9px,rgb(239 233 216/.07) 9px 10px)}
.cm-shutter .hz{position:absolute;left:0;right:0;bottom:0;height:var(--cm-band,12px);border-top:1.5px solid #0B0B0B;border-bottom:1.5px solid #0B0B0B;box-sizing:border-box;
  background:repeating-linear-gradient(-45deg,#FAF424 0 7px,#0B0B0B 7px 14px)}

/* ── speed lines: the radial burst behind one tension beat ── */
.cm-speed{position:absolute;z-index:1;width:var(--cm-size,320px);height:var(--cm-size,320px);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(var(--cm-c,#FAF424) 0 1.6deg,transparent 1.6deg 11deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 30%,#000 46%,transparent 96%);mask-image:radial-gradient(closest-side,transparent 30%,#000 46%,transparent 96%)}

/* ── the pays plate (the video's YES PAYS odds plate): paper, a side tab, a rolling number ── */
.cm-pays{position:absolute;z-index:5;display:inline-flex;align-items:stretch;margin:0;background:#EFE9D8;border:1.5px solid #0B0B0B;box-shadow:3px 3px 0 #0B0B0B;color:#0B0B0B;pointer-events:none;transform-origin:100% 0}
.cm-pays>span{display:flex;align-items:center;padding:0 .55em;background:var(--cm-c,#91BB4F);color:var(--cm-tab-ink,#0B0B0B);border-right:1.5px solid #0B0B0B;
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:var(--cm-fs,12px);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cm-pays>b{display:block;padding:.2em .5em .16em;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:calc(var(--cm-fs,12px) * 1.42);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.cm-pays[data-side=lower]{--cm-c:#EA2A46;--cm-tab-ink:#FFFFFF}

/* ── card parts (opt in with .cm-cards on an ancestor): the medallion hops once per hover ── */
@media (hover:hover) and (pointer:fine){
  .cm-cards .acard:hover .ac-med>svg{animation:cmHop 460ms var(--cm-ease-over)}
}
.cm-cards .acard .ac-med>svg{transform-origin:50% 100%}
@keyframes cmHop{0%{transform:none}30%{transform:translateY(-12%) scale(1.03)}55%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-3%)}100%{transform:none}}
.cm-pre{opacity:0}

@media (prefers-reduced-motion:reduce){
  .cm-glow.drift,.cm-cards .acard:hover .ac-med>svg{animation:none!important}
  .cm-pre{opacity:1}
}
html.static .cm-glow.drift,html.static .cm-cards .acard:hover .ac-med>svg{animation:none!important}
html.static .cm-pre{opacity:1}
/* any card in the shared vocabulary (.ci-card, /lib/category.css 21) can name the part that hops: .ci-hop */
@media (hover:hover) and (pointer:fine){.cm-cards .ci-card:hover .ci-hop>svg{animation:cmHop 460ms var(--cm-ease-over)}}
.cm-cards .ci-card .ci-hop>svg{transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.cm-cards .ci-card:hover .ci-hop>svg{animation:none!important}}
html.static .cm-cards .ci-card:hover .ci-hop>svg{animation:none!important}