/*  animations css  */
:root
{
    --ease: cubic-bezier(.25, 0, .3, 1);
    --ease-in: cubic-bezier(.70, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .3, 1);
    --ease-in-out: cubic-bezier(.5, 0, .5, 1);
    --ease-elastic-in: cubic-bezier(.5, -1, 1, 1);
    --ease-elastic-out: cubic-bezier(0, 0, .5, 2);
    --ease-elastic-in-out: cubic-bezier(.5, -1, .5, 2);

    --animation-fade-in: fade-in .5s var(--ease);
    --animation-fade-out: fade-out .5s var(--ease);
    --animation-zoom-in: zoom-in .5s var(--ease-elastic-in-out);
    --animation-zoom-out: zoom-out .5s var(--ease-elastic-in-out);
    --animation-shrink-in: shrink-in .5s var(--ease-elastic-in-out);
    --animation-shrink-out: shrink-out .5s var(--ease-elastic-in-out);
    --animation-shake: shake .75s var(--ease-out);
    --animation-slide-in-up: slide-in-up .5s var(--ease-out);
    --animation-slide-in-down: slide-in-down .5s var(--ease-out);
    --animation-wave: wave 4s var(--ease) infinite;
    --animation-pulsate: pulsate 2s var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
    :root
    {
        --animation-fade-in: none;
        --animation-fade-out: none;
        --animation-zoom-in: none;
        --animation-zoom-out: none;
        --animation-shrink-in: none;
        --animation-shrink-out: none;
        --animation-shake: none;
        --animation-slide-in-up: none;
        --animation-slide-in-down: none;
        --animation-wave: none;
        --animation-pulsate: none;
    }
}

.animation-fade-in { animation: var(--animation-fade-in); }
.animation-fade-out { animation: var(--animation-fade-out); }
.animation-zoom-in { animation: var(--animation-zoom-in); }
.animation-zoom-out { animation: var(--animation-zoom-out); }
.animation-shrink-in { animation: var(--animation-shrink-in); }
.animation-shrink-out { animation: var(--animation-shrink-out); }
.animation-shake { animation: var(--animation-shake); }
.animation-slide-in-up { animation: var(--animation-slide-in-up); }
.animation-slide-in-down { animation: var(--animation-slide-in-down); }
.animation-wave { animation: var(--animation-wave); }
.animation-pulsate { animation: var(--animation-pulsate); }

@keyframes fade-in
{
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade-out
{
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes zoom-in
{
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes zoom-out
{
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.1); opacity: 0; }
}
@keyframes shrink-in
{
    from { transform: scale(1.1); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes shrink-out
{
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.9); opacity: 0; }
}
@keyframes shake
{
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-1rem); }
    40% { transform: translateX(1rem); }
    60% { transform: translateX(-1rem); }
    80% { transform: translateX(1rem); }
}
@keyframes slide-in-up
{
    from { transform: translateY(100%); opacity: 0; }
}
@keyframes slide-in-down
{
    from { transform: translateY(-100%); opacity: 0; }
}
@keyframes wave
{
    0% { transform: rotate(0deg) scale(1); }
    5% { transform: rotate(15deg) scale(1.2); }
    15% { transform: rotate(-15deg) scale(1.2); }
    25% { transform: rotate(15deg) scale(1.2); }
    35% { transform: rotate(-15deg) scale(1.2); }
    40% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
}
@keyframes pulsate
{
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50%,100% { transform: scale(1); }
}