/* ============================================================================
   exotic — css/motion-stage.css · THE MERIDIAN STAGE
   The chrome around js/motion-stage.js's particle field: the panel, the act
   caption, the act rail. The field itself is canvas and styles nothing.
   ========================================================================== */

.st-wrap{position:relative;border-radius:var(--rad-4,22px);overflow:hidden;
  background:var(--bg-sunken);border:1px solid var(--hairline-2);
  box-shadow:var(--elev-1)}
/* the field reads as lit from the middle. A radial of LIGHT, not a fill —
   it never tints the surface, it only lifts the centre out of the edges. */
.st-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(86% 74% at 50% 46%,
    transparent 0%,
    color-mix(in oklab,var(--bg-sunken) 38%,transparent) 74%,
    var(--bg-sunken) 100%)}
.st-stage{position:relative;height:clamp(340px,46vw,520px);cursor:crosshair}

/* ---- the caption · one act at a time, crossfading in place ---- */
.st-cap{position:absolute;left:26px;bottom:24px;z-index:3;pointer-events:none;
  display:grid}
.st-cap > span{grid-area:1/1;display:block;
  transition:opacity var(--t-slow,.3s) var(--ease-out),
             transform var(--t-slow,.3s) var(--ease-out),
             filter var(--t-slow,.3s) var(--ease-out);
  opacity:0;transform:translateY(6px);filter:blur(3px)}
.st-cap > span.on{opacity:1;transform:none;filter:blur(0)}
.st-cap b{display:block;font-size:19px;font-weight:600;
  letter-spacing:var(--track-display,-0.02em);color:var(--ink);line-height:1.15}
.st-cap i{display:block;font-family:var(--font-num);font-style:normal;font-size:10.5px;
  text-transform:uppercase;letter-spacing:var(--track-caps,.07em);color:var(--muted);
  margin-top:6px}

/* ---- the act rail · four segments, the live one filled with the ramp ---- */
.st-rail{position:absolute;right:24px;bottom:26px;z-index:4;display:flex;
  align-items:center;gap:8px}
/* the segment is a fixed 38px track; the LIVE one fills with the ramp via
   scaleX from its left edge. Growing the width would animate layout — this
   is transform only, and it reads better besides: a rail that fills. */
.st-rail button{position:relative;width:38px;height:3px;padding:0;border:0;
  border-radius:var(--rad-pill,999px);background:var(--hairline);cursor:pointer;
  transition:background var(--t-med,.24s) var(--ease-out)}
.st-rail button::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--grad);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-med,.24s) var(--ease-emph,cubic-bezier(.16,1,.3,1))}
.st-rail button.on::before{transform:scaleX(1)}
.st-rail button::after{content:"";position:absolute;inset:-11px -4px} /* touch zone */
.st-rail button:hover{background:var(--hairline-2)}
.st-rail .st-play{width:auto;height:auto;background:none;margin-left:5px;
  font-family:var(--font-num);font-size:9px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);padding:3px 2px}
.st-rail .st-play:hover{background:none;color:var(--ink)}

/* ---- the hint · it says "move your cursor" once, then never again ---- */
.st-hint{position:absolute;left:50%;top:22px;translate:-50% 0;z-index:3;
  font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);pointer-events:none;
  transition:opacity var(--t-slow,.3s) var(--ease-out)}
.st-wrap.touched .st-hint{opacity:0}

@media (max-width:640px){
  .st-stage{height:clamp(280px,72vw,360px)}
  .st-cap{left:18px;bottom:18px} .st-cap b{font-size:16px}
  .st-rail{right:16px;bottom:20px}
  .st-rail button{width:26px}
}

/* ============================================================================
   REDUCED MOTION — the field stops travelling (js/motion-stage.js cuts
   straight to each act), and the caption stops sliding. The acts remain
   reachable from the rail, so nothing on this stage becomes unavailable:
   reduced motion means gentler, not gone.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .st-cap > span{transition:opacity var(--t-med,.24s) linear;transform:none;filter:none}
  .st-cap > span.on{transform:none;filter:none}
  .st-rail button{transition:background var(--t-med,.24s) linear}
  .st-stage{cursor:default}
}
html.mk-reduce .st-cap > span{transition:opacity var(--t-med,.24s) linear;transform:none;filter:none}
html.mk-reduce .st-cap > span.on{transform:none;filter:none}
html.mk-reduce .st-stage{cursor:default}