/* ============================================================
   EIGHTERS BASEBALL CLUB - Hero-Slideshow Styles
   Reines CSS: Alle Bilder absolut uebereinander, gleiche
   Animation mit versetztem Delay -> Crossfade-Loop.
   ============================================================ */

.hero-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Der Hero-Section muss position:relative gegeben werden */
.section--hero,
#hero {
    position: relative;
}

/* Alle Slides identisch animieren */
.hero-slideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation-name: hero-slide;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity;
}

/*
 * Crossfade-Logik:
 *   0%           -> transparent (Start)
 *   fade Anteil  -> einblenden
 *   halte Anteil -> sichtbar
 *   dann         -> wieder ausblenden bis Zyklusende
 * fade = ~25% der Einzel-Sichtbarkeit (bei 6s: 1.5s)
 */
@keyframes hero-slide {
    0%   { opacity: 0; }
    2%   { opacity: 0; }
    6%   { opacity: 1; }    /* voll eingeblendet */
    21%  { opacity: 1; }    /* sichtbar */
    25%  { opacity: 0; }    /* ausgeblendet */
    100% { opacity: 0; }
}

/* Abdunkelung + blauer Stich fuer Text-Lesbarkeit im Hero */
.hero-slideshow__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(5, 29, 73, 0.45) 0%,
            rgba(5, 29, 73, 0.35) 50%,
            rgba(5, 29, 73, 0.7) 100%
        );
}

/* Hero-Text muss ueber der Slideshow liegen */
/* (sofern nicht bereits vorhanden - ansonsten anpassen) */
#hero .hero-content,
#hero .container {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slideshow__slide {
        animation: none;
    }
    /* Nur das erste Bild statisch zeigen */
    .hero-slideshow__slide:first-child {
        opacity: 1;
    }
}