/* Animation CSS - Basic animations for revealOnScroll */
.revealOnScroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.revealOnScroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.fadeIn {
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.zoomIn {
    animation: zoomIn 0.6s ease forwards;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.slideInLeft {
    animation: slideInLeft 0.6s ease forwards;
}

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

.slideInRight {
    animation: slideInRight 0.6s ease forwards;
}

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

.lightSpeedIn {
    animation: lightSpeedIn 0.6s ease forwards;
}

@keyframes lightSpeedIn {
    from { transform: translateX(-100%) skewX(-30deg); opacity: 0; }
    to { transform: translateX(0) skewX(0deg); opacity: 1; }
}

.flipInX {
    animation: flipInX 0.6s ease forwards;
}

@keyframes flipInX {
    from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
    to { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}