/* scene-scroll.css — reusable pixel-art scrollytelling (pairs with scene-scroll.js).
   A .scene-scroll is a tall track; its sticky stage crossfades through inline-SVG
   frames as the visitor scrolls. Consumes tokens.css. */

.scene-scroll { position: relative; height: calc(var(--frames, 3) * 88vh); }

.scene-scroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 1.5rem);
}

.scene-scroll__stage {
  position: relative;
  width: min(88vw, 620px);
  aspect-ratio: 96 / 64;
  background: var(--canvas, #F7F4EE);
  border: 1px solid var(--rule, #e2ddd2);
  border-radius: 6px;
  overflow: hidden;
}

.scene-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease, ease-out);
}
.scene-frame.is-active { opacity: 1; }
.scene-frame svg {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.scene-scroll__caption {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  color: var(--muted, #6B6864);
  text-align: center;
  max-width: 34rem;
  min-height: 1.5em;
  margin: 0;
  transition: opacity 0.4s var(--ease, ease-out);
}

/* Reduced motion / small screens: the JS resolves to the final frame; render it
   in place with the full caption set, no sticky pinning. */
.scene-scroll--static { height: auto; }
.scene-scroll--static .scene-scroll__sticky { position: static; height: auto; padding: var(--space-4, 2rem) 0; }
.scene-scroll--static .scene-frame { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .scene-frame, .scene-scroll__caption { transition: none; }
}