/* ===============================
    Sanfte Scroll-Animationen

    Info-Bereiche erscheinen leicht
    von unten, sobald sie sichtbar werden
   =============================== */

.info-section {

    /* Startzustand vor dem Einblenden */
    opacity: 0;

    transform: translateY(30px);

    /* weicher Übergang */
    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.25s ease;
}


.info-section.is-visible {

    /* sichtbarer Zustand */
    opacity: 1;

    transform: translateY(0);
}


/* ===============================
    Hero Slider Karussell
   =============================== */


.slider-image {

    transition:
        transform 0.8s ease,
        opacity 0.8s ease,
        filter 0.8s ease;

}


/* ===============================
    Karussell Bewegungen
    =============================== /

/* 
Zielpositionen sind identisch mit den Ruhezuständen aus hero.css
    (slider-image-left / -center / -right), deshalb reichen dafür
    die bestehenden Klassen -> keine Duplikate nötig.
    */

/* Ausblenden nach links (Element verlässt den sichtbaren Bereich) */
.carousel-exit-left {
    transform:
        translate(-220%, -50%)
        scale(.55);
    opacity: 0;
}

/* Einblenden von rechts (neues Bild kommt rein) */
.carousel-enter-right {
    transform:
        translate(220%, -50%)
        scale(.55);
    opacity: 0;
}

/* Ausblenden nach rechts (für "previous") */
.carousel-exit-right {
    transform:
        translate(220%, -50%)
        scale(.55);
    opacity: 0;
}

/* Einblenden von links (für "previous") */
.carousel-enter-left {
    transform:
        translate(-220%, -50%)
        scale(.55);
    opacity: 0;
}

/* Hilfsklasse: Element springt sofort ohne Transition an eine Position
    (wird für das "Teleportieren" des recycelten Bildes gebraucht) */
.carousel-no-transition {
    transition: none !important;
}

/* Etwas schnellerer, knackigerer Einblend-Effekt für das neue Bild */
.carousel-entering {
    transition-duration: .5s;
}