@casoon/dragonfly/effects/layout-effects/backdrops.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Backdrop-Effekte
 * 
 * Diese Datei enthält verschiedene Backdrop-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer utilities {
    .backdrop-blur-sm {
        backdrop-filter: blur(var(--spacing-1));
    }

    .backdrop-blur-md {
        backdrop-filter: blur(var(--spacing-2));
    }

    .backdrop-blur-lg {
        backdrop-filter: blur(var(--spacing-1)(--border-width-thick));
    }

    .backdrop-brightness {
        backdrop-filter: brightness(var(--backdrop-brightness, 0.8));
    }

    .backdrop-contrast {
        backdrop-filter: contrast(var(--backdrop-contrast, 1.2));
    }

    .backdrop-grayscale {
        backdrop-filter: grayscale(var(--backdrop-grayscale, 0.5));
    }

    .backdrop-hue-rotate {
        backdrop-filter: hue-rotate(var(--backdrop-hue-rotate, 90deg));
    }

    .backdrop-invert {
        backdrop-filter: invert(var(--backdrop-invert, 0.5));
    }

    .backdrop-opacity {
        backdrop-filter: opacity(var(--backdrop-opacity, 0.5));
    }

    .backdrop-saturate {
        backdrop-filter: saturate(var(--backdrop-saturate, 1.5));
    }

    .backdrop-sepia {
        backdrop-filter: sepia(var(--backdrop-sepia, 0.5));
    }

    .backdrop-multiple {
        backdrop-filter: 
            blur(var(--spacing-2))
            brightness(0.8)
            contrast(1.2)
            saturate(1.5);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .backdrop-blur-sm,
        .backdrop-blur-md,
        .backdrop-blur-lg,
        .backdrop-brightness,
        .backdrop-contrast,
        .backdrop-grayscale,
        .backdrop-hue-rotate,
        .backdrop-invert,
        .backdrop-opacity,
        .backdrop-saturate,
        .backdrop-sepia,
        .backdrop-multiple {
            transition: var(--transition-none);
        }
    }
}