/*mpa transitions*/
@view-transition {
    navigation: auto;
}

@keyframes shrink {
    to {
        scale: 0.8;
        opacity: 0.5;
    }
}

@keyframes grow {
    from {
        scale: 0.8;
        opacity: 0.5;
    }
}

@keyframes slide-in {
    from {
        translate: 100vw 0;
    }
}

@keyframes slide-out {
    to {
        translate: 100vw 0;
    }
}

@keyframes scale-up {
    from {
        scale: 0;
    }
}

@keyframes scale-down {
    to {
        scale: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

::view-transition {
    /*background: black;*/
}

:root {
    view-transition-name: none;
}

body {
    view-transition-name: page;
}

::view-transition-group(page) {
    animation-duration: 0.7s;
}

:root[data-transition="reload"] {
    &::view-transition-old(page)

{
    display: none;
}

&::view-transition-new(page) {
    animation-name: fade-in, scale-up;
}

}

:root[data-transition="push"] {
    &::view-transition-old(page)

{
    &::view-transition-old(page)

{
    animation-name: shrink;
    transform-origin: 100% 50%;
}

}

&::view-transition-new(page) {
    animation-name: slide-in;
}

}

:root[data-transition="pop"] {
    &::view-transition-old(page)

{
    animation-name: slide-out;
    z-index: 1;
}

&::view-transition-new(page) {
    animation-name: grow;
    transform-origin: 100% 50%;
}

}


/* Successo */
#toast-container > .toast-success {
    background-color: #73b736; /* verde personalizzato */
    color: #fff;
/*    border: 2px solid #1e7e34;*/
}

/* Errore */
#toast-container > .toast-error {
    background-color: #e41513; /* rosso */
    color: #fff;
}

/* Avviso */
/*#toast-container > .toast-warning {
    background-color: #ffc107;
    color: #000;
}

 Informazione 
#toast-container > .toast-info {
    background-color: #17a2b8;
    color: #fff;
}
*/


/* Animazione rimbalzo */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-12px);
    }

    60% {
        transform: translateY(-6px);
    }
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes bouncePulse {
    0% {
        transform: scale(1) translateY(0);
    }

    20% {
        transform: scale(1.1) translateY(-10px);
    }

    40% {
        transform: scale(0.95) translateY(0);
    }

    60% {
        transform: scale(1.15) translateY(-6px);
    }

    80% {
        transform: scale(1) translateY(0);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}
.shake-animation {
    animation: bounce 0.9s ease;
    animation-iteration-count: 1; /* ripete tre volte */
}