/* css/animations.css */

/* General Animation Setup */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
}

/* Fade In */
.animate-on-scroll[data-animation="fadeIn"] {
    /* Default, opacity handled by .is-visible */
}

/* Fade In Up */
.animate-on-scroll[data-animation="fadeInUp"] {
    transform: translateY(30px);
}
.animate-on-scroll[data-animation="fadeInUp"].is-visible {
    transform: translateY(0);
}

/* Fade In Down */
.animate-on-scroll[data-animation="fadeInDown"] {
    transform: translateY(-30px);
}
.animate-on-scroll[data-animation="fadeInDown"].is-visible {
    transform: translateY(0);
}

/* Fade In Left */
.animate-on-scroll[data-animation="fadeInLeft"] {
    transform: translateX(-30px);
}
.animate-on-scroll[data-animation="fadeInLeft"].is-visible {
    transform: translateX(0);
}

/* Fade In Right */
.animate-on-scroll[data-animation="fadeInRight"] {
    transform: translateX(30px);
}
.animate-on-scroll[data-animation="fadeInRight"].is-visible {
    transform: translateX(0);
}

/* Zoom In */
.animate-on-scroll[data-animation="zoomIn"] {
    transform: scale(0.9);
}
.animate-on-scroll[data-animation="zoomIn"].is-visible {
    transform: scale(1);
}

/* Navbar Menu Slide-in/out (Mobile) */
/* The actual transform is handled in responsive.css for mobile,
   but the transition itself can be defined here or in style.css */
.navbar-menu {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Input field focus subtle grow */
.form-control {
    transition: transform 0.2s ease-out, border-color var(--transition-speed), box-shadow var(--transition-speed);
}
/* Focus state effects are in style.css */