/* ==========================================================================
   Kajinga FX — Container/Section Style + Interaktivität (v0.40.0)
   --------------------------------------------------------------------------
   Drei voneinander unabhängige Feature-Blöcke:
     1. Floating Effects   — Keyframe-Animation am Container
     2. Advanced Border Radius — 8-Punkt-Radius via CSS-Variablen
     3. Wrapper Link       — visuelles Feedback (Pointer + Hover-Lift)
   Aktivierung jeweils via `.ke-fx-*-{value}`-Modifier-Klasse, gesetzt durch
   Elementor `prefix_class`. JS-Logik nur für Wrapper-Link (Click-Handler +
   Keyboard) in container-fx.js.
   ========================================================================== */

/* ==========================================================================
   FX-1: FLOATING EFFECTS (Keyframe-Animationen)
   --------------------------------------------------------------------------
   Defaults für die CSS-Vars sind direkt in den `@keyframes` durch Fallback-
   Werte abgedeckt — User-Slider überschreiben über `var()`.
   ========================================================================== */

[class*="ke-fx-float-"]:not(.ke-fx-float-) {
    --ke-fx-float-duration: 3000ms;
    --ke-fx-float-delay: 0ms;
    --ke-fx-float-intensity: 1;
    animation-duration: var(--ke-fx-float-duration);
    animation-delay: var(--ke-fx-float-delay);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
}

.ke-fx-float-float    { animation-name: ke-fx-float; }
.ke-fx-float-bobbing  { animation-name: ke-fx-bobbing; }
.ke-fx-float-pulse-soft { animation-name: ke-fx-pulse-soft; }
.ke-fx-float-rotate-slow {
    animation-name: ke-fx-rotate-slow;
    animation-timing-function: linear;
}
.ke-fx-float-breathing { animation-name: ke-fx-breathing; }
.ke-fx-float-wave-tilt { animation-name: ke-fx-wave-tilt; }

@keyframes ke-fx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-8px * var(--ke-fx-float-intensity, 1))); }
}

@keyframes ke-fx-bobbing {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-18px * var(--ke-fx-float-intensity, 1))); }
}

@keyframes ke-fx-pulse-soft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(calc(1 + 0.03 * var(--ke-fx-float-intensity, 1))); }
}

@keyframes ke-fx-rotate-slow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ke-fx-breathing {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(calc(1 + 0.04 * var(--ke-fx-float-intensity, 1)));
        opacity: calc(1 - 0.15 * var(--ke-fx-float-intensity, 1));
    }
}

@keyframes ke-fx-wave-tilt {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(calc(-2deg * var(--ke-fx-float-intensity, 1))); }
    75%      { transform: rotate(calc(2deg * var(--ke-fx-float-intensity, 1))); }
}

/* Reduced-Motion-Gate (Barrierefreiheit + Akku-Schonung) */
@media (prefers-reduced-motion: reduce) {
    [class*="ke-fx-float-"]:not(.ke-fx-float-) {
        animation: none !important;
    }
}

/* ==========================================================================
   FX-2: ADVANCED BORDER RADIUS (8 PKT)
   --------------------------------------------------------------------------
   `border-radius: tl-x tr-x br-x bl-x / tl-y tr-y br-y bl-y;` (CSS-Shorthand).
   Default-Fallback 0 für jeden Wert, damit nicht-gesetzte Achsen sauber 0
   rendern statt `var()`-Fehler zu werfen.
   ========================================================================== */

.ke-fx-br-yes {
    --ke-fx-br-tl-x: 0;
    --ke-fx-br-tr-x: 0;
    --ke-fx-br-br-x: 0;
    --ke-fx-br-bl-x: 0;
    --ke-fx-br-tl-y: 0;
    --ke-fx-br-tr-y: 0;
    --ke-fx-br-br-y: 0;
    --ke-fx-br-bl-y: 0;
    border-radius:
        var(--ke-fx-br-tl-x) var(--ke-fx-br-tr-x) var(--ke-fx-br-br-x) var(--ke-fx-br-bl-x) /
        var(--ke-fx-br-tl-y) var(--ke-fx-br-tr-y) var(--ke-fx-br-br-y) var(--ke-fx-br-bl-y);
    overflow: hidden;
}

/* ==========================================================================
   FX-3: WRAPPER LINK
   --------------------------------------------------------------------------
   Visuelles Feedback dass der ganze Container klickbar ist. JS bindet den
   Click-Handler + Keyboard-Aktivierung in container-fx.js.
   ========================================================================== */

.ke-fx-wlink-yes[data-ke-wlink] {
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.ke-fx-wlink-yes[data-ke-wlink]:hover {
    transform: translateY(-2px);
}

.ke-fx-wlink-yes[data-ke-wlink]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Im Editor klick-tot, sonst kann man den Container nicht mehr auswählen */
.elementor-editor-active .ke-fx-wlink-yes[data-ke-wlink] {
    cursor: default;
}
.elementor-editor-active .ke-fx-wlink-yes[data-ke-wlink]:hover {
    transform: none;
}