/* Estilos para los ingredientes animados */

.falling-ingredients-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.falling-ingredient {
    position: absolute;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}

.floating-ingredient {
    position: absolute;
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease-in-out;
}

.floating-ingredient:hover {
    transform: scale(1.1);
}

/* Clase adicional para cuando la página se carga inicialmente */
.initial-animation .falling-ingredient {
    animation-delay: calc(var(--index) * 0.5s);
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .falling-ingredient, .floating-ingredient {
        width: 30px !important; /* Tamaño más pequeño en móviles */
    }
}