/* ============================================ */
/*        ANIMAZIONI TAG "MOOD" & FOGLIA        */
/*        PAGINA CHI SIAMO                      */
/* ============================================ */

/* I tre tag "sushi lovers / creatives / rollers" galleggiano
   su una traiettoria quasi circolare           */
.sushi-tag,
.creatives-tag,
.rollers-tag {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* Stesso percorso, ma con durate e delay diversi
   per non farli muovere all'unisono             */
.sushi-tag {
    animation-name: mood-float;
    animation-duration: 9s;
}

.creatives-tag {
    animation-name: mood-float;
    animation-duration: 11s;
    animation-delay: -2s;
}

.rollers-tag {
    animation-name: mood-float;
    animation-duration: 13s;
    animation-delay: -4s;
}

@keyframes mood-float {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(6px, -10px);
    }
    50% {
        transform: translate(12px, 0px);
    }
    75% {
        transform: translate(6px, 10px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Foglia: leggero dondolio + piccolo movimento verticale */
.leaf-image-container {
    animation: leaf-sway 7s ease-in-out infinite;
    transform-origin: 70% 20%; /* punto di "aggancio" più naturale */
}

@keyframes leaf-sway {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-5px) rotate(-1.5deg) scale(1.01);
    }
    50% {
        transform: translateY(0) rotate(1.5deg) scale(1.02);
    }
    75% {
        transform: translateY(4px) rotate(-1deg) scale(1.01);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* Accessibilità: se l'utente chiede meno animazioni, le disattiviamo */
@media (prefers-reduced-motion: reduce) {
    .sushi-tag,
    .creatives-tag,
    .rollers-tag,
    .leaf-image-container {
        animation: none !important;
    }
}


/* ============================================ */
/*      ANIMAZIONE SMOOTH CAMBIO MENU           */
/* ============================================ */

/* Ogni volta che cambiano le card (click su categoria),
   vengono ricreate nel DOM, quindi questa animazione
   parte automaticamente ad ogni cambio menu. */

.menu-group-cards .menu-card {
    animation: menu-card-fade-in 0.9s ease-out forwards;
}

/* Effetto "stagger": le card entrano leggermente sfalsate */
.menu-group-cards .menu-card:nth-child(2) {
    animation-delay: 0.05s;
}
.menu-group-cards .menu-card:nth-child(3) {
    animation-delay: 0.1s;
}
.menu-group-cards .menu-card:nth-child(4) {
    animation-delay: 0.15s;
}
.menu-group-cards .menu-card:nth-child(5) {
    animation-delay: 0.2s;
}
.menu-group-cards .menu-card:nth-child(6) {
    animation-delay: 0.25s;
}

/* Keyframe: piccolo fade + salita morbida */
@keyframes menu-card-fade-in {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Accessibilità: niente animazione se l'utente lo preferisce */
@media (prefers-reduced-motion: reduce) {
    .menu-group-cards .menu-card {
        animation: none !important;
    }
}