/**
 * CargoMatrix hero carousel — slide effects
 *
 * Shared by the live hero (index.html) and the effect preview in the admin
 * panel, so the preview always matches what visitors actually see.
 *
 * The effect is a class on .hero-carousel: fx-fade | fx-slide | fx-zoom |
 * fx-reveal | fx-blur | fx-parallax | fx-cinematic. "Mix" is not a class —
 * the carousel script picks a random effect per transition and applies it.
 *
 * Per-transition image motion is a pan-* class the script sets on the
 * incoming slide (pan-in | pan-out | pan-left | pan-right | pan-up | pan-down).
 */

/* ── Structure the effects depend on ──────────────────────────── */
.hero-carousel .hero-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.hero-carousel .hero-slide.is-active { z-index: 2; }
.hero-carousel .hero-slide.is-leaving { z-index: 1; }
.hero-carousel .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

/* ── Caption entrance ─────────────────────────────────────────────
   Staggered rise applies to every effect — this is most of what makes
   the hero feel composed rather than a plain image swap. */
.hero-carousel .hero-slide-caption > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hero-carousel .hero-slide.is-active .hero-slide-caption > * {
  opacity: 1;
  transform: none;
}
.hero-carousel .hero-slide.is-active .hero-slide-caption > *:nth-child(1) { transition-delay: 0.30s; }
.hero-carousel .hero-slide.is-active .hero-slide-caption > *:nth-child(2) { transition-delay: 0.40s; }
.hero-carousel .hero-slide.is-active .hero-slide-caption > *:nth-child(3) { transition-delay: 0.50s; }
.hero-carousel .hero-slide.is-active .hero-slide-caption > *:nth-child(4) { transition-delay: 0.60s; }

/* ── Ken Burns image motion ───────────────────────────────────────
   Slow drift across the slide's dwell time. Scale stays above 1 on the
   translating variants so the edges never expose the background. */
.hero-carousel .hero-slide img { transition: transform 8s ease-out; }

.hero-carousel .hero-slide.pan-in img { transform: scale(1.11); }
.hero-carousel .hero-slide.pan-in.is-active img { transform: scale(1); }

.hero-carousel .hero-slide.pan-out img { transform: scale(1); }
.hero-carousel .hero-slide.pan-out.is-active img { transform: scale(1.11); }

.hero-carousel .hero-slide.pan-left img { transform: scale(1.14) translateX(3.5%); }
.hero-carousel .hero-slide.pan-left.is-active img { transform: scale(1.14) translateX(-3.5%); }

.hero-carousel .hero-slide.pan-right img { transform: scale(1.14) translateX(-3.5%); }
.hero-carousel .hero-slide.pan-right.is-active img { transform: scale(1.14) translateX(3.5%); }

.hero-carousel .hero-slide.pan-up img { transform: scale(1.14) translateY(3.5%); }
.hero-carousel .hero-slide.pan-up.is-active img { transform: scale(1.14) translateY(-3.5%); }

.hero-carousel .hero-slide.pan-down img { transform: scale(1.14) translateY(-3.5%); }
.hero-carousel .hero-slide.pan-down.is-active img { transform: scale(1.14) translateY(3.5%); }

/* ── 1. Fade — crossfade ──────────────────────────────────────── */
.hero-carousel.fx-fade .hero-slide {
  opacity: 0;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.hero-carousel.fx-fade .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0s linear 0s;
}

/* ── 2. Slide — horizontal push ───────────────────────────────── */
.hero-carousel.fx-slide .hero-slide {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 0.75s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0.75s;
}
.hero-carousel.fx-slide[data-dir="prev"] .hero-slide { transform: translateX(-100%); }
.hero-carousel.fx-slide .hero-slide.is-active,
.hero-carousel.fx-slide .hero-slide.is-leaving {
  visibility: visible;
  transition: transform 0.75s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0s;
}
.hero-carousel.fx-slide .hero-slide.is-active { transform: translateX(0); }
.hero-carousel.fx-slide .hero-slide.is-leaving { transform: translateX(-100%); }
.hero-carousel.fx-slide[data-dir="prev"] .hero-slide.is-leaving { transform: translateX(100%); }

/* ── 3. Zoom — push forward through the dissolve ──────────────── */
.hero-carousel.fx-zoom .hero-slide {
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.8s;
}
.hero-carousel.fx-zoom .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0s;
}
.hero-carousel.fx-zoom .hero-slide.is-leaving {
  visibility: visible;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.8s;
}

/* ── 4. Reveal — vertical wipe over the previous slide ────────── */
.hero-carousel.fx-reveal .hero-slide {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0.85s;
}
.hero-carousel.fx-reveal[data-dir="prev"] .hero-slide { clip-path: inset(0 0 100% 0); }
.hero-carousel.fx-reveal .hero-slide.is-active,
.hero-carousel.fx-reveal .hero-slide.is-leaving {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0s;
}

/* ── 5. Blur Dissolve — rack focus between slides ─────────────── */
.hero-carousel.fx-blur .hero-slide {
  opacity: 0;
  filter: blur(18px) saturate(1.4);
  transform: scale(1.08);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s;
}
.hero-carousel.fx-blur .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  filter: blur(0) saturate(1);
  transform: scale(1);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease, visibility 0s linear 0s;
}
.hero-carousel.fx-blur .hero-slide.is-leaving {
  visibility: visible;
  opacity: 0;
  filter: blur(18px) saturate(1.4);
  transition: opacity 0.9s ease, filter 0.9s ease, visibility 0s linear 0.9s;
}

/* ── 6. Parallax — image trails the slide it rides on ─────────── */
.hero-carousel.fx-parallax .hero-slide {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0.9s;
}
.hero-carousel.fx-parallax[data-dir="prev"] .hero-slide { transform: translateX(-100%); }
.hero-carousel.fx-parallax .hero-slide.is-active,
.hero-carousel.fx-parallax .hero-slide.is-leaving {
  visibility: visible;
  transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0s;
}
.hero-carousel.fx-parallax .hero-slide.is-active { transform: translateX(0); }
.hero-carousel.fx-parallax .hero-slide.is-leaving { transform: translateX(-45%); }
.hero-carousel.fx-parallax[data-dir="prev"] .hero-slide.is-leaving { transform: translateX(45%); }
/* Image counter-moves inside the frame — overrides the pan-* motion */
.hero-carousel.fx-parallax .hero-slide img {
  transform: scale(1.12) translateX(-22%);
  transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.hero-carousel.fx-parallax[data-dir="prev"] .hero-slide img { transform: scale(1.12) translateX(22%); }
.hero-carousel.fx-parallax .hero-slide.is-active img { transform: scale(1.12) translateX(0); }
.hero-carousel.fx-parallax .hero-slide.is-leaving img { transform: scale(1.12) translateX(22%); }
.hero-carousel.fx-parallax[data-dir="prev"] .hero-slide.is-leaving img { transform: scale(1.12) translateX(-22%); }

/* ── 7. Cinematic — long soft dissolve, pan direction varies ──── */
.hero-carousel.fx-cinematic .hero-slide {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.4s;
}
.hero-carousel.fx-cinematic .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
.hero-carousel.fx-cinematic .hero-slide.is-leaving {
  visibility: visible;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.4s;
}
/* Longer, deeper drift than the other effects */
.hero-carousel.fx-cinematic .hero-slide img { transition: transform 11s linear; }

/* ── Reduced motion — instant, motionless swap for every effect ── */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-slide,
  .hero-carousel .hero-slide img,
  .hero-carousel .hero-slide-caption > * {
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition-delay: 0s !important;
  }
  .hero-carousel .hero-slide { opacity: 0; }
  .hero-carousel .hero-slide.is-active { opacity: 1; visibility: visible; }
  .hero-carousel .hero-slide.is-leaving { opacity: 0; visibility: hidden; }
  .hero-carousel .hero-slide.is-active .hero-slide-caption > * { opacity: 1; }
}