/* ==========================================================================
   Kajinga Parallax / Scroll-Effekte (v0.56.0)
   --------------------------------------------------------------------------
   Drei unabhängige Subsysteme, gesteuert per CSS-Variablen die JS pro Tick
   in der rAF-Loop schreibt:

     --ke-px-progress     0..1 — vom Scroll-Tracker gesetzt, einzige Property
                          die JS pro rAF-Tick anfasst. Alle Effekte
                          komponieren auf dieser Variable.

   Effekt-Subsysteme:
     .ke-px-bg-yes          → A: BG-Parallax (::after-Layer)
     .ke-px-fx-yes          → B: composed transform/opacity/filter
     .ke-px-fill-yes        → C: scroll-getriebene Width/Height
   ========================================================================== */

/* ==========================================================================
   A — Kajinga BG-Parallax
   ::after-Layer mit Hintergrundbild. translate verschiebt das Bild über
   `--ke-px-bg-speed` × Scroll-Strecke. Konfliktfrei zu Ken Burns nicht
   möglich (beide ::after) — Editor-Condition trennt sie sauber.
   ========================================================================== */

.ke-px-bg-yes {
    --ke-px-bg-speed: 0.4;
    --ke-px-progress: 0;
    position: relative;
    overflow: hidden;
}

.ke-px-bg-yes::after {
    content: "";
    position: absolute;
    inset: -10% 0;
    /* 10% Überstand oben/unten verhindert, dass der translate-Effekt
       am Rand „leere" Pixel zeigt wenn das Bild verschoben wird. */
    background-image: var(--ke-px-bg-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Vertikale Achse (Default) — translate in Y. progress mappt -0.5..+0.5 mal
   eine Standard-Strecke (200px) × speed. */
.ke-px-bg-yes.ke-px-bg-dir-vertical::after {
    transform: translate3d(
        0,
        calc((var(--ke-px-progress, 0) - 0.5) * 200px * var(--ke-px-bg-speed)),
        0
    );
}

.ke-px-bg-yes.ke-px-bg-dir-horizontal::after {
    transform: translate3d(
        calc((var(--ke-px-progress, 0) - 0.5) * 200px * var(--ke-px-bg-speed)),
        0,
        0
    );
}

.ke-px-bg-yes > * { position: relative; z-index: 1; }

/* Mobile-Toggle: standardmäßig BG-Parallax auf Mobile aus, weil
   scroll-getriebene transforms auf iOS Safari ruckeln (Address-Bar-Reflow).
   Nur wenn `ke-px-bg-mobile-yes` an, lassen wir die Engine auch mobil laufen. */
@media (max-width: 767px) {
    .ke-px-bg-yes:not(.ke-px-bg-mobile-yes)::after {
        transform: none;
    }
}

/* ==========================================================================
   B — Kajinga Scroll-Effekte
   composed transform/opacity/filter. Eine CSS-Variable ändert sich
   (--ke-px-progress); CSS-calc berechnet daraus alle Trafos.
   ========================================================================== */

.ke-px-fx-yes {
    /* Defaults für alle möglichen Effekt-Vars (kein Effekt wenn nicht gesetzt). */
    --ke-px-tx-max: 0px;
    --ke-px-ty-max: 0px;
    --ke-px-rot-max: 0deg;
    --ke-px-scale-delta: 0;
    --ke-px-op-from: 1;
    --ke-px-op-to: 1;
    --ke-px-blur-max: 0px;
    --ke-px-progress: 0;
    will-change: transform, opacity, filter;
}

.ke-px-fx-yes {
    transform:
        translate3d(
            calc(var(--ke-px-tx-max) * var(--ke-px-progress)),
            calc(var(--ke-px-ty-max) * var(--ke-px-progress)),
            0
        )
        rotate(calc(var(--ke-px-rot-max) * var(--ke-px-progress)))
        scale(calc(1 + (var(--ke-px-scale-delta) * var(--ke-px-progress))));
    opacity: calc(var(--ke-px-op-from) + ((var(--ke-px-op-to) - var(--ke-px-op-from)) * var(--ke-px-progress)));
    filter: blur(calc(var(--ke-px-blur-max) * var(--ke-px-progress)));
}

/* ==========================================================================
   C — Kajinga Scroll-Fill
   Width oder Height wächst von --from% bis --to% mit dem Progress.
   ========================================================================== */

.ke-px-fill-yes {
    --ke-px-fill-from: 0;
    --ke-px-fill-to: 100;
    --ke-px-progress: 0;
    will-change: width, height;
}

.ke-px-fill-yes.ke-px-fill-mode-width {
    width: calc(
        (var(--ke-px-fill-from) + ((var(--ke-px-fill-to) - var(--ke-px-fill-from)) * var(--ke-px-progress)))
        * 1%
    );
}

.ke-px-fill-yes.ke-px-fill-mode-height {
    height: calc(
        (var(--ke-px-fill-from) + ((var(--ke-px-fill-to) - var(--ke-px-fill-from)) * var(--ke-px-progress)))
        * 1%
    );
}

/* ==========================================================================
   prefers-reduced-motion: kompletter Effekt-Skip — Element rendert neutral.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ke-px-bg-yes::after,
    .ke-px-fx-yes,
    .ke-px-fill-yes {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
    .ke-px-fill-yes.ke-px-fill-mode-width,
    .ke-px-fill-yes.ke-px-fill-mode-height {
        /* fallback: End-Wert direkt anwenden */
        width: auto !important;
        height: auto !important;
    }
}