/* ========================= */
/* LIQUID EFFECT */
/* ========================= */

.menu-card.liquid {
    transition: 0.3s;
}

/* ========================= */
/* BUBBLE EFFECT */
/* ========================= */

.menu-card.bubble::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff3;
    border-radius: 50%;
    animation: bubble 2s infinite;
}

@keyframes bubble {
    0% { transform: translateY(20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-40px); opacity: 0; }
}

/* ========================= */
/* MELT EFFECT */
/* ========================= */

.menu-card.melt:hover {
    transform: scaleY(0.95);
}

/* ========================= */
/* CHEESE EFFECT */
/* ========================= */

.menu-card.cheese::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background: yellow;
    bottom: 0;
    animation: stretch 1s infinite alternate;
}

@keyframes stretch {
    from { height: 5px; }
    to { height: 15px; }
}

/* ========================= */
/* NOODLE EFFECT */
/* ========================= */

.menu-card.noodle {
    transition: 0.3s;
}