/* Dexterity window. Local proof: the kettle pour and the jar twist open beside KIN. */
/* Knobs: --dex-shift (how far KIN steps aside), --dex-link (hand-to-window line), --dex-ratio (window shape), --dex-hmax (tallest window). */
.spin-portrait{--dex-shift:calc(clamp(96px,52cqw,400px) - 50cqw + var(--kin-x,50cqw));--dex-link:110px;--dex-ratio:1.25;--dex-hmax:min(54cqh,calc(91cqh - 235px));--dex-bleed:24px;--dex-meta:88px;--dex-slide:520ms;--dex-reveal:440ms;--dex-ease:cubic-bezier(.77,0,.175,1);
  --dex-hand-x:calc(var(--kin-x,50cqw) + 14cqh - var(--dex-shift));--dex-left:calc(var(--dex-hand-x) + var(--dex-link));
  --dex-w:min(calc(100cqw + var(--dex-bleed) - var(--dex-left)),calc(var(--dex-hmax) * var(--dex-ratio)));--dex-h:calc(var(--dex-w) / var(--dex-ratio))}

/* KIN steps aside; the other two labels follow his new position. */
.spin-portrait .spin-stage{transition:transform var(--dex-slide) var(--dex-ease),opacity 200ms ease-out}
.spin-portrait.dex-open .spin-stage{transform:translateX(calc(-1 * var(--dex-shift)))}
.spin-portrait.dex-open .ability-note-hands{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 140ms ease-out,visibility 0s linear 140ms}
.spin-portrait.dex-open .ability-note-eyes{--point-x:calc(var(--kin-x,50cqw) - var(--dex-shift))}
.spin-portrait.dex-open .ability-note-body{--point-x:calc(var(--kin-x,50cqw) + 7.7cqh - var(--dex-shift))}
.spin-portrait .ability-note::before,.spin-portrait .ability-note::after{transition:background 180ms ease-out,transform 180ms ease-out,opacity 200ms ease-out}
.spin-portrait.dex-moving .ability-note::before,.spin-portrait.dex-moving .ability-note::after{opacity:0}

/* The line from KIN's hand to the window, drawn like the label lines. */
.dex-link{position:absolute;z-index:3;left:var(--dex-hand-x);top:53.3%;width:0;height:1px;background:rgb(255 196 107 / 42%);opacity:0;pointer-events:none;transition:width 120ms ease-out,opacity 120ms ease-out}
.dex-link::before{content:'';position:absolute;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--amber);outline:1px solid var(--amber);outline-offset:4px}
.spin-portrait.dex-open:not(.dex-moving) .dex-link{width:var(--dex-link);opacity:1;transition:width 280ms var(--dex-ease),opacity 120ms ease-out}

/* The window: a hard-edged frame that wipes open; the footage inside only ever cuts. */
.dex-plate{position:absolute;z-index:3;left:var(--dex-left);width:var(--dex-w);top:clamp(calc(8.8cqh + 83px),calc(53.3cqh - var(--dex-h) / 2),calc(100cqh - var(--dex-h) - var(--dex-meta) - 64px));color:var(--ink)}
.dex-plate[hidden]{display:none}
.dex-frame{position:relative;aspect-ratio:var(--dex-ratio);overflow:hidden;border-radius:10px;background:#d9d0c3;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;clip-path:inset(0 100% 0 0 round 10px);transition:clip-path 200ms var(--dex-ease)}
.dex-frame::after{content:'';position:absolute;inset:0;z-index:4;border:1px solid rgb(241 237 230 / 26%);border-radius:inherit;pointer-events:none}
.spin-portrait.dex-open .dex-frame{clip-path:inset(0 0 0 0 round 10px);transition:clip-path var(--dex-reveal) var(--dex-ease) calc(var(--dex-slide) * .5)}
.dex-plate.is-dragging .dex-frame{cursor:grabbing}
.dex-media{position:absolute;inset:0;transform:scaleX(var(--dex-flip,-1))} /* -1 mirrors the footage so the arm enters from KIN's side; 1 restores it */
/* Hidden by opacity, not visibility: iPhone Safari left a visibility:hidden clip unloaded, so the honey jar never played (Jesse, 2026-11-03). */
.dex-still,.dex-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;pointer-events:none}
.dex-still.on,.dex-video.on{opacity:1}
.dex-close{position:absolute;z-index:5;top:10px;right:10px;width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:rgb(33 31 28 / 72%);color:var(--ink);font:300 20px/1 var(--f-sans);cursor:pointer}
.dex-close::before{content:'';position:absolute;inset:-6px}
.dex-close:focus-visible{outline:1px solid var(--amber);outline-offset:3px}

/* Under the window: the line, the scale, and the same slider the hero rotation uses. */
.dex-meta{margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity 140ms ease-out,transform 140ms ease-out}
.spin-portrait.dex-open .dex-meta{opacity:1;transform:none;transition:opacity 260ms ease-out calc(var(--dex-slide) + 80ms),transform 260ms var(--dex-ease) calc(var(--dex-slide) + 80ms)}
.dex-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.dex-word{margin:0;font:500 clamp(18px,1.6vw,24px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--amber);transition:opacity 160ms ease-out}
.dex-word.out{opacity:0}
.dex-hint{font:400 11px/1.5 var(--f-sans);color:#d1c5b6;white-space:nowrap}
.dex-range{display:block;width:100%;height:24px;margin:8px 0 0;accent-color:var(--amber);cursor:ew-resize}
.dex-range:focus-visible{outline:none}
.dex-ticks{position:relative;height:14px;margin:0;padding:0;list-style:none;font:400 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dex-ticks li{position:absolute;top:2px;left:calc((100% - 16px) * var(--at));padding-left:8px;white-space:nowrap;transition:color 160ms ease-out}
.dex-ticks li.is-on{color:var(--ink)}

/* The copy beside KIN lights the grip that is showing. */
.explore-modes li{transition:color 200ms ease-out,opacity 200ms ease-out}
#explore-copy.dex-live .explore-modes li{opacity:.5}
#explore-copy.dex-live .explore-modes li.is-live{opacity:1;color:var(--amber)}

/* Narrow screens: no room beside KIN, so the window takes the figure's place. */
@media(max-width:900px){
  .spin-portrait{--dex-shift:0px}
  .spin-portrait.dex-open .spin-stage{opacity:0;pointer-events:none}
  .spin-portrait.dex-open .ability-note{opacity:0;visibility:hidden;pointer-events:none}
  .dex-plate{left:20px;right:20px;width:auto;top:0}
  .dex-link{display:none}
}
@media(prefers-reduced-motion:reduce){
  .spin-portrait .spin-stage,.dex-frame,.dex-meta,.dex-link,.dex-word,.spin-portrait .ability-note::before,.spin-portrait .ability-note::after{transition:none}
}