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

@keyframes glow-pulse {
    0% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }

    50% { box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary)); }

    100% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }
}

@layer components {
    .glow {
        box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
        transition: box-shadow var(--transition-normal);
    }

    .glow-hover:hover {
        box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary));
    }

    .glow-pulse {
        animation: glow-pulse 2s infinite;
    }

    .glow-text {
        text-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
    }

    .glow-border {
        border: var(--border-width) solid var(--glow-color, var(--color-primary));
        box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
    }

    .glow-strong {
        box-shadow: 
            0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary)),
            0 0 var(--spacing-5) var(--glow-color, var(--color-primary)),
            0 0 30px var(--glow-color, var(--color-primary));
    }

    .glow-soft {
        box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--glow-color, var(--color-primary));
        filter: blur(var(--spacing-1));
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .glow-pulse {
            animation: var(--animation-none);
        }
        
        .glow,
        .glow-hover,
        .glow-text,
        .glow-border,
        .glow-strong,
        .glow-soft {
            transition: var(--transition-none);
        }
    }
}