/* ==========================================================================
   Kajinga Background-FX — Hintergrund-Effekte für Container/Section (v0.41.0)
   --------------------------------------------------------------------------
   Vier unabhängige Feature-Blöcke, alle reines CSS (kein JS):
     1. Full-Bleed             — Container über volle Viewport-Breite
     2. Animated Gradient      — wandernder mehrfarbiger Verlauf
     3. Ken Burns              — Zoom/Schwenk auf BG-Bild (::after-Layer)
     4. Background Transition  — Hover-Crossfade zu zweitem Bild (::after-Layer)
   Aktivierung jeweils via `.ke-bgfx-*`-Modifier-Klasse (Elementor prefix_class).
   Pseudo-Belegung: „Kajinga Styles" nutzt ::before, dieser Helper ::after.
   ========================================================================== */

/* ==========================================================================
   BgFX-1: BACKGROUND EXPAND (FULL-BLEED)
   --------------------------------------------------------------------------
   `50%` = halbe Container-Breite, `50vw` = halbe Viewport-Breite → die
   Differenz als Negativ-Margin zieht den Container an den Viewport-Rand.
   ========================================================================== */

.ke-bgfx-fullbleed-yes {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   BgFX-2: ANIMATED GRADIENT BACKGROUND
   --------------------------------------------------------------------------
   Großer background-size (300 %) + wanderndes background-position erzeugt die
   „lebende" Bewegung. Erste = letzte Farbe je Palette → nahtloser Loop.
   ========================================================================== */

.ke-bgfx-grad-yes {
    --ke-bgfx-grad-angle: 135deg;
    --ke-bgfx-grad-duration: 12s;
    background-size: 300% 300%;
    animation: ke-bgfx-grad-shift var(--ke-bgfx-grad-duration) ease infinite;
}

.ke-bgfx-grad-yes.ke-bgfx-grad-preset-sunset {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #ff6b6b, #feca57, #ff9ff3, #ff6b6b);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-ocean {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #2e86de, #48dbfb, #0abde3, #2e86de);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-aurora {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #1dd1a1, #5f27cd, #00d2d3, #1dd1a1);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-forest {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #10ac84, #1dd1a1, #6ab04c, #10ac84);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-cosmic {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #5f27cd, #341f97, #2e86de, #5f27cd);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-sakura {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #ff9ff3, #fceef5, #f8a5c2, #ff9ff3);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-mint {
    background-image: linear-gradient(var(--ke-bgfx-grad-angle), #1dd1a1, #c8f7e8, #48dbfb, #1dd1a1);
}
.ke-bgfx-grad-yes.ke-bgfx-grad-preset-custom {
    background-image: linear-gradient(
        var(--ke-bgfx-grad-angle),
        var(--ke-bgfx-grad-c1, #ff6b6b),
        var(--ke-bgfx-grad-c2, #feca57),
        var(--ke-bgfx-grad-c3, #ff9ff3),
        var(--ke-bgfx-grad-c4, #48dbfb),
        var(--ke-bgfx-grad-c1, #ff6b6b)
    );
}

@keyframes ke-bgfx-grad-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   BgFX-3: KEN BURNS EFFECT
   --------------------------------------------------------------------------
   BG-Bild liegt auf einem `::after`-Layer (background-image ist nicht
   transformierbar). `infinite alternate` → sanfter Rein/Raus-Loop ohne
   harten Reset-Ruck. Inhalt liegt per z-index darüber.
   ========================================================================== */

.ke-bgfx-kb-yes {
    --ke-bgfx-kb-duration: 20s;
    --ke-bgfx-kb-scale: 1.2;
    position: relative;
    overflow: hidden;
}

.ke-bgfx-kb-yes::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--ke-bgfx-kb-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation-duration: var(--ke-bgfx-kb-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    will-change: transform;
    pointer-events: none;
}

/* Container-Inhalt über das BG-Layer heben */
.ke-bgfx-kb-yes > * {
    position: relative;
    z-index: 1;
}

.ke-bgfx-kb-dir-zoom-in::after     { animation-name: ke-bgfx-kb-zoom-in; }
.ke-bgfx-kb-dir-zoom-out::after    { animation-name: ke-bgfx-kb-zoom-out; }
.ke-bgfx-kb-dir-pan-left::after    { animation-name: ke-bgfx-kb-pan-left; }
.ke-bgfx-kb-dir-pan-right::after   { animation-name: ke-bgfx-kb-pan-right; }
.ke-bgfx-kb-dir-pan-up::after      { animation-name: ke-bgfx-kb-pan-up; }
.ke-bgfx-kb-dir-pan-down::after    { animation-name: ke-bgfx-kb-pan-down; }
.ke-bgfx-kb-dir-zoom-pan-tl::after { animation-name: ke-bgfx-kb-zoom-pan-tl; }
.ke-bgfx-kb-dir-zoom-pan-br::after { animation-name: ke-bgfx-kb-zoom-pan-br; }

@keyframes ke-bgfx-kb-zoom-in {
    from { transform: scale(1); }
    to   { transform: scale(var(--ke-bgfx-kb-scale)); }
}
@keyframes ke-bgfx-kb-zoom-out {
    from { transform: scale(var(--ke-bgfx-kb-scale)); }
    to   { transform: scale(1); }
}
/* Pan-Richtungen: Grund-Scale 1.15, damit beim Schwenk keine Bildkante sichtbar wird. */
@keyframes ke-bgfx-kb-pan-left {
    from { transform: scale(1.15) translateX(3%); }
    to   { transform: scale(1.15) translateX(-3%); }
}
@keyframes ke-bgfx-kb-pan-right {
    from { transform: scale(1.15) translateX(-3%); }
    to   { transform: scale(1.15) translateX(3%); }
}
@keyframes ke-bgfx-kb-pan-up {
    from { transform: scale(1.15) translateY(3%); }
    to   { transform: scale(1.15) translateY(-3%); }
}
@keyframes ke-bgfx-kb-pan-down {
    from { transform: scale(1.15) translateY(-3%); }
    to   { transform: scale(1.15) translateY(3%); }
}
@keyframes ke-bgfx-kb-zoom-pan-tl {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(var(--ke-bgfx-kb-scale)) translate(-3%, -3%); }
}
@keyframes ke-bgfx-kb-zoom-pan-br {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(var(--ke-bgfx-kb-scale)) translate(3%, 3%); }
}

/* ==========================================================================
   BgFX-4: BACKGROUND TRANSITION (HOVER)
   --------------------------------------------------------------------------
   Hover-Bild liegt auf `::after` mit opacity 0, blendet bei Hover ein.
   CSS kann background-image nicht transitionen — daher das Overlay.
   ========================================================================== */

.ke-bgfx-bgtrans-yes {
    --ke-bgfx-bgtrans-duration: 600ms;
    position: relative;
}

.ke-bgfx-bgtrans-yes::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--ke-bgfx-bgtrans-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--ke-bgfx-bgtrans-duration) ease;
    pointer-events: none;
}

.ke-bgfx-bgtrans-yes:hover::after {
    opacity: 1;
}

.ke-bgfx-bgtrans-yes > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Reduced-Motion-Gate — laufende Animationen + Hover-Crossfade abschalten
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ke-bgfx-grad-yes { animation: none !important; }
    .ke-bgfx-kb-yes::after { animation: none !important; }
    .ke-bgfx-bgtrans-yes::after { transition: none !important; }
}