/* Perception window: KIN looks, and the window shows what he senses. Reuses the Eyes scan renderer; no footage. */
/* Same knobs as the Dexterity window (--dex-shift, --dex-ratio, --dex-hmax, ...). */
/* 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.per-open .spin-stage{transform:translateX(calc(-1 * var(--dex-shift)))}
.spin-portrait.per-open .ability-note-eyes{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 140ms ease-out,visibility 0s linear 140ms}
.spin-portrait.per-open .ability-note-hands{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 140ms ease-out,visibility 0s linear 140ms}
.spin-portrait.per-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.per-moving .ability-note::before,.spin-portrait.per-moving .ability-note::after{opacity:0}


/* The line from KIN's visor to the window, drawn like the label lines; the window's top edge sits just above it. */
.spin-portrait{--per-top:calc(8.8cqh - 26px)}
.spin-portrait.per-open,.spin-portrait.per-open .per-plate{--dex-ratio:1.6} /* wider than the hand window so the room photo is cropped less and the radar label fits */
.per-link{position:absolute;z-index:3;left:calc(var(--kin-x,50cqw) - var(--dex-shift));top:8.8%;width:0;height:1px;background:rgb(255 196 107 / 42%);opacity:0;pointer-events:none;transition:width 120ms ease-out,opacity 120ms ease-out}
.per-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.per-open:not(.per-moving) .per-link{width:calc(14cqh + 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. */
.per-plate{position:absolute;z-index:3;left:var(--dex-left);width:var(--dex-w);top:var(--per-top);color:var(--ink)}
.per-plate[hidden]{display:none}
.per-frame{position:relative;aspect-ratio:var(--dex-ratio);overflow:hidden;border-radius:10px;background:#14110f;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)}
.per-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.per-open .per-frame{clip-path:inset(0 0 0 0 round 10px);transition:clip-path var(--dex-reveal) var(--dex-ease) calc(var(--dex-slide) * .5)}
.per-plate.is-dragging .per-frame{cursor:grabbing}
.per-media{position:absolute;inset:0} /* -1 mirrors the footage so the arm enters from KIN's side; 1 restores it */
.per-frame{container-type:size}
.per-frame .beat{position:absolute;inset:0;visibility:hidden}
.per-frame .beat.on{visibility:visible}
.per-frame .scene{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%)}
.per-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}
.per-close::before{content:'';position:absolute;inset:-6px}
.per-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. */
.per-meta{margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity 140ms ease-out,transform 140ms ease-out}
.spin-portrait.per-open .per-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)}
.per-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.per-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}
.per-word.out{opacity:0}
.per-hint{font:400 11px/1.5 var(--f-sans);color:#d1c5b6;white-space:nowrap}
.per-range{display:block;width:100%;height:24px;margin:8px 0 0;accent-color:var(--amber);cursor:ew-resize}
.per-range:focus-visible{outline:none}
.per-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)}
.per-ticks li{position:absolute;top:2px;left:calc((100% - 16px) * var(--at));padding-left:8px;white-space:nowrap;transition:color 160ms ease-out}
.per-ticks li.is-on{color:var(--ink)}
.per-ticks li:last-child{left:auto;right:0;padding-left:0}


/* KIN's map (perception-map.js): canvas, label overlay and the dotted "moved from" trail. */
.per-media canvas.map-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-labels,.map-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.map-trail path{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .4s}
.map-trail path.on{opacity:.8}
.map-lab{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s cubic-bezier(.23,1,.32,1)}
.map-lab.on{opacity:1}
.map-lab i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;border:1px solid var(--amber);box-shadow:0 0 10px rgb(255 196 107 / 45%)}
.map-lab i::after{content:'';position:absolute;left:5px;top:5px;width:2px;height:2px;border-radius:50%;background:var(--amber)}
.map-lab b{--lead:30px;position:absolute;left:7px;top:-.5px;height:1px;width:var(--lead);background:rgb(255 196 107 / 55%);transform-origin:0 0;transform:rotate(-28deg)}
.map-lab span{position:absolute;left:calc(30px * .88 + 6px);top:calc(30px * -.47 - 9px);white-space:nowrap;font:400 clamp(9px,.75vw,10.5px)/1.35 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);text-shadow:0 1px 8px rgb(0 0 0 / 85%)}
.map-lab span em{display:block;font-style:normal;color:var(--ink);opacity:.8}
.map-lab.left b{transform:rotate(-152deg)}
.map-lab.left span{left:auto;right:calc(30px * .88 + 6px);text-align:right}
.map-lab.ghost i{border-style:dashed;opacity:.7;box-shadow:none}
/* "What changed": a small snapshot of what KIN saw, in a rounded square that echoes the window */
.per-snap{position:absolute;z-index:3;right:12px;bottom:12px;width:clamp(96px,21%,180px);aspect-ratio:1;margin:0;border-radius:6px;overflow:hidden;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s,transform .6s cubic-bezier(.23,1,.32,1);pointer-events:none;box-shadow:0 10px 30px rgb(0 0 0 / 45%)}
.per-snap::after{content:'';position:absolute;inset:0;border:1px solid rgb(255 196 107 / 55%);border-radius:inherit}
.per-snap img{display:block;width:100%;height:100%;object-fit:cover}
.per-snap figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(transparent,rgb(0 0 0 / 72%));font:400 clamp(8px,.7vw,10px)/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.per-plate.is-changed .per-snap{opacity:1;transform:none;transition-delay:.35s}
@media(prefers-reduced-motion:reduce){.map-lab,.map-trail path,.per-snap{transition:none}}
/* Under 901 px the window replaces the figure, as the Dexterity window does. */
@media(max-width:900px){
  .spin-portrait.per-open .spin-stage{transform:none;opacity:0;pointer-events:none}
  .spin-portrait.per-open .ability-note{opacity:0;visibility:hidden;pointer-events:none}
  .per-plate{left:20px;right:20px;width:auto;top:0}
  .per-link{display:none}
}