@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.fade-in.lazy-loaded {
    animation: fade-in var(--anim-speed, 1s) ease-out forwards;
}

.slide-in-right {
    position: relative;
    opacity: 0;
    transform: translateX(85%);
    transition: opacity 1s ease-out, transform 0.5s ease-out;
    clip-path: inset(0 0 0 0);
}

.slide-in-right.lazy-loaded {
    animation: slide-in-right var(--anim-speed, 0.5s) ease-out forwards;
}

.slide-in-left {
    position: relative;
    opacity: 0;
    transform: translateX(-85%);
    transition: opacity 1s ease-out, transform 0.5s ease-out;
    clip-path: inset(0 0 0 0);
}

.slide-in-left.lazy-loaded {
    animation: slide-in-left var(--anim-speed, 0.5s) ease-out forwards;
}

/*Slide from botton */
@keyframes slide-from-bottom {
    0% {
        transform: translateY(40%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-from-bottom {
    position: relative;
    opacity: 0;
    transform: translateY(40%);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    clip-path: inset(0 0 0 0);
}

.slide-from-bottom.lazy-loaded {
    animation: slide-from-bottom var(--anim-speed, 0.5s) ease-out forwards;
}