:root {
    --nb-accent: #08e099;
}

/* Scoped to the Food section only to avoid side effects */
.food .food-item {
    position: relative;
    overflow: hidden; /* clip animated layers */
    /* Do not change existing colors; only enhance background on hover */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

/* Keep content above animated layers */
.food .food-item > * {
    position: relative;
    z-index: 1;
}

/* WAVE LAYER */
.food .food-item::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -30%;
    height: 65%;
    pointer-events: none;
    z-index: 0;

    /* Soft curved wave using a large radial gradient that fades out */
    background: radial-gradient(120% 85% at 50% 100%,
        color-mix(in oklab, var(--nb-accent) 35%, transparent) 0%,
        color-mix(in oklab, var(--nb-accent) 22%, transparent) 38%,
        color-mix(in oklab, var(--nb-accent) 15%, transparent) 56%,
        transparent 60%
    );
    filter: blur(0.3px);
    opacity: 0;
    transform: translateY(8%) scale(1.04);
    transition: opacity 0.35s ease;
    will-change: transform, opacity;
}

/* BUBBLE LAYER */
.food .food-item::after {
    content: "";
    position: absolute;
    inset: -10% 0 -25% 0; /* extra bottom space so bubbles rise in */
    pointer-events: none;
    z-index: 0;

    /* Multiple radial gradients act as bubble groups */
    background-image:
        radial-gradient(circle, color-mix(in oklab, var(--nb-accent) 45%, transparent) 0 3px, transparent 3.5px),
        radial-gradient(circle, color-mix(in oklab, var(--nb-accent) 32%, transparent) 0 2px, transparent 2.5px),
        radial-gradient(circle, color-mix(in oklab, var(--nb-accent) 38%, transparent) 0 2.5px, transparent 3px),
        radial-gradient(circle, color-mix(in oklab, var(--nb-accent) 25%, transparent) 0 1.5px, transparent 2px);
    background-size: 130px 130px, 110px 110px, 90px 90px, 70px 70px;
    background-repeat: repeat;
    background-position: 10% 120%, 40% 130%, 70% 125%, 90% 115%;

    opacity: 0;
    transition: opacity 0.35s ease;
    will-change: background-position, opacity;
}

/* Hover states */
.food .food-item:hover {
    transform: translateY(-2px);
}

.food .food-item:hover::before {
    opacity: 1;
    animation: nb-wave-drift 6.5s ease-in-out infinite alternate;
}

.food .food-item:hover::after {
    opacity: 1;
    animation: nb-bubbles-rise 7.5s linear infinite;
}

/* Keyframes */
@keyframes nb-wave-drift {
    0% { transform: translateX(-8%) translateY(8%) scale(1.04); }
    100% { transform: translateX(8%) translateY(8%) scale(1.04); }
}

@keyframes nb-bubbles-rise {
    0% {
        background-position: 10% 120%, 40% 130%, 70% 125%, 90% 115%;
    }
    100% {
        background-position: 10% -20%, 40% -10%, 70% -15%, 90% -5%;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .food .food-item,
    .food .food-item::before,
    .food .food-item::after {
        transition: none !important;
        animation: none !important;
    }
}