@casoon/dragonfly/effects/visual/light.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.

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

@keyframes light-move {
    0% { transform: translate(-25%, -25%); }

    50% { transform: translate(25%, 25%); }

    100% { transform: translate(-25%, -25%); }
}

@layer components {
    .light-spot {
        overflow: hidden;
        position: relative;
    }

    .light-spot::before {
        background: radial-gradient(
            circle at center,
            var(--light-color, rgb(255 255 255 / 0.8)) 0,
            transparent 50
        );
        content: '';
        height: 200%;
        pointer-events: none;
        position: absolute;
        transform: translate(-25%, -25%);
        width: 200%;
    }

    .light-beam {
        overflow: hidden;
        position: relative;
    }

    .light-beam::before {
        background: linear-gradient(
            45deg,
            transparent,
            var(--light-color, rgb(255 255 255 / 30%)),
            transparent
        );
        content: '';
        height: 200%;
        pointer-events: none;
        position: absolute;
        transform: translate(-25%, -25%);
        width: 200%;
    }

    .light-ambient {
        overflow: hidden;
        position: relative;
    }

    .light-ambient::before {
        background: radial-gradient(
            circle at var(--light-x, 50) var(--light-y, 50),
            var(--light-color, rgb(255 255 255 / 20%)) 0,
            transparent 70
        );
        content: '';
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

    .light-hover:hover::before {
        animation: light-move 2s infinite;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .light-hover:hover::before {
            animation: var(--animation-none);
        }
    }
}