/**
 * ARO Glass Surface – Styles
 * Portierung von ReactBits GlassSurface.css
 *
 * Basis-Klasse: .aro-glass-surface
 * Varianten:
 *   .aro-glass-surface--svg      → Chrome/Edge: echter SVG-Filter-Effekt
 *   .aro-glass-surface--fallback → Safari/Firefox: klassisches backdrop-filter
 */

/* ---------------------------------------------------------------------------
   Basis-Container
   --------------------------------------------------------------------------- */
.aro-glass-surface {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.26s ease-out;
}

/* ---------------------------------------------------------------------------
   Versteckter SVG-Filter (wird vom JS injiziert)
   --------------------------------------------------------------------------- */
.aro-glass-surface__filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
}

/* ---------------------------------------------------------------------------
   Content-Wrapper (z-Index über dem Filter)
   --------------------------------------------------------------------------- */
.aro-glass-surface__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: inherit;
    position: relative;
    z-index: 1;
}

/* Wenn kein expliziter __content-Wrapper vorhanden ist, hebt direkter Kinder-Inhalt
   trotzdem über den Filter */
.aro-glass-surface > *:not(.aro-glass-surface__filter) {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   SVG-Variante (Chrome / Edge) – echter Displacement-Map-Effekt
   --------------------------------------------------------------------------- */
.aro-glass-surface--svg {
    background: light-dark(
        hsl(0 0% 100% / var(--glass-frost, 0)),
        hsl(0 0% 0%   / var(--glass-frost, 0))
    );
    backdrop-filter: var(--filter-id, url(#aro-glass-filter)) saturate(var(--glass-saturation, 1));
    box-shadow:
        /* Subtile Innen-Kante */
        0 0 2px 1px light-dark(
            color-mix(in oklch, black, transparent 85%),
            color-mix(in oklch, white, transparent 65%)
        ) inset,
        0 0 10px 4px light-dark(
            color-mix(in oklch, black, transparent 90%),
            color-mix(in oklch, white, transparent 85%)
        ) inset,
        /* Äußere Tiefe */
        0px  4px 16px rgba(17, 17, 26, 0.05),
        0px  8px 24px rgba(17, 17, 26, 0.05),
        0px 16px 56px rgba(17, 17, 26, 0.05),
        /* Innere Tiefe */
        0px  4px 16px rgba(17, 17, 26, 0.05) inset,
        0px  8px 24px rgba(17, 17, 26, 0.05) inset,
        0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

/* ---------------------------------------------------------------------------
   Fallback-Variante (Safari / Firefox / keine SVG-Filter-Unterstützung)
   --------------------------------------------------------------------------- */
.aro-glass-surface--fallback {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.2),
        0 2px 16px 0 rgba(31, 38, 135, 0.1),
        inset 0  1px 0 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
    .aro-glass-surface--fallback {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
        -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
            inset 0  1px 0 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
    }
}

/* Wenn backdrop-filter gar nicht unterstützt wird */
@supports not (backdrop-filter: blur(10px)) {
    .aro-glass-surface--fallback {
        background: rgba(255, 255, 255, 0.4);
        box-shadow:
            inset 0  1px 0 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
    }

    .aro-glass-surface--fallback::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.15);
        border-radius: inherit;
        z-index: -1;
    }

    @media (prefers-color-scheme: dark) {
        .aro-glass-surface--fallback {
            background: rgba(0, 0, 0, 0.4);
        }

        .aro-glass-surface--fallback::before {
            background: rgba(255, 255, 255, 0.05);
        }
    }
}

/* Focus-Ring */
.aro-glass-surface:focus-visible {
    outline: 2px solid light-dark(#007aff, #0a84ff);
    outline-offset: 2px;
}