.steam-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
    background-image: linear-gradient(360deg, #ffffff 1%, transparent 9%);
}

.steam-clouds--blur {
    filter: blur(6px);
}

.steam-clouds--paused .steam-clouds__img {
    animation-play-state: paused;
}

.steam-clouds__img {
    position: absolute;
    bottom: -5px;
    display: block;
    max-width: 100%;
    height: auto;
    will-change: transform, opacity;
    opacity: 0;
    transform-origin: bottom center;
    animation-name: steam-clouds-anim;
    animation-duration: calc(4s * var(--i, 1));
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    z-index: 2;
}

@keyframes steam-clouds-anim {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    15% {
        opacity: .2;
    }
    80% {
        opacity: .2;
    }
    100% {
        opacity: 0;
        transform: scale(var(--scale, 2.5));
    }
}

@media (prefers-reduced-motion: reduce) {
    .steam-clouds__img {
        animation: none;
        opacity: 1;
        transform: none;
    }
}