/* =========================================================
   File: css/components/hero-carousel.css
   Title: Hero Media Carousel (4-image true crossfade)
   Version: 2026-01-04
========================================================= */

.hero-media--carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #181B20; /* prevents flash */
}

.hero-media--carousel .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  will-change: opacity;

  animation-duration: var(--hero-carousel-duration, 15s);
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.hero-media--carousel .hero-img:nth-child(1) {
  z-index: 1;
  opacity: 1;
  animation-name: none;
}

.hero-media--carousel .hero-img:nth-child(2) {
  z-index: 2;
  animation-name: heroReveal2;
}

.hero-media--carousel .hero-img:nth-child(3) {
  z-index: 3;
  animation-name: heroReveal3;
}

.hero-media--carousel .hero-img:nth-child(4) {
  z-index: 4;
  animation-name: heroReveal4;
}

@keyframes heroReveal2 {
  0%   { opacity: 0; }
  22%  { opacity: 0; }
  38%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes heroReveal3 {
  0%   { opacity: 0; }
  48%  { opacity: 0; }
  64%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes heroReveal4 {
  0%   { opacity: 0; }
  74%  { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

/* =========================================================
   END OF FILE — css/components/hero-carousel.css
========================================================= */