/* SPH3RE hero: container, poster and canvas layering.
   Markup:
     <section class="sph3re-hero">
       <picture> ... <img class="sph3re-hero__poster" alt=""> </picture>
       ...page content (headline etc.) above, with z-index >= 1...
     </section>
   The module appends the canvas; `.is-ready` fades it in over the poster.
   alignPoster() then sizes the poster to match the live framing exactly. */
.sph3re-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(90deg, #D7DBFE 0%, #B9D8FC 100%);
  /* Vertical swipes scroll the page; horizontal drags and taps turn the head. */
  touch-action: pan-y;
}
/* v1.3 backgroundMode 'transparent': the module adds .is-transparent; the page's own
   background shows through (use the poster_alpha_* posters in this mode). */
.sph3re-hero.is-transparent { background: none; }
.sph3re-hero__poster,
.sph3re-hero > canvas {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.sph3re-hero__poster {
  /* fallback until alignPoster() runs */
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.sph3re-hero > canvas {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sph3re-hero.is-ready > canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sph3re-hero > canvas { transition: none; }
}