:root {
    --slide-duration: 0.6s;
    --slide-delay: 0s;
}

.slide-in-left {
    animation: slideInLeft var(--slide-duration) var(--slide-delay) ease-out both;
}

.slide-in-right {
    animation: slideInRight var(--slide-duration) var(--slide-delay) ease-out both;
}

.slide-up {
    animation: slideUp var(--slide-duration) var(--slide-delay) ease-out both;
}

.slide-down {
    animation: slideDown var(--slide-duration) var(--slide-delay) ease-out both;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Speed variations */
.slide-fast{ --slide-duration:0.3s; }
.slide-norm{ --slide-duration:0.5s; }
.slide-slow{ --slide-duration:0.7s; }

/* Delay variations */
.slide-d_1{ --slide-delay:0.1s; }
.slide-d_2{ --slide-delay:0.2s; }

/* Far distance slides */
.slide-in-left-far{ animation: slideInLeftFar var(--slide-duration) var(--slide-delay) ease-out both; }
.slide-in-right-far{ animation: slideInRightFar var(--slide-duration) var(--slide-delay) ease-out both; }
.slide-up-far{ animation: slideUpFar var(--slide-duration) var(--slide-delay) ease-out both; }
.slide-down-far{ animation: slideDownFar var(--slide-duration) var(--slide-delay) ease-out both; }

/* Initial state for slide-up-far elements */
.pre-slide-up-far{
    transform: translateY(10vh);
    opacity: 0;
}

@keyframes slideInLeftFar {
    from { transform: translateX(-100vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRightFar {
    from { transform: translateX(100vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideUpFar {
    from { transform: translateY(100vh); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDownFar {
    from { transform: translateY(-100vh); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Moved from base.css */
@keyframes fadeInMoveLeft {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInMoveDown {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Moved from style.css */
@keyframes animation {
    0% { left: -150%; top: 100%; }
    50% { left: 0%; top: -60%; }
    100% { left: -20%; top: -40%; }
}