/* ============================================
   Unified Animation Styles for All Pages
   Based on index.html animations
   ============================================ */

/* WOW.js Animation Enhancements */
.wow {
    visibility: hidden;
    will-change: transform, opacity;
}

.wow.animated {
    visibility: visible;
}

/* Additional animation styles for better performance */
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight,
.zoomIn {
    animation-fill-mode: both;
    will-change: transform, opacity;
}

/* Prevent layout shift during animations - Use GPU acceleration */
.in-sv-service-item,
.about-img,
.about-text,
.in-sv-section-title,
.in-sv-title-text,
.headline-sv,
.fancy-card,
.branch-square-card,
.contact-card,
.service-blog-card,
.company-logo,
.partners-card {
    opacity: 1;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Optimize animations to reduce reflow */
.wow,
.wow.animated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Smooth transitions for interactive elements */
a,
button,
.company-logo,
.service-blog-card,
.in-sv-service-item,
.fancy-card,
.contact-card,
.partners-card {
    transition: all 0.3s ease;
}

/* RTL/LTR Support - Animation directions adapt automatically */
html[dir="rtl"] .fadeInLeft {
    animation-name: fadeInRight;
}

html[dir="rtl"] .fadeInRight {
    animation-name: fadeInLeft;
}

html[dir="ltr"] .fadeInLeft {
    animation-name: fadeInLeft;
}

html[dir="ltr"] .fadeInRight {
    animation-name: fadeInRight;
}

/* Hero section animations */
.in-sv-hero-section .headline-sv {
    opacity: 1;
    transform: translateZ(0);
}

/* Section title animations */
.in-sv-section-title.headline-sv {
    opacity: 1;
    transform: translateZ(0);
}

/* Card hover effects */
.fancy-card:hover,
.contact-card:hover,
.partners-card:hover,
.branch-square-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent horizontal scroll */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}