/*
###################################################################
##   [KSK] Multigaming eSports Clan e.V. – Einheitliche Effekte   ##
###################################################################

Ersetzt WOW.js + animate.css. Es gibt nur wenige, feste Effekte:

  .fx-fade      Einblenden beim Scrollen (nur Transparenz, keine Bewegung).
                Mehrere Elemente nebeneinander erscheinen leicht nacheinander.
                Gesteuert von js/fx.js; ohne JavaScript ist alles sofort sichtbar.

  „Akte öffnen“ Ein Balken fährt von links nach rechts und gibt das Element frei
                (wie der Kopfbereich im Profil). Automatisch für:
                  - die Seitenüberschrift-Leiste (.ueberschrift)
                  - Erfolgsmeldungen (.alert-success, .shop-alert-ok)
                  - .fx-file (z. B. Slider-Button; im Slider bei jedem Folienwechsel neu)
                  - .fx-file.fx-on-view (erst, wenn es ins Bild scrollt, z. B. „Senden“)
                Startet erst, wenn die Ladeanimation weg ist (Klasse fx-shown aus main.js).
                Einstellbar: --fx-file-delay (Verzögerung), --fx-file-bar (Balkenfarbe).

Bei „Bewegung reduzieren“ (Betriebssystem) ist alles sofort sichtbar.
*/

/* ---------- Einblenden ---------- */

/* Erst ausblenden, wenn fx.js läuft (Klasse fx-js setzt das Layout im <head>) */
.fx-js .fx-fade {
    opacity: 0;
}

.fx-js .fx-fade.fx-in {
    animation: fx-fade-in .6s ease-out both;
    animation-delay: var(--fx-delay, 0s);
}

@keyframes fx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Akte öffnen ---------- */

.ueberschrift,
.alert-success,
.shop-alert-ok,
.fx-file {
    position: relative;
}

.alert-success,
.shop-alert-ok {
    --fx-file-delay: .25s;
}

.fx-file.fx-on-view {
    display: inline-block;
}

/* Freigeben (nach der Ladeanimation; bei .fx-on-view erst beim Hineinscrollen) */
.fx-shown .ueberschrift,
.fx-shown .alert-success,
.fx-shown .shop-alert-ok,
.fx-shown .fx-file:not(.fx-on-view),
.fx-shown .fx-file.fx-on-view.fx-in {
    animation: fx-file-open .6s cubic-bezier(.65, 0, .35, 1) var(--fx-file-delay, 0s) backwards;
}

/* Balken an der Kante */
.fx-shown .ueberschrift::after,
.fx-shown .alert-success::after,
.fx-shown .shop-alert-ok::after,
.fx-shown .fx-file:not(.fx-on-view)::after,
.fx-shown .fx-file.fx-on-view.fx-in::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background-color: var(--fx-file-bar, var(--template-color, #faffa9));
    box-shadow: 0 0 14px var(--fx-file-bar, var(--template-color, #faffa9));
    opacity: 0;
    pointer-events: none;
    animation:
        fx-file-bar .6s cubic-bezier(.65, 0, .35, 1) var(--fx-file-delay, 0s) both,
        fx-file-bar-out .25s ease-out calc(var(--fx-file-delay, 0s) + .6s) both;
}

/* Noch nicht im Bild: verdeckt halten (ohne fx.js nach 3 s sichtbar, siehe Layout) */
.fx-js .fx-file.fx-on-view:not(.fx-in) {
    clip-path: inset(0 100% 0 0);
}

/* Slider: nur auf der sichtbaren Folie; beim Folienwechsel startet der Effekt neu.
   Während die nächste Folie einblendet, bleibt der Button noch verdeckt. */
.carousel-item:not(.active) .fx-file,
.carousel-item:not(.active) .fx-file::after {
    animation: none;
}

.fx-shown .carousel-item:not(.active) .fx-file {
    clip-path: inset(0 100% 0 0);
}

@keyframes fx-file-open {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes fx-file-bar {
    from { left: -5px; opacity: 1; }
    to   { left: calc(100% - 5px); opacity: 1; }
}

@keyframes fx-file-bar-out {
    from { left: calc(100% - 5px); opacity: 1; }
    to   { left: calc(100% - 5px); opacity: 0; }
}

/* ---------- Sonstiges ---------- */

/* Mitlaufender Kopfbereich (style.css: header.sticky) – vorher aus animate.css */
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-js .fx-fade,
    .fx-js .fx-fade.fx-in,
    .fx-shown .ueberschrift,
    .fx-shown .alert-success,
    .fx-shown .shop-alert-ok,
    .fx-shown .fx-file,
    .fx-js .fx-file.fx-on-view:not(.fx-in),
    .fx-shown .carousel-item:not(.active) .fx-file {
        opacity: 1;
        animation: none;
        clip-path: none;
    }

    .fx-shown .ueberschrift::after,
    .fx-shown .alert-success::after,
    .fx-shown .shop-alert-ok::after,
    .fx-shown .fx-file::after {
        display: none;
    }
}