/* =========================================================================
   WRAPLY — animation.css  (scroll-driven wrap sequence + photographic hero)
   ========================================================================= */

/* ---- Pin container: tall scroll track, hero sticks while it scrolls ---- */
.hero-pin { position: relative; }
.hero-pin:not(.hero-pin--static):not(.hero-static) { height: 300vh; }
.hero-pin:not(.hero-pin--static):not(.hero-static) .hero {
  position: sticky; top: 0; height: 100vh;
}
/* Reduced-motion / static fallback collapses the track */
.hero-pin.hero-static { height: auto; }
.hero-pin.hero-static .hero { position: relative; }

/* ---- Media layer ---- */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media-scale { will-change: transform; height: 100%; }

.hero-img, .hero-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
}
.hero-img { transform: scale(1.08); transform-origin: center; will-change: transform, opacity; }

/* Stage frames stack; JS crossfades opacity by scroll progress */
.hero-frame { opacity: 0; will-change: opacity; }
.hero-frame[data-frame="0"] { opacity: 1; }

/* Dark gradient so the left-hand copy stays readable over the photo */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,11,15,0.88) 26%, rgba(11,11,15,0.40) 56%, rgba(11,11,15,0.06) 100%),
    linear-gradient(0deg, rgba(11,11,15,0.55) 0%, rgba(11,11,15,0) 30%);
}
.hero-overlay::after {
  content: ""; position: absolute; top: -160px; right: -160px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.28), transparent 70%);
}

/* Progress bar under the status badge */
.wrap-progress { margin-top: 12px; height: 4px; border-radius: 100px; background: rgba(255,255,255,.12); overflow: hidden; }
.wrap-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-lt), var(--green-ok)); transition: width .1s linear; }

/* Fallback when no hero image is set */
.hero.no-image .hero-media {
  background:
    radial-gradient(60% 60% at 72% 35%, rgba(79,70,229,0.35), transparent 70%),
    radial-gradient(50% 50% at 25% 75%, rgba(129,140,248,0.18), transparent 70%),
    var(--ink);
}
.hero.no-image .hero-img, .hero.no-image .hero-frame { display: none; }

@media (max-width: 1024px) {
  .hero-overlay { background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,11,15,0.85) 45%, rgba(11,11,15,0.55) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(11,11,15,0) 45%); }
  .hero-img, .hero-frame { object-position: 65% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-img { transition: none; }
}