/* assets/os-scene.css · the INFINITE loop scene on /infinite-os-overview (#pipeline), 1 Nov 2026.
   assets/loop.js draws the loop from assets/loop.svg; on desktop (760 px+) it pins the card while you scroll
   (.is-pinned), runs the dot through the eight stages and lights the magenta return arc last. Phones, reduced
   motion and no JS get the final frame and the readable stage list. Ported from the parked v-next OS page. */
.os-scene__head{ margin-block-end:var(--space-3) }
.os-scene__card{ position:relative; padding:var(--space-5) var(--space-3) var(--space-3); border-radius:var(--radius-base);
  background:linear-gradient(135deg, var(--black) 0%, var(--purple) 100%); color:var(--on-duo-ink) }
[dir="rtl"] .os-scene__card{ background:linear-gradient(225deg, var(--black) 0%, var(--purple) 100%) }
.os-scene__cap{ margin:var(--space-2) 0 0; text-align:center; color:var(--on-duo-ink); font:600 var(--t-h4)/var(--lh-head) var(--font-sans);
  transition:opacity var(--dur-quick) var(--ease-standard) }
.os-scene__cap:not(.is-on){ opacity:0 }
.os-scene__steps{ margin-block-start:var(--space-3) }
.os-scene .loop-steps__half{ color:var(--ink-muted) }
@media (min-width:760px){
  /* desktop: the stage words live in the drawing; the list stays for screen readers */
  .os-scene__steps{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .os-scene.is-pinned{ block-size:250vh; padding-block:0 }
  .os-scene.is-pinned .os-scene__pin{ position:sticky; inset-block-start:var(--os-pin-top, 64px); min-block-size:calc(100vh - var(--os-pin-top, 64px));
    display:grid; align-content:center; padding-block:var(--space-3) }
  .os-scene.is-pinned .os-scene__head{ margin-block-end:var(--space-2) }
  .os-scene.is-pinned .loop-fig{ max-inline-size:min(960px, calc((100vh - 360px) * 2.4)) }
}
@media (max-width:759.98px){
  .os-scene__card{ padding:var(--space-3) var(--space-2) var(--space-2); border-radius:var(--radius-card) }
  .os-scene__cap{ font-size:var(--t-body) }
}