html {
  scroll-behavior: auto;
}

body {
  overflow-x: hidden;
}

.scroll-sequence {
  position: relative;
  width: 100%;
  height: 300vh;
  background: var(--page);
}

.scroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.composed-scene {
  position: relative;
  top: auto;
  width: calc(100% / var(--scene-scale, 1));
  height: 812px;
  min-height: 812px;
  transform: scale(var(--scene-scale, 1));
  transform-origin: 0 0;
}

.media-frame .scene-video {
  display: block;
}

.media-frame.is-loading .scene-video {
  background-image: url("./step-0.png");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 1023px) {
  .composed-scene {
    height: 945px;
    min-height: 945px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composed-scene {
    scroll-snap-align: start;
  }
}