/* Steam visual styles */
.steam-container {
    width: 120px;
    height: 180px;
    position: relative;
}

.steam-particle {
    position: absolute;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, rgba(220, 220, 220, 0.7) 0%, rgba(220, 220, 220, 0) 70%);
    border-radius: 50%;
    filter: blur(3px);
}

.sp1 {
    left: 50%;
    bottom: 0;
    animation: steam-rise-1 2s infinite ease-out;
}

.sp2 {
    left: 55%;
    bottom: 0;
    animation: steam-rise-2 2.3s infinite ease-out 0.2s;
}

.sp3 {
    left: 45%;
    bottom: 0;
    animation: steam-rise-1 2.5s infinite ease-out 0.4s;
}

.sp4 {
    left: 60%;
    bottom: 0;
    animation: steam-rise-2 2.2s infinite ease-out 0.6s;
}

.sp5 {
    left: 40%;
    bottom: 0;
    animation: steam-rise-1 2.7s infinite ease-out 0.8s;
}

.sp6 {
    left: 52%;
    bottom: 0;
    animation: steam-rise-2 2.4s infinite ease-out 1s;
}

.sp7 {
    left: 48%;
    bottom: 0;
    animation: steam-rise-1 2.6s infinite ease-out 1.2s;
}

.sp8 {
    left: 58%;
    bottom: 0;
    animation: steam-rise-2 2.8s infinite ease-out 1.4s;
}

@keyframes steam-rise-1 {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(-15px) scale(2);
        opacity: 0;
    }
}

@keyframes steam-rise-2 {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(15px) scale(2);
        opacity: 0;
    }
}