/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

/* Fade Up Animation */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.animate {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* Slide Left Animation */
.slide-left {
    opacity: 0;
    transform: translateX(-50px) translateZ(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.slide-left.animate {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

/* Slide Right Animation */
.slide-right {
    opacity: 0;
    transform: translateX(50px) translateZ(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.slide-right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Zoom In Animation */
.zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.zoom-in.animate {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

/* ============================================
   HOVER ANIMATIONS
   ============================================ */

/* Product Card Hover */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.product-card:hover .product-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Feature Card Hover */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Service Card Hover */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Country Card Hover */
.country-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    background: var(--light-bg);
}

.country-card:hover i {
    transform: scale(1.2);
    color: var(--secondary-color);
}

/* Product Card Page Hover */
.product-card-page:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.product-card-page:hover .product-image {
    transform: scale(1.1);
}

.product-card-page:hover .product-overlay {
    opacity: 1;
}

/* Stat Card Hover */
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

/* MV Card Hover */
.mv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.mv-card:hover .mv-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* NC Item Hover */
.nc-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.nc-item:hover .nc-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Contact Info Card Hover */
.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.contact-info-card:hover .contact-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Filter Button Hover (already in style.css but adding smooth transition) */
.filter-btn {
    transition: all 0.3s ease;
}

/* Form Input Focus Animation */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 54, 93, 0.1);
}

/* Smooth transitions for all interactive elements */
.product-icon,
.feature-icon,
.service-icon,
.stat-icon,
.mv-icon,
.nc-icon,
.contact-icon {
    transition: transform 0.3s ease;
}

/* Stagger animation delay for grid items */
.products-grid .product-card:nth-child(1) { transition-delay: 0.1s; }
.products-grid .product-card:nth-child(2) { transition-delay: 0.2s; }
.products-grid .product-card:nth-child(3) { transition-delay: 0.3s; }
.products-grid .product-card:nth-child(4) { transition-delay: 0.4s; }
.products-grid .product-card:nth-child(5) { transition-delay: 0.5s; }
.products-grid .product-card:nth-child(6) { transition-delay: 0.6s; }

.features-grid .feature-card:nth-child(1) { transition-delay: 0.1s; }
.features-grid .feature-card:nth-child(2) { transition-delay: 0.2s; }
.features-grid .feature-card:nth-child(3) { transition-delay: 0.3s; }
.features-grid .feature-card:nth-child(4) { transition-delay: 0.4s; }
.features-grid .feature-card:nth-child(5) { transition-delay: 0.5s; }
.features-grid .feature-card:nth-child(6) { transition-delay: 0.6s; }

.countries-grid .country-card:nth-child(1) { transition-delay: 0.05s; }
.countries-grid .country-card:nth-child(2) { transition-delay: 0.1s; }
.countries-grid .country-card:nth-child(3) { transition-delay: 0.15s; }
.countries-grid .country-card:nth-child(4) { transition-delay: 0.2s; }
.countries-grid .country-card:nth-child(5) { transition-delay: 0.25s; }
.countries-grid .country-card:nth-child(6) { transition-delay: 0.3s; }
.countries-grid .country-card:nth-child(7) { transition-delay: 0.35s; }
.countries-grid .country-card:nth-child(8) { transition-delay: 0.4s; }
.countries-grid .country-card:nth-child(9) { transition-delay: 0.45s; }
.countries-grid .country-card:nth-child(10) { transition-delay: 0.5s; }
.countries-grid .country-card:nth-child(11) { transition-delay: 0.55s; }
.countries-grid .country-card:nth-child(12) { transition-delay: 0.6s; }
