/**
 * C4mulo5 Hero Fade Overlay — Frontend
 *
 * Wendet einen weißen Fade-Overlay auf der linken Section-Hälfte an
 * wenn die Section das data-Attribut `data-c4m5-fade-overlay="1"` hat.
 *
 * Verhalten:
 *  - Linke Hälfte (0% bis 46%): Weiß opak (100%)
 *  - Übergangsbereich (46% bis 54%): Linearer Fade von weiß auf transparent
 *  - Rechte Hälfte (54% bis 100%): Transparent (Hintergrundbild sichtbar)
 *
 * Implementierung über ::before Pseudo-Element auf der Section.
 * Wirkt auf JEDEN Section-Typ — C4mulo5-Sections + Mesmerize-Standard-Sections.
 *
 * Mobile (< 768px): Fade wird ausgeblendet damit Text auf kleinen Screens
 * nicht über halbem Bild steht. Section zeigt nur den weißen Overlay als
 * Vollflächen-Hintergrund (Lesbarkeit hat Priorität).
 */

[data-c4m5-fade-overlay="1"] {
    position: relative;
    /* Sicherstellen dass darüberliegende Inhalte (Text/Buttons) korrekt stacking-context bekommen */
    isolation: isolate;
}

[data-c4m5-fade-overlay="1"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to right,
        #ffffff 0%,
        #ffffff 46%,
        rgba(255, 255, 255, 0) 54%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* Sicherstellen dass Section-Inhalt ÜBER dem Overlay liegt */
[data-c4m5-fade-overlay="1"] > * {
    position: relative;
    z-index: 2;
}

/* Mobile: Overlay komplett weiß damit Text lesbar bleibt */
@media screen and (max-width: 767px) {
    [data-c4m5-fade-overlay="1"]::before {
        background: rgba(255, 255, 255, 0.85);
    }
}