/* =============================================================================
   Kajinga Glas — v0.37.0
   Wiederverwendbare Glassmorphism-+-Refraktions-Schicht für Container, Pop-Ups
   und Buttons. Apple-iOS-26-„Liquid Glass"-Look auf Web-Standard-Mitteln.

   Architektur:
   - Eine Basis-Klasse `.ke-glass` setzt backdrop-filter + Tint-Background +
     Border + Highlight + Shadow.
   - Variablen-API erlaubt Override pro Instanz (Subsystem schreibt entweder
     via Elementor `selectors` oder per Inline-Style).
   - 6 Preset-Modifier (`.ke-glass-preset-{name}`) liefern fertige Looks.
   - Drei SVG-Linsen-Filter (id="ke-glass-lens-1/2/3") werden global im Footer
     ausgegeben (LiquidGlassHelper::render_svg_filter). Refraktion läuft als
     `backdrop-filter: url(#…)` (verzerrt den Hintergrund über die ganze
     Fläche), aktiviert pro Element via `.ke-glass-refractive` + Stärke-Klasse
     `.ke-glass-refraction-{subtle|medium|strong}`.

   Performance-Gates:
   - Ohne `ke-glass-refractive` → kein SVG-Filter (teuerste Operation).
   - `prefers-reduced-motion` schaltet Refraktion + Aurora-Shift ab.
   - `@supports not (backdrop-filter)` → solider Tint-Fallback (Firefox-Pre-103,
     alte Browser, oder wenn der User den Filter im about:config aus hat).
   ============================================================================= */

/* Basis-Regel — wirkt auf zwei Wege:
   - `.ke-glass` direkt (Pop-Up-Modal, Super-Button setzen die Class explizit)
   - `.ke-glass-enabled-yes` (Container/Section setzen sie via Elementor
     `prefix_class`-Mechanik aus dem SWITCHER-Control). */
.ke-glass,
.ke-glass-enabled-yes {
    --ke-glass-tint: rgba(255, 255, 255, 0.18);
    --ke-glass-blur: 20px;
    --ke-glass-saturate: 180%;
    --ke-glass-border-color: rgba(255, 255, 255, 0.35);
    --ke-glass-border-width: 1px;
    --ke-glass-highlight: rgba(255, 255, 255, 0.45);
    --ke-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --ke-glass-radius: 16px;

    background: var(--ke-glass-tint);
    -webkit-backdrop-filter: blur(var(--ke-glass-blur)) saturate(var(--ke-glass-saturate)) var(--ke-glass-refraction, );
    backdrop-filter: blur(var(--ke-glass-blur)) saturate(var(--ke-glass-saturate)) var(--ke-glass-refraction, );
    border: var(--ke-glass-border-width) solid var(--ke-glass-border-color);
    border-radius: var(--ke-glass-radius);
    box-shadow:
        var(--ke-glass-shadow),
        inset 0 1px 0 var(--ke-glass-highlight);
}

/* Refraktions-Modus — opt-in, performance-kritisch, Chromium-only.
   Setzt nur die --ke-glass-refraction-Variable; die `backdrop-filter`-Property
   wird in der Basis-Regel (und von den Blur/Sättigung-Slidern) komponiert.
   Default-Stärke: Mittel. Die Stärke-Klassen darunter überschreiben sie
   (gleiche Spezifität, spätere Quell-Reihenfolge gewinnt). */
.ke-glass.ke-glass-refractive,
.ke-glass-refractive-yes {
    --ke-glass-refraction: url(#ke-glass-lens-2);
}
.ke-glass-refraction-subtle { --ke-glass-refraction: url(#ke-glass-lens-1); }
.ke-glass-refraction-medium { --ke-glass-refraction: url(#ke-glass-lens-2); }
.ke-glass-refraction-strong { --ke-glass-refraction: url(#ke-glass-lens-3); }

/* ====== Presets (6) ====== */

/* Frosted — Standard-Look, weiß-transparent, mittlerer Blur */
.ke-glass-preset-frosted {
    --ke-glass-tint: rgba(255, 255, 255, 0.18);
    --ke-glass-blur: 20px;
    --ke-glass-border-color: rgba(255, 255, 255, 0.35);
    --ke-glass-highlight: rgba(255, 255, 255, 0.45);
}

/* Clear — minimal, fast unsichtbares Glas, geringer Blur */
.ke-glass-preset-clear {
    --ke-glass-tint: rgba(255, 255, 255, 0.06);
    --ke-glass-blur: 5px;
    --ke-glass-border-color: rgba(255, 255, 255, 0.18);
    --ke-glass-highlight: rgba(255, 255, 255, 0.25);
}

/* Dark — schwarzer Tint mit weißem Highlight für Dark-Mode-Look */
.ke-glass-preset-dark {
    --ke-glass-tint: rgba(20, 22, 28, 0.55);
    --ke-glass-blur: 24px;
    --ke-glass-border-color: rgba(255, 255, 255, 0.12);
    --ke-glass-highlight: rgba(255, 255, 255, 0.22);
    --ke-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* Tinted — User-definierte Tint-Farbe, Default Indigo */
.ke-glass-preset-tinted {
    --ke-glass-tint: rgba(99, 102, 241, 0.22);
    --ke-glass-blur: 18px;
    --ke-glass-border-color: rgba(255, 255, 255, 0.30);
    --ke-glass-highlight: rgba(255, 255, 255, 0.40);
}

/* Refractive — aktiviert die Linsen-Refraktion (Apple-iOS-26-Style) */
.ke-glass-preset-refractive {
    --ke-glass-tint: rgba(255, 255, 255, 0.14);
    --ke-glass-blur: 16px;
    --ke-glass-saturate: 200%;
    --ke-glass-border-color: rgba(255, 255, 255, 0.40);
    --ke-glass-highlight: rgba(255, 255, 255, 0.55);
    --ke-glass-refraction: url(#ke-glass-lens-2);
}

/* Aurora — animierter Tint-Color-Shift (langsam, dezent) */
.ke-glass-preset-aurora {
    --ke-glass-tint: rgba(99, 102, 241, 0.18);
    --ke-glass-blur: 22px;
    --ke-glass-border-color: rgba(255, 255, 255, 0.35);
    --ke-glass-highlight: rgba(255, 255, 255, 0.45);
    background-image: linear-gradient(
        125deg,
        var(--ke-glass-tint),
        rgba(236, 72, 153, 0.18) 40%,
        rgba(6, 182, 212, 0.18) 75%,
        var(--ke-glass-tint)
    );
    background-size: 250% 250%;
    background-position: 0% 50%;
    animation: ke-glass-aurora-shift 14s ease-in-out infinite;
}

@keyframes ke-glass-aurora-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ====== Browser-Fallback ====== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ke-glass,
    .ke-glass-enabled-yes {
        background: color-mix(in srgb, var(--ke-glass-tint), white 35%);
    }
}

/* ====== Subsystem-spezifische Overrides ======
   Super-Button hat einen Dual-Layer-Background-Stack
   (.ke-super-button__bg--normal/hover + .ke-super-button__overlay--*).
   Bei aktivem Glas würden diese opaken Spans den Effekt komplett überdecken.
   Lösung: alle Background- und Overlay-Spans bei `.ke-super-button.ke-glass`
   ausblenden — der Glas-Background liegt dann direkt am `<a>`-Element. */
.ke-super-button.ke-glass .ke-super-button__bg,
.ke-super-button.ke-glass .ke-super-button__overlay {
    display: none;
}

/* ====== Reduced Motion ====== */

@media (prefers-reduced-motion: reduce) {
    .ke-glass.ke-glass-refractive,
    .ke-glass-refractive-yes,
    .ke-glass-preset-refractive {
        --ke-glass-refraction: initial;
    }
    .ke-glass-preset-aurora {
        animation: none;
    }
}