/* Effects*/

/* Basics */

.animated {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22,.61,.36,1); /* jemný "ease-out" */
    will-change: transform, opacity; /* lepší výkon */
}

.fadeInUpBlurIn {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(16px); /*was 8px*/
    animation-name: fadeInUpBlurIn;
}
@keyframes fadeInUpBlurIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(16px);
    }
    60% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* --- Fade In --- */
.fadeIn {
    opacity: 0;
    animation-name: fadeIn;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Fade Out --- */
.fadeOut {
    opacity: 1;
    animation-name: fadeOut;
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* --- Fade In Up (ideálne na karty) --- */
.fadeInUp {
    opacity: 0;
    transform: translateY(16px);
    animation-name: fadeInUp;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}