/* =========================
   Animations & Effects
   ========================= */

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce { /* Example, not actively used but can be */
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Scroll Reveal Animation Classes */
.reveal,
.animate-from-bottom,
.animate-from-left,
.animate-from-right,
.animate-fade-in,
.animate-scale,
.animate-text.js-split { /* Target .js-split for char animation */
    opacity: 0;
    will-change: opacity, transform; /* Performance hint */
}

/* Default reveal is fadeInUp */
.reveal.active,
.animate-from-bottom.active {
    animation: fadeInUp 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.animate-from-left.active {
    animation: slideInFromLeft 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.animate-from-right.active {
    animation: slideInFromRight 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.animate-fade-in.active {
    animation: fadeIn 1s ease forwards;
}

.animate-scale.active {
    animation: scaleIn 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

/* Animation Delays */
/* Use !important sparingly, prefer higher specificity if conflicts arise */
.delay-1 { animation-delay: 0.2s !important; } 
.delay-2 { animation-delay: 0.4s !important; }
.delay-3 { animation-delay: 0.6s !important; }
.delay-4 { animation-delay: 0.8s !important; }


/* Text Character Animation (triggered by JS adding .active to .animate-text.js-split) */
.animate-text.js-split.active .char {
    /* animation-delay is set inline by JS */
    animation: fadeInUpCharAdvanced 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0; /* ensure it starts hidden before animation if JS is slow */
    transform: translateY(25px) rotateX(-90deg);
    transform-origin: bottom center;
}

@keyframes fadeInUpCharAdvanced {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}


/* Product Card Hover Effects (already defined in style.css, ensure no conflicts) */
/* .product-card, .vehicle-card {} */
/* .product-card:hover, .vehicle-card:hover {} */
/* .product-image img, .vehicle-image img {} */
/* .product-card:hover .product-image img, .vehicle-card:hover .vehicle-image img {} */

/* Badge Animation (Example: fadeIn) */
.product-badge, .vehicle-badge {
    animation: fadeIn 0.5s ease-out 0.5s forwards; /* Delay to appear after card reveal */
    opacity: 0; /* Start hidden for animation */
}