.alta-svp {
  position: relative;
  width: 100%;
  /* `height` is set inline = scrollDistance * 100vh */
}

.alta-svp__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* heightMode = "video": sticky pins to the video's natural aspect ratio.
   `aspect-ratio` + `height: auto` is set inline once the video metadata loads. */
.alta-svp__sticky--aspect {
  height: auto;
  max-height: 100vh;
  max-width: 100vw;
  margin-inline: auto;
}

.alta-svp__video {
  width: 100%;
  height: 100%;
  display: block;
  /* object-fit is set inline so it can be controlled from props */
  pointer-events: none;
  user-select: none;
  background: inherit;
  /* iOS Safari flicker fix: promote the video to its own GPU layer so
     backward seeks don't repaint through stale frames. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.alta-svp__placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-family: Satoshi, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  text-align: center;
  padding: 24px;
}

/* Hint to the browser that this section is going to be animated against scroll —
   helps avoid layout passes on each frame. */
@supports (will-change: transform) {
  .alta-svp__sticky {
    will-change: transform;
  }
}

/* In rare WebKit cases sticky inside a `display: grid` parent breaks.
   This is a defensive isolation for the section. */
.alta-svp {
  contain: layout paint;
}