@keyframes barMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

.bar-animation {
    animation: barMove 8s infinite linear;
    will-change: transform, opacity;
}

/* delays para que sea esporádico */
.bar-animation:nth-child(1) {
    animation-delay: 0s;
}

.bar-animation:nth-child(2) {
    animation-delay: 3s;
}

.bar-animation:nth-child(3) {
    animation-delay: 5s;
}

@keyframes flameRise {
    0% {
        transform: translateY(100%) scale(0.8);
        opacity: 0.2;
    }

    30% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translateY(100%) scale(0.6);
        opacity: 0.3;
    }
}

.flame {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 80px;
    border-radius: 50% 50% 40% 40%;
    background: linear-gradient(to top, #ecb0ee 0%, #ed79fa 50%, transparent 100%);
    opacity: 0.8;
    animation: flameWobble 4s ease-out forwards;
    filter: blur(4px);
    pointer-events: none;
}

@keyframes flameWobble {
    0% {
        transform: translateY(100%) scaleX(1) scaleY(1);
        opacity: 0;
    }

    20% {
        transform: translateY(60%) scaleX(0.8) scaleY(1.2);
        opacity: 0.8;
    }

    50% {
        transform: translateY(0%) scaleX(1) scaleY(1);
        opacity: 1;
    }

    80% {
        transform: translateY(60%) scaleX(1.2) scaleY(0.8);
        opacity: 0.5;
    }

    100% {
        transform: translateY(100%) scaleX(1) scaleY(1);
        opacity: 0;
    }
}