@casoon/dragonfly/effects/particles/big-circles.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.

/**
 * Big Circles Partikel-Effekt
 * 
 * Große, langsam bewegende Kreise für einen ruhigen Hintergrund.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes big-circles-float {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 0%);
    }

    50% {
        opacity: var(--opacity-70);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translate(var(--spacing-1)(--spacing-5), calc(-1 * var(--spacing-1))(--spacing-5));
    }
}

@layer components {
    .big-circles {
        overflow: hidden;
        position: relative;
    }

    .big-circles::before,
    .big-circles::after {
        animation: big-circles-float 8s infinite;
        background: var(--big-circles-color, rgb(255 255 255 / 30%));
        border-radius: 5px;
        content: '';
        height: var(--spacing-15);
        position: absolute;
        width: var(--spacing-15);
    }

    .big-circles::after {
        animation-delay: var(--animation-duration-ultra-slow);
        left: 4%0%;
    }

    .big-circles::before {
        left: 1%0%;
        top: 2%0%;
    }

    .big-circles-sm::before,
    .big-circles-sm::after {
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    .big-circles-lg::before,
    .big-circles-lg::after {
        height: var(--spacing-25);
        width: var(--spacing-25);
    }

    .big-circles-slow::before,
    .big-circles-slow::after {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .big-circles-fast::before,
    .big-circles-fast::after {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .big-circles-color-primary::before,
    .big-circles-color-primary::after {
        background: var(--big-circles-primary, rgb(59 130 246 / 30%));
    }

    .big-circles-color-secondary::before,
    .big-circles-color-secondary::after {
        background: var(--big-circles-secondary, rgb(107 114 128 / 30%));
    }

    .big-circles-color-success::before,
    .big-circles-color-success::after {
        background: var(--big-circles-success, rgb(16 185 129 / 30%));
    }

    .big-circles-color-error::before,
    .big-circles-color-error::after {
        background: var(--big-circles-error, rgb(239 68 68 / 30%));
    }

    .big-circles-color-warning::before,
    .big-circles-color-warning::after {
        background: var(--big-circles-warning, rgb(245 158 11 / 30%));
    }

    .big-circles-color-info::before,
    .big-circles-color-info::after {
        background: var(--big-circles-info, rgb(6 182 212 / 30%));
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .big-circles::before,
        .big-circles::after {
            animation: var(--animation-none);
            opacity: var(--opacity-0);
        }
    }
}