/*! HERRA Scroll Moments 1.3.0 | structural styles only. Color and type come from the project's G8 tokens. */

/* Static equivalent (default, and for every static reason): normal flow, chapters stacked, captions visible. */
.sm { position: relative; }
.sm-chapter { margin: 0; }
.sm-chapter > img, .sm-chapter > video, .sm-chapter > picture, .sm-chapter > picture > img { display: block; width: 100%; height: auto; }
.sm-poster { display: block; width: 100%; height: auto; }
.sm-canvas { display: none; }
.sm-layers { position: relative; }

/* Live S1 and S2: tall track, sticky stage. Track in svh, stage in lvh, text safe box in svh. */
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-track {
  position: relative;
  height: calc(var(--sm-length, 3) * 100vh);
  height: calc(var(--sm-length, 3) * 100svh);
}
@media (max-width: 767px) {
  html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-track {
    height: calc(var(--sm-length-mobile, 2) * 100vh);
    height: calc(var(--sm-length-mobile, 2) * 100svh);
  }
}
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: clip;
}
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-safe {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
}
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-media { position: absolute; inset: 0; z-index: 1; }
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter { position: absolute; inset: 0; overflow: clip; opacity: 0; }
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter:first-child { opacity: 1; }
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter > img,
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter > video,
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter > picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: 50% 50%;
}
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter > picture > img { width: 100%; height: 100%; object-fit: cover; }
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-chapter > figcaption {
  position: absolute;
  left: var(--sm-gutter, 1.5rem);
  right: var(--sm-gutter, 1.5rem);
  bottom: 1.5rem;
  bottom: calc(100lvh - 100svh + 1.5rem);
}
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-poster,
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html[data-sm="live"] .sm:not([data-sm-state="static"]) .sm-canvas { display: block; opacity: 0; }

/* Compositor hints only while the moment is on screen. */
.sm.sm-is-active .sm-chapter,
.sm.sm-is-active .sm-chapter > img,
.sm.sm-is-active .sm-chapter > video,
.sm.sm-is-active .sm-chapter > picture,
.sm.sm-is-active [data-sm-depth] { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .sm [data-sm-depth], .sm .sm-chapter > * { transform: none !important; }
}