/**
 * Scroll Reveal Animations CSS
 * Styles for fade-in-on-scroll effects
 */

/* Hidden state (before scrolling into view) */
.reveal-hidden {
    opacity: 0;
}

/* Visible state (after scrolling into view) */
.reveal-visible {
    opacity: 1;
    animation-fill-mode: both;
}

/* Animation types */
.reveal-fade-up {
    animation: revealFadeUp 0.8s ease-out;
}

.reveal-fade-down {
    animation: revealFadeDown 0.8s ease-out;
}

.reveal-fade-left {
    animation: revealFadeLeft 0.8s ease-out;
}

.reveal-fade-right {
    animation: revealFadeRight 0.8s ease-out;
}

.reveal-fade {
    animation: revealFade 0.8s ease-out;
}

.reveal-scale {
    animation: revealScale 0.8s ease-out;
}

/* Keyframe definitions */
@keyframes revealFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFadeLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes revealFadeRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes revealFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes revealScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal-hidden {
        opacity: 1 !important;
    }

    .reveal-visible {
        animation: none !important;
    }

    .reveal-fade-up,
    .reveal-fade-down,
    .reveal-fade-left,
    .reveal-fade-right,
    .reveal-fade,
    .reveal-scale {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}