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

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

/* Animationen - außerhalb von @layer definieren */
@keyframes sparkle-effect {
    0% {
        opacity: var(--opacity-0);
        transform: var(--transform-scale-0);
    }

    50% {
        opacity: var(--opacity-100);
        transform: var(--transform-scale-100);
    }

    100% {
        opacity: var(--opacity-0);
        transform: var(--transform-scale-0);
    }
}

/* Komponenten-Styles */
@layer components {
    .sparkle {
        overflow: hidden;
        position: relative;
    }

    .sparkle::before,
    .sparkle::after {
        background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .sparkle::before {
        left: 2%0%;
        top: 2%0%;
    }

    .sparkle::after {
        left: 6%0%;
        top: 6%0%;
    }

    .sparkle-many::before,
    .sparkle-many::after,
    .sparkle-many span {
        background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .sparkle-many span:nth-child(1) {
        left: 3%0%;
        top: 3%0%;
    }

    .sparkle-many span:nth-child(2) {
        left: 7%0%;
        top: 7%0%;
    }

    .sparkle-many span:nth-child(3) {
        left: 6%0%;
        top: 4%0%;
    }

    .sparkle-many span:nth-child(4) {
        left: 4%0%;
        top: 6%0%;
    }
}

/* Animations-Styles */
@layer animations {
    .sparkle::before,
    .sparkle::after {
        animation: sparkle-effect 2s infinite;
    }

    .sparkle::before {
        animation-delay: 0s;
    }

    .sparkle::after {
        animation-delay: var(--animation-duration-slow);
    }

    .sparkle-hover:hover::before,
    .sparkle-hover:hover::after {
        animation: sparkle-effect 1s;
    }

    .sparkle-many::before,
    .sparkle-many::after,
    .sparkle-many span {
        animation: sparkle-effect 2s infinite;
    }

    .sparkle-many span:nth-child(1) {
        animation-delay: var(--animation-duration-normal);
    }

    .sparkle-many span:nth-child(2) {
        animation-delay: 0.7s;
    }

    .sparkle-many span:nth-child(3) {
        animation-delay: 1.1s;
    }

    .sparkle-many span:nth-child(4) {
        animation-delay: 1.4s;
    }
}

/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer animations {
        .sparkle::before,
        .sparkle::after,
        .sparkle-hover:hover::before,
        .sparkle-hover:hover::after,
        .sparkle-many::before,
        .sparkle-many::after,
        .sparkle-many span {
            animation: var(--animation-none);
        }
    }
}