/* ── Scroll Animations — Frontend Styles ─────────────────────────────────── */

/* ── HERO MODE ──────────────────────────────────────────────────────────────
   The wrapper occupies N×100vh of scroll space.
   .sca-stage sticks to the viewport while frames advance.
   ────────────────────────────────────────────────────────────────────────── */
.sca-wrapper[data-mode="hero"] {
  position: relative;
  width: 100%;
  /* height is set by JS: data-scroll-height + 'vh' */
}

.sca-wrapper[data-mode="hero"] .sca-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* ── CONTAINER MODE ─────────────────────────────────────────────────────────
   Normal block element. Aspect ratio enforced via .sca-aspect-box padding.
   ────────────────────────────────────────────────────────────────────────── */
.sca-wrapper[data-mode="container"] {
  position: relative;
  width: 100%;
}

.sca-wrapper[data-mode="container"] .sca-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* ── SHARED ─────────────────────────────────────────────────────────────────
   Aspect box: the padding-bottom trick to enforce a fixed aspect ratio.
   Canvas and overlay are absolutely positioned inside it.
   ────────────────────────────────────────────────────────────────────────── */
.sca-aspect-box {
  position: relative;
  width: 100%;
  /* padding-bottom is set by JS for container mode */
}

.sca-canvas {
  display: block;
  /* position, inset, width, height set by JS */
}

.sca-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* pointer-events set per-widget via Elementor control */
}

/* Prevent Elementor section padding from collapsing hero sections */
.elementor-section:has(.sca-wrapper[data-mode="hero"]),
.e-con:has(.sca-wrapper[data-mode="hero"]) {
  padding: 0 !important;
}