/*
 * FF Hasbergen - Animationen mit Feuerwehr-Thematik
 *
 * Wird nur geladen, wenn der Hauptschalter im Customizer unter
 * „FF Hasbergen › Animationen“ eingeschaltet ist. Jede Animation haengt
 * zusaetzlich an einer eigenen Klasse am <body>, die aus der jeweiligen
 * Einstellung kommt:
 *
 *   .ff-einblenden    Inhalte beim Scrollen einblenden
 *   .ff-blaulicht     Blaulicht-Lauflicht an farbigen Leisten
 *   .ff-sirene        Sirenen-Balken unter dem Kopfbereich
 *   .ff-flammen       Flackernde Flammen im Fussbereich
 *   .ff-funken        Aufsteigende Funken im Fussbereich
 *   .ff-glut          Glut-Schein bei Karten und Buttons
 *   .ff-logo          Logo pulsiert
 *   .ff-notruf-puls   Notruf-Hinweis pulsiert
 *
 * Die Staerke steuert .ff-anim-dezent / .ff-anim-mittel / .ff-anim-stark
 * ueber die Variablen --ff-anim-dauer, --ff-anim-weg und --ff-anim-kraft.
 */

/* ------------------------------------------------------------------ *
 * 1. Einblenden beim Scrollen
 * ------------------------------------------------------------------ */

.ff-einblenden .ff-auf {
    opacity: 0;
    transform: translateY(var(--ff-anim-weg));
    transition:
        opacity var(--ff-anim-dauer) cubic-bezier(.22, .61, .36, 1),
        transform var(--ff-anim-dauer) cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.ff-einblenden .ff-auf.ff-da {
    opacity: 1;
    transform: none;
}

/* Gestaffelt: jedes weitere Element startet etwas spaeter. */
.ff-einblenden .ff-auf[data-ff-verzug="1"] { transition-delay: .08s; }
.ff-einblenden .ff-auf[data-ff-verzug="2"] { transition-delay: .16s; }
.ff-einblenden .ff-auf[data-ff-verzug="3"] { transition-delay: .24s; }
.ff-einblenden .ff-auf[data-ff-verzug="4"] { transition-delay: .32s; }
.ff-einblenden .ff-auf[data-ff-verzug="5"] { transition-delay: .4s; }

/* Von der Seite hereinschieben - fuer den Textkasten im Kopfbild. */
.ff-einblenden .ff-auf--links {
    transform: translateX(calc(var(--ff-anim-weg) * -1.4));
}

.ff-einblenden .ff-auf--links.ff-da {
    transform: none;
}

/* ------------------------------------------------------------------ *
 * 2. Blaulicht
 *
 * Ein Licht wandert über die farbige Leiste - wie der Lichtbalken eines
 * Einsatzfahrzeugs, aber ohne Hektik.
 * ------------------------------------------------------------------ */

@keyframes ff-blaulicht-lauf {
    0%   { transform: translateX(-130%); }
    45%  { transform: translateX(130%); }
    50%  { transform: translateX(130%); }
    95%  { transform: translateX(-130%); }
    100% { transform: translateX(-130%); }
}

.ff-blaulicht .ff-kopf__streifen::after,
.ff-blaulicht .ff-kopf__sirene::after,
.ff-blaulicht .ff-footer__streifen::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 55%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(120, 180, 255, .55) 35%,
            rgba(225, 240, 255, .95) 50%,
            rgba(120, 180, 255, .55) 65%,
            transparent 100%);
    animation: ff-blaulicht-lauf calc(7s / var(--ff-anim-kraft)) ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Im Wasser-Modus passt ein warmes Licht besser zur blauen Leiste. */
html[data-ff-thema="wasser"] .ff-blaulicht .ff-kopf__streifen::after,
html[data-ff-thema="wasser"] .ff-blaulicht .ff-kopf__sirene::after,
html[data-ff-thema="wasser"] .ff-blaulicht .ff-footer__streifen::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 220, 160, .45) 35%,
            rgba(255, 248, 230, .9) 50%,
            rgba(255, 220, 160, .45) 65%,
            transparent 100%);
}

/* ------------------------------------------------------------------ *
 * 3. Sirenen-Balken
 *
 * Früher waren das harte rot-blaue Striche wie ein Absperrband. Jetzt
 * atmet die Leiste nur noch leicht zwischen Rot und Blau - deutlich
 * ruhiger und trotzdem erkennbar Feuerwehr.
 * ------------------------------------------------------------------ */

@keyframes ff-sirene {
    0%, 100% { opacity: 0; }
    40%      { opacity: .85; }
    60%      { opacity: .85; }
}

.ff-kopf__sirene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            #0b3fa8 0%,
            #1b6fe0 35%,
            #4aa3ff 50%,
            #1b6fe0 65%,
            #0b3fa8 100%);
    opacity: 0;
    pointer-events: none;
}

.ff-sirene .ff-kopf__sirene::before {
    animation: ff-sirene calc(5.5s / var(--ff-anim-kraft)) ease-in-out infinite;
}

/* ------------------------------------------------------------------ *
 * 4. Flackernde Flammen
 * ------------------------------------------------------------------ */

/* Die Deckkraft richtet sich nach der Einstellung, das Flackern bewegt
 * sich um diesen Wert herum. */
@keyframes ff-flackern {
    0%   { opacity: calc(var(--ff-flammen-deckkraft, .6) * .8); transform: translateY(0) scaleY(1); }
    18%  { opacity: calc(var(--ff-flammen-deckkraft, .6) * 1.12); transform: translateY(-4px) scaleY(1.05); }
    35%  { opacity: calc(var(--ff-flammen-deckkraft, .6) * .88); transform: translateY(1px) scaleY(.98); }
    52%  { opacity: calc(var(--ff-flammen-deckkraft, .6) * 1.25); transform: translateY(-7px) scaleY(1.09); }
    70%  { opacity: calc(var(--ff-flammen-deckkraft, .6) * .92); transform: translateY(0) scaleY(1); }
    85%  { opacity: calc(var(--ff-flammen-deckkraft, .6) * 1.1); transform: translateY(-3px) scaleY(1.04); }
    100% { opacity: calc(var(--ff-flammen-deckkraft, .6) * .8); transform: translateY(0) scaleY(1); }
}

@keyframes ff-glutschein {
    0%, 100% { opacity: calc(var(--ff-glut-kraft, .75) * .5); }
    50%      { opacity: var(--ff-glut-kraft, .75); }
}

.ff-flammen .ff-footer__flammen {
    transform-origin: center bottom;
    animation: ff-flackern calc(6s / var(--ff-anim-kraft)) ease-in-out infinite;
}

/* Der Schein pulsiert; Größe und Stärke kommen aus den Einstellungen. */
.ff-flammen .ff-footer::before {
    animation: ff-glutschein calc(5s / var(--ff-anim-kraft)) ease-in-out infinite;
}

/* ------------------------------------------------------------------ *
 * 5. Funkenflug
 *
 * Die Funken selbst legt ff-theme.js an. Hier steht nur die Bewegung.
 * ------------------------------------------------------------------ */

@keyframes ff-funke {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.6);
    }

    12% {
        opacity: 1;
    }

    70% {
        opacity: .85;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--ff-funke-seite, 20px), calc(var(--ff-funke-hoehe, 220px) * -1), 0) scale(.25);
    }
}

.ff-funken .ff-funke {
    animation-name: ff-funke;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

/* ------------------------------------------------------------------ *
 * 6. Glut-Schein bei Karten und Buttons
 * ------------------------------------------------------------------ */

@keyframes ff-glut-rand {
    0%   { box-shadow: 0 0 0 0 rgba(var(--ff-primaer-rgb), .5); }
    70%  { box-shadow: 0 0 0 14px rgba(var(--ff-primaer-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ff-primaer-rgb), 0); }
}

.ff-glut .ff-karten .card,
.ff-glut .bg-posts,
.ff-glut .einsatzberichte .einsatzbericht,
.ff-glut .ff-karte {
    position: relative;
}

.ff-glut .ff-karten .card::after,
.ff-glut .bg-posts::after,
.ff-glut .einsatzberichte .einsatzbericht::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(var(--ff-primaer-rgb), 0);
    transition: box-shadow .35s ease;
}

.ff-glut .ff-karten .card:hover::after,
.ff-glut .ff-karten .card:focus-within::after,
.ff-glut .bg-posts:hover::after,
.ff-glut .einsatzberichte .einsatzbericht:hover::after {
    box-shadow:
        inset 0 0 0 2px rgba(var(--ff-primaer-rgb), .55),
        inset 0 -24px 36px -24px rgba(var(--ff-primaer-rgb), .8);
}

.ff-glut .ff-knopf:hover,
.ff-glut .ff-mitmach__knopf:hover,
.ff-glut .ff-kopf__cta:hover,
.ff-glut .ff-social:hover {
    animation: ff-glut-rand calc(1.4s / var(--ff-anim-kraft)) ease-out infinite;
}

/* ------------------------------------------------------------------ *
 * 7. Logo
 * ------------------------------------------------------------------ */

@keyframes ff-logopuls {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--ff-primaer-rgb), 0)); }
    50%      { transform: scale(1.035); filter: drop-shadow(0 0 10px rgba(var(--ff-primaer-rgb), .45)); }
}

.ff-logo .ff-kopf__logo img {
    animation: ff-logopuls calc(4.5s / var(--ff-anim-kraft)) ease-in-out infinite;
}

/* ------------------------------------------------------------------ *
 * 8. Notruf-Hinweis
 * ------------------------------------------------------------------ */

@keyframes ff-notruf {
    0%   { box-shadow: 0 0 0 0 rgba(var(--ff-primaer-rgb), .65); }
    70%  { box-shadow: 0 0 0 18px rgba(var(--ff-primaer-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ff-primaer-rgb), 0); }
}

.ff-notruf-puls .ff-footer__notruf-zahl,
.ff-notruf-puls .ff-notrufleiste__notruf {
    animation: ff-notruf calc(2.4s / var(--ff-anim-kraft)) ease-out infinite;
}

/* ------------------------------------------------------------------ *
 * 9. Ruhe bewahren
 *
 * Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, bekommt
 * keine Animationen zu sehen - unabhaengig von den Einstellungen.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ff-einblenden .ff-auf {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ff-funken .ff-footer__funken {
        display: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}