.food-title {
    isolation: isolate;
    overflow: hidden;
}

.food-title > :not(.lobster-steam) {
    position: relative;
    z-index: 2;
}

.lobster-steam {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.steam-wisp {
    --steam-x: 0px;
    --steam-drift: 18px;
    --steam-scale: 1;
    position: absolute;
    bottom: 28%;
    left: 63%;
    width: 30px;
    height: clamp(70px, 9vw, 155px);
    border-radius: 50%;
    background: linear-gradient(
        to top,
        rgb(255 255 255 / 0),
        rgb(255 248 230 / 0.78) 35%,
        rgb(255 255 255 / 0.96) 58%,
        rgb(255 255 255 / 0)
    );
    filter: blur(7px);
    opacity: 0;
    transform: translate3d(var(--steam-x), 12px, 0) scale(var(--steam-scale));
    animation: lobster-steam-rise 3.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    animation-play-state: paused;
    will-change: transform, opacity, filter;
}

.lobster-steam.is-active .steam-wisp {
    animation-play-state: running;
}

.steam-wisp:nth-child(2) {
    left: 69%;
    bottom: 31%;
    --steam-drift: -15px;
    --steam-scale: 0.8;
    animation-delay: -1.4s;
    animation-duration: 4.4s;
}

.steam-wisp:nth-child(3) {
    left: 75%;
    bottom: 25%;
    --steam-drift: 22px;
    --steam-scale: 1.15;
    animation-delay: -2.7s;
    animation-duration: 4.8s;
}

.steam-wisp:nth-child(4) {
    left: 81%;
    bottom: 33%;
    --steam-drift: -20px;
    --steam-scale: 0.72;
    animation-delay: -0.8s;
    animation-duration: 4.1s;
}

.steam-wisp:nth-child(5) {
    left: 87%;
    bottom: 27%;
    --steam-drift: 13px;
    --steam-scale: 0.92;
    animation-delay: -3.2s;
    animation-duration: 4.6s;
}

.steam-wisp:nth-child(6) {
    left: 66%;
    bottom: 24%;
    --steam-drift: -24px;
    --steam-scale: 1.08;
    animation-delay: -3.6s;
    animation-duration: 5s;
}

.steam-wisp:nth-child(7) {
    left: 78%;
    bottom: 29%;
    --steam-drift: 17px;
    --steam-scale: 0.88;
    animation-delay: -2.1s;
    animation-duration: 4.2s;
}

.steam-wisp:nth-child(8) {
    left: 84%;
    bottom: 23%;
    --steam-drift: -12px;
    --steam-scale: 1.2;
    animation-delay: -1.1s;
    animation-duration: 4.9s;
}

.steam-wisp:nth-child(9) {
    left: 61%;
    bottom: 22%;
    --steam-drift: 28px;
    --steam-scale: 1.28;
    animation-delay: -4.1s;
    animation-duration: 5.2s;
}

.steam-wisp:nth-child(10) {
    left: 72%;
    bottom: 34%;
    --steam-drift: -28px;
    --steam-scale: 1.12;
    animation-delay: -1.8s;
    animation-duration: 4.7s;
}

.steam-wisp:nth-child(11) {
    left: 82%;
    bottom: 31%;
    --steam-drift: 25px;
    --steam-scale: 1.3;
    animation-delay: -3.4s;
    animation-duration: 5.3s;
}

.steam-wisp:nth-child(12) {
    left: 90%;
    bottom: 25%;
    --steam-drift: -18px;
    --steam-scale: 1.05;
    animation-delay: -2.5s;
    animation-duration: 4.5s;
}

@keyframes lobster-steam-rise {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translate3d(var(--steam-x), 14px, 0) scale(var(--steam-scale));
    }
    18% {
        opacity: 0.94;
    }
    58% {
        opacity: 0.62;
        filter: blur(10px);
    }
    100% {
        opacity: 0;
        filter: blur(15px);
        transform: translate3d(var(--steam-drift), -125%, 0) scale(calc(var(--steam-scale) * 1.85));
    }
}

@media (max-width: 640px) {
    .steam-wisp {
        width: 16px;
        filter: blur(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .steam-wisp {
        animation: none;
        opacity: 0.2;
        filter: blur(9px);
        transform: translate3d(0, -18%, 0) scale(var(--steam-scale));
        will-change: auto;
    }
}