.flames {
    position: relative;
}

.flames::before {
    content: "";
    position: absolute;
    inset: -5px;
    background: linear-gradient(
        45deg,
        orange,
        gold,
        red,
        orange,
        yellow
    );
    background-size: 300% 300%;
    animation: fire 3s infinite linear;
    z-index: -1;
    filter: blur(6px);
    border-radius: 8px;
}

@keyframes fire {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ------------------------------------------- */

.freezing {
    position: relative;
}

.freezing::before {
    content: "";
    position: absolute;
    inset: -5px;
    background: linear-gradient(
        45deg,
        #0a3c52,
        #0e5f7a,
        #148aa3,
        #9fe4ff,
        #00eaff
    );
    background-size: 300% 300%;
    animation: fire 3s infinite linear;
    z-index: -1;
    filter: blur(6px);
    border-radius: 8px;
}

@keyframes fire {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ------------------------------------------- */

.zoom {
    position: relative;
    display: inline-block;
}

.zoom img {
    position: relative;
    z-index: 1;
    transition:
        transform 0.16s ease-out,
        box-shadow 0.16s ease-out;
    transform-origin: center bottom;
}

.zoom::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 6px);
    width: 300%;
    height: 300%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease-out;
    z-index: 0;
}

.zoom:hover img {
    transform: scale(3);
    box-shadow:
        0 0 0 3px #ffffff,
        0 10px 26px rgba(0,0,0,0.8);
    z-index: 2;
}

.zoom:hover::after {
    opacity: 1;
}