/* Section player (js/section.js): scene switching, the cursor, and the feature list
   in each story step that follows the playing scene. */

.kp .scene{display:none;flex-direction:column;gap:10px}
.kp .scene.on{display:flex;animation:viewIn .35s var(--ease)}

/* the cursor: a plain arrow that travels, then dips and rings on a click */
.kp-cursor{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;
           transition:transform .52s cubic-bezier(.5,.05,.2,1),opacity .25s}
.kp-cursor.on{opacity:1}
.kp-cursor i{display:block;width:16px;height:22px;background:#fff;
  clip-path:polygon(0 0,0 78%,24% 60%,40% 96%,56% 90%,40% 55%,74% 55%);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));transform-origin:0 0;transition:transform .12s}
.kp-cursor::after{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(183,163,255,.9);opacity:0;transform:scale(.4)}
.kp-cursor.down i{transform:scale(.86)}
.kp-cursor.down::after{animation:ring .45s ease-out}
@keyframes ring{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}

/* the feature list inside each story step */
.subs{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.subs li{font-size:14px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;
         transition:color .25s,border-color .25s,background .25s}
.subs li:hover{color:var(--ink);border-color:#3a4352}
.subs li.on{color:var(--ink);border-color:var(--vio);background:var(--vio-wash)}

@media (prefers-reduced-motion:reduce){.kp-cursor{display:none}}

/* One body height for every section, so the window never jumps between scenes or
   sections. 400px is the tallest scene (Animated) measured in the browser, plus padding. */
.screen .kp-body{min-height:424px}