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

/**
 * Fire Partikel-Effekt
 * 
 * Flammenähnliche Partikelbewegungen – erzeugt einen feurigen Effekt.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes fire-flame {
    0% {
        opacity: var(--opacity-0);
        transform: translateX(0%) scale(1);
    }

    25% {
        opacity: var(--opacity-100);
        transform: translateY(-40px) scale(1.2);
    }

    50% {
        transform: translateY(-80px) scale(1.1) rotate(5deg);
    }

    75% {
        transform: translateY(calc(-1 * var(--spacing-15))) scale(0.9) rotate(-5deg);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateY(-160px) scale(0.5) rotate(0deg);
    }
}

@keyframes fire-flame-alt {
    0% {
        opacity: var(--opacity-0);
        transform: translateX(0%) scale(1);
    }

    25% {
        opacity: var(--opacity-100);
        transform: translateY(-30px) scale(1.1) rotate(-5deg);
    }

    50% {
        transform: translateY(-60px) scale(1.0) rotate(5deg);
    }

    75% {
        transform: translateY(-90px) scale(0.8) rotate(-2deg);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateY(calc(-1 * var(--spacing-15))) scale(0.5) rotate(0deg);
    }
}

@layer components {
    .fire {
        overflow: hidden;
        position: relative;
    }

    .fire::before,
    .fire::after {
        animation: fire-flame 3s var(--easing-decelerate) infinite;
        background: var(--fire-color, rgb(255 160 0 / 70%));
        border-radius: 5px 50px 20px 20px;
        bottom: calc(-1 * var(--spacing-1));
        content: '';
        filter: blur(var(--spacing-1));
        height: var(--spacing-7-5);
        position: absolute;
        width: var(--spacing-5);
    }

    .fire::before {
        left: calc(50% - var(--spacing-1));
    }

    .fire::after {
        animation-delay: var(--animation-duration-medium);
        animation-name: fire-flame-alt;
        background: var(--fire-color-alt, rgb(255 90 0 / 70%));
        left: calc(50% - var(--spacing-1));
    }

    /* Feuer-Varianten */
    .fire-sm::before,
    .fire-sm::after {
        filter: blur(var(--border-width-thick));
        height: var(--spacing-5);
        width: calc(var(--spacing-1) + var(--border-width-thick));
    }

    .fire-lg::before,
    .fire-lg::after {
        filter: var(--filter-blur-xl);
        height: 50px;
        width: var(--spacing-7-5);
    }

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

    .fire-fast::before,
    .fire-fast::after {
        animation-duration: var(--animation-duration-slowest);
    }

    /* Farbvarianten */
    .fire-red::before {
        background: var(--fire-red, rgb(255 50 0 / 70%));
    }

    .fire-red::after {
        background: var(--fire-red-alt, rgb(255 100 0 / 70%));
    }

    .fire-blue::before {
        background: var(--fire-blue, rgb(0 150 255 / 70%));
    }

    .fire-blue::after {
        background: var(--fire-blue-alt, rgb(100 200 255 / 70%));
    }

    .fire-green::before {
        background: var(--fire-green, rgb(0 200 100 / 70%));
    }

    .fire-green::after {
        background: var(--fire-green-alt, rgb(100 255 150 / 70%));
    }

    .fire-purple::before {
        background: var(--fire-purple, rgb(150 0 255 / 70%));
    }

    .fire-purple::after {
        background: var(--fire-purple-alt, rgb(200 100 255 / 70%));
    }
}

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