:root{ --hero-carousel-opacity:.22; }

/* Hero background carousel */
.hero__carousel{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}

/* Cada imagen ocupa una fracción del ciclo sin solaparse.
   Se desvanece a negro antes de la siguiente. */
.hero__carousel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:heroBlackFade 48s linear infinite; will-change:opacity}

@keyframes heroBlackFade{
  0%{opacity:0}
  2%{opacity:var(--hero-carousel-opacity)}   /* entrada */
  8%{opacity:var(--hero-carousel-opacity)}   /* visible */
  10%{opacity:0}                              /* salida a negro */
  100%{opacity:0}
}

/* 8 slides, 6s offset each for a faster cycle */
.hero__carousel img:nth-child(1){animation-delay:0s}
.hero__carousel img:nth-child(2){animation-delay:6s}
.hero__carousel img:nth-child(3){animation-delay:12s}
.hero__carousel img:nth-child(4){animation-delay:18s}
.hero__carousel img:nth-child(5){animation-delay:24s}
.hero__carousel img:nth-child(6){animation-delay:30s}
.hero__carousel img:nth-child(7){animation-delay:36s}
.hero__carousel img:nth-child(8){animation-delay:42s}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero__carousel img{animation:none; opacity:var(--hero-carousel-opacity)}
  .hero__carousel img:not(:first-child){display:none}
}

/* Light mode: slightly lighter overlay */
[data-theme="light"]{ --hero-carousel-opacity:.16; }