/* Animacja: wjeżdżanie z lewej */
[data-animate-class="animate-from-left"] {
    opacity: 0;
    transform: translateX(-100px);
}

[data-animate-class="animate-from-left"].active {
    animation: slideFromLeft .9s ease-out forwards;
}

@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animacja: wjeżdżanie z prawej */
[data-animate-class="animate-from-right"] {
    opacity: 0;

    /* transform: translateX(50%); */
}

[data-animate-class="animate-from-right"].active {
    animation: slideFromRight .9s ease-out forwards;
}

@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animacja: wjeżdżanie z dołu */
[data-animate-class="animate-from-bottom"] {
    opacity: 0;
    transform: translateY(100%);
}

[data-animate-class="animate-from-bottom"].active {
    animation: slideFromBottom 1s ease-out forwards;
}

@keyframes slideFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacja: pojawianie się (fade in) */
[data-animate-class="animate-fade-in"] {
    opacity: 0;
    transform: translateY(20px);
}

[data-animate-class="animate-fade-in"].active {
    animation: fadeInUp 1.2s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animacja powiększania elementu */
.rz-hover-scale {
    transition: transform 0.3s ease-in-out;
}

.rz-hover-scale:hover {
    transform: scale(1.05);
}