/* =============================================================================
   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.
   - SVG-Distortion-Filter (id="ke-glass-distortion") wird global im Footer
     ausgegeben (LiquidGlassHelper::render_svg_filter), Aktivierung pro
     Element via Modifier `.ke-glass-refractive`.

   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));
    backdrop-filter: blur(var(--ke-glass-blur)) saturate(var(--ke-glass-saturate));
    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 */
.ke-glass.ke-glass-refractive,
.ke-glass-refractive-yes {
    filter: url(#ke-glass-distortion);
}

/* ====== 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: 8px;
    --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 SVG-Distortion (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);
    filter: url(#ke-glass-distortion);
}

/* 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 {
        filter: none;
    }
    .ke-glass-preset-aurora {
        animation: none;
    }
}