/* ── 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 */
}

/* ── PLACEHOLDER IMAGE ───────────────────────────────────────────────────────
   First frame as a real <img> tag — loads at browser priority before JS runs.
   Sits behind the canvas (z-index 0). Fades out when .sca-loaded is applied.
   ────────────────────────────────────────────────────────────────────────── */
.sca-placeholder {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.sca-stage.sca-loaded .sca-placeholder {
  opacity: 0;
}

.sca-canvas {
  display: block;
  opacity: 0;                  /* hidden until first frame is drawn */
  transition: opacity 0.4s ease;
  z-index: 1;                  /* above placeholder, below overlay */
  /* position, inset, width, height set by JS */
}

.sca-stage.sca-loaded .sca-canvas {
  opacity: 1;
}

.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 */
}

/* ── KINETIC TEXT OVERLAY ────────────────────────────────────────────────────
   Used with Autoplay trigger. Add .sca-ko-wrap + .sca-ko spans to overlay HTML.
   The JS engine adds .sca-shown when the frame number is reached.
   ────────────────────────────────────────────────────────────────────────── */
.sca-ko-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1em 0.45em;
  padding: 0 6% 7%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.12) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.sca-ko {
  display: inline-block;
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #C87D3E;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
  opacity: 0;
  transform: scale(1.6) translateY(-6px);
  will-change: transform, opacity;
}

.sca-ko.sca-shown {
  animation: sca-punch 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.sca-ko.sca-ko--last.sca-shown {
  animation: sca-punch-last 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  color: #ffffff;
}

@keyframes sca-punch {
  0%   { opacity: 0; transform: scale(1.55) translateY(-6px); }
  55%  { opacity: 1; transform: scale(1.04) translateY(1px);  }
  100% { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes sca-punch-last {
  0%   { opacity: 0; transform: scale(1.8)  translateY(-10px); }
  50%  { opacity: 1; transform: scale(1.06) translateY(2px);   }
  100% { opacity: 1; transform: scale(1)    translateY(0);     }
}

@media (max-width: 767px) {
  .sca-ko-wrap { padding: 0 4% 5%; gap: 0.1em 0.35em; }
  .sca-ko      { font-size: clamp(1.2rem, 6vw, 2rem); }
}

/* ── PLAY BUTTON ─────────────────────────────────────────────────────────────
   Optional pulsing ▶ hint shown before the animation first plays.
   Hidden via .sca-pb-hidden which triggers the CSS transition, then
   display:none is set via JS after the transition completes.
   ────────────────────────────────────────────────────────────────────────── */
.sca-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:  var(--sca-btn-size, 80px);
  height: var(--sca-btn-size, 80px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--sca-btn-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  will-change: opacity, box-shadow;
  animation: sca-btn-pulse 2.4s ease-in-out infinite;
  transition: opacity 0.45s ease;
}

.sca-play-btn svg {
  width:  38%;
  height: 38%;
  fill: var(--sca-btn-color, #ffffff);
  margin-left: 7%; /* optical centering for play triangle */
  flex-shrink: 0;
}

/* Fade-out state added by JS */
.sca-play-btn.sca-pb-hidden {
  opacity: 0;
}

/* Double-ring ripple pulse */
@keyframes sca-btn-pulse {
  0%, 100% {
    box-shadow:
      0 0 0  0px rgba(255, 255, 255, 0.45),
      0 0 0  0px rgba(255, 255, 255, 0.20);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(255, 255, 255, 0.00),
      0 0 0 28px rgba(255, 255, 255, 0.00);
  }
}

/* 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;
}

/* ── v1.9.0: Poster image (SEO-visible fallback) ────────────────────────── */
/* The poster is a real <img> rendered in the same aspect-box as the canvas.
 * It's visible by default (so crawlers, no-JS users, and the LCP measurement
 * see it), and fades out as soon as the engine's first drawFrame call
 * succeeds and adds .sca-loaded to the wrapper. */
.sca-aspect-box .sca-poster {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}
.sca-wrapper.sca-loaded .sca-poster {
    opacity: 0;
}

/* The canvas always sits above the poster so once it has content, the poster
 * is visually replaced even before the fade completes. */
.sca-aspect-box .sca-canvas {
    position: relative;
    z-index: 2;
}

/* Honour reduced-motion preferences: skip the fade. */
@media (prefers-reduced-motion: reduce) {
    .sca-aspect-box .sca-poster {
        transition: none;
    }
}