/* Scene player chrome. The frames' own look lives in each landing. */
/* Uses the semantic tokens from Base.astro (a standalone video composition defines its own copy). */
[data-scene] { margin: 0 auto; max-width: var(--cl-media); position: relative; border-radius: var(--cl-radius-section); background: var(--cl-surface); border: 1px solid var(--cl-border); padding: 16px; }
[data-scene]:focus-visible, .scene__btn:focus-visible, .scene__range:focus-visible, .scene__chapter:focus-visible { outline: 2px solid var(--cl-focus); outline-offset: 2px; }
.scene__stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--cl-radius-card); overflow: hidden; background: var(--cl-bg); }
[data-scene] [data-step] { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
[data-scene] [data-step].is-active { opacity: 1; visibility: visible; }
.scene__caption { min-height: 3.2em; margin: 14px 4px 4px; font: 700 18px/1.4 Inter, system-ui, sans-serif; color: var(--cl-text); }
.scene__controls { display: flex; align-items: center; gap: 12px; padding: 4px; }
.scene__btn { flex: none; width: 40px; height: 40px; border-radius: var(--cl-radius-btn); border: 0; display: grid; place-items: center; cursor: pointer; background: var(--cl-cta-bg); color: var(--cl-cta-text); padding: 0; transition: background-color var(--cl-duration) var(--cl-ease); }
.scene__btn svg { width: 20px; height: 20px; }
.scene__btn:hover { background: var(--cl-cta-hover); }
.scene__sound { background: transparent; color: var(--cl-text); box-shadow: inset 0 0 0 1px var(--cl-border-control); }
.scene__sound:hover { background: var(--cl-bg); }
.scene__track { position: relative; flex: 1; height: 24px; display: flex; align-items: center; }
.scene__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: var(--cl-radius-pill); cursor: pointer;
  background: linear-gradient(to right, var(--cl-accent-fill, var(--cl-violet)) var(--progress, 0%), var(--cl-border) var(--progress, 0%)); }
.scene__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cl-accent-fill, var(--cl-violet)); border: 3px solid var(--cl-bone); box-shadow: 0 0 0 1px var(--cl-border); }
.scene__range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--cl-accent-fill, var(--cl-violet)); border: 3px solid var(--cl-bone); }
.scene__chapters { position: absolute; inset: 0; pointer-events: none; }
.scene__chapter { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -1px; border-radius: 50%; border: 2px solid var(--cl-bone); background: var(--cl-border); padding: 0; cursor: pointer; pointer-events: auto; z-index: 1; }
.scene__chapter.is-done { background: var(--cl-accent-fill, var(--cl-violet)); }
.scene__chapter:first-child { display: none; }
.scene__time { flex: none; font: 400 13px/1 Inter, system-ui, sans-serif; color: var(--cl-text-muted); font-variant-numeric: tabular-nums; }

/* Without JS (html lacks .js, set inline by Base.astro): static storyboard, animations frozen. */
html:not(.js) [data-scene] .scene__stage { aspect-ratio: auto; display: grid; gap: 16px; background: transparent; }
html:not(.js) [data-scene] [data-step] { position: relative; opacity: 1; visibility: visible; aspect-ratio: 16 / 9; border-radius: var(--cl-radius-card); overflow: hidden; background: var(--cl-bg); }
html:not(.js) [data-scene] [data-step] *, html:not(.js) [data-scene] [data-step] *::before, html:not(.js) [data-scene] [data-step] *::after { animation: none !important; }
html:not(.js) [data-scene] [data-step]::after { content: attr(data-caption); position: absolute; left: 12px; right: 12px; bottom: 12px; font: 700 15px/1.4 Inter, system-ui, sans-serif; }

@media (max-width: 600px) {
  [data-scene] { padding: 8px; }
  .scene__stage { aspect-ratio: 4 / 5; }
  .scene__caption { font-size: 16px; }
  .scene__time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene] [data-step], .scene__btn { transition: none; }
}

/* Render mode (video): full-bleed stage, no chrome, no CSS transitions. */
[data-scene][data-render] { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }
[data-scene][data-render] .scene__stage { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
[data-scene][data-render] [data-step] { transition: none; }