/* =================================================================
   SHREE KALAS — SCROLL-SCRUBBED SEQUENCES
   The poster sits under the canvas and is revealed only while the
   frames are still arriving, so there is never an empty box.
   ================================================================= */

.sk-seq{position:relative;width:100%}
.sk-seq-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--sk-paper-deep);
}
.sk-seq-poster,
.sk-seq-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}
.sk-seq-canvas{opacity:0;transition:opacity .5s var(--sk-ease)}
.sk-seq.is-ready .sk-seq-canvas{opacity:1}
.sk-seq.is-ready .sk-seq-poster{opacity:0}
.sk-seq-poster{transition:opacity .5s var(--sk-ease)}

/* ---- the making sequence: pinned while it plays ----
   Hidden until the first frame has loaded. A poster pinned for 2.4
   screens is not a sequence; with no frames on disk the slot costs
   nothing. Reduced motion still gets the poster once frames exist. */
.sk-seq--making:not(.is-ready){display:none}
.sk-seq--making{height:calc(var(--sk-seq-span, 2) * 100svh)}
.sk-seq--making .sk-seq-stage{
  position:sticky;
  top:4.75rem;                        /* clears the top bar */
  height:calc(100svh - 4.75rem);
  aspect-ratio:auto;
  background:transparent;
  display:grid;
  place-items:center;
}
/* the piece sits at a readable size in the middle of the pinned
   stage rather than stretching to fill it */
.sk-seq--making .sk-seq-poster,
.sk-seq--making .sk-seq-canvas{
  position:relative;inset:auto;
  width:auto;height:min(72vh, 40rem);
  max-width:90vw;
}

/* ---- the turntable ---- */
.sk-seq--spin{cursor:grab;touch-action:pan-y}
.sk-seq--spin.is-dragging{cursor:grabbing}
.sk-seq--spin .sk-seq-stage{background:transparent}
.sk-seq-hint{
  position:absolute;left:50%;bottom:.75rem;
  transform:translateX(-50%);
  padding:.3125rem .5rem;
  border:1px solid var(--sk-rule);
  font-family:var(--sk-font-ui);
  font-size:.625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--sk-muted);
  opacity:0;
  transition:opacity .3s var(--sk-ease);
  pointer-events:none;
}
.sk-seq--spin:hover .sk-seq-hint,
.sk-seq--spin:focus-visible .sk-seq-hint{opacity:1}
.sk-seq--spin:focus-visible{outline:2px solid var(--sk-copper);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  /* no scrubbing: the poster is the whole experience */
  .sk-seq--making{height:auto}
  .sk-seq--making .sk-seq-stage{position:relative;top:0;height:auto;aspect-ratio:4/5}
  .sk-seq-canvas{display:none}
  .sk-seq-poster{opacity:1 !important}
}

/* the making run sits on the dark world, full-bleed like a band */
.sk-seq--making{
  position:relative;z-index:1;
  width:100vw;
  margin-inline:calc(50% - 50vw);
}