/* ============================================
   ANIMATIONS CSS
   All animation keyframes and animation classes
   ============================================ */

/* Base Animation Keyframes */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Hero Section Animations */
@keyframes hero-slide-up {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hero-fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Services Section Animations */
@keyframes service-card-enter {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* About Section Animations */
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Contact Section Animations */
@keyframes form-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes image-slide-in {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Why Choose Us Section Animations */
@keyframes feature-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Testimonials Section Animations */
@keyframes testimonial-fade-up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gallery Section Animations */
@keyframes gallery-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gallery-slide-up {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer Section Animations */
@keyframes footer-fade-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   ANIMATION CLASSES
   ============================================ */

/* Base Animation Class */
.animate-fade-in {
  opacity: 0;
  transform: translateY(-1rem);
  animation: fade-in 1s var(--animation-delay, 0s) ease forwards;
}

/* Hero Animations - Always animate on load */
.hero-section .hero-subtitle {
  opacity: 0;
  animation: hero-fade-in-left 1s ease-out forwards;
}

.hero-section .hero-title {
  opacity: 0;
  animation: hero-slide-up 1.2s 0.2s ease-out forwards;
}

.hero-section .hero-description {
  opacity: 0;
  animation: hero-slide-up 1.2s 0.4s ease-out forwards;
}

.hero-section .btn-learn-more {
  opacity: 0;
  animation: hero-slide-up 1.2s 0.6s ease-out forwards;
}

/* Services Animations - Scroll triggered */
.services-section header {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.services-section.section-visible header {
  opacity: 1;
  transform: translateY(0);
}

.services-section .service-card {
  opacity: 0;
  transform: translateY(60px) scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.services-section.section-visible .service-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.services-section.section-visible .service-card:nth-child(1) { transition-delay: 0.1s; }
.services-section.section-visible .service-card:nth-child(2) { transition-delay: 0.2s; }
.services-section.section-visible .service-card:nth-child(3) { transition-delay: 0.3s; }
.services-section.section-visible .service-card:nth-child(4) { transition-delay: 0.4s; }
.services-section.section-visible .service-card:nth-child(5) { transition-delay: 0.5s; }
.services-section.section-visible .service-card:nth-child(6) { transition-delay: 0.6s; }

/* About Section Animations - Scroll triggered */
.about-section .col-lg-6:first-child {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.about-section.section-visible .col-lg-6:first-child {
  opacity: 1;
  transform: translateX(0);
}

.about-section .about-content {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 1s 0.2s ease-out, transform 1s 0.2s ease-out;
}

.about-section.section-visible .about-content {
  opacity: 1;
  transform: translateX(0);
}

/* Contact Section Animations - Scroll triggered */
.contact-section .contact-form-wrapper {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.contact-section.section-visible .contact-form-wrapper {
  opacity: 1;
  transform: translateX(0);
}

.contact-section .contact-image-wrapper {
  opacity: 0;
  transform: translateX(40px) scale(1.1);
  transition: opacity 1s 0.3s ease-out, transform 1s 0.3s ease-out;
}

.contact-section.section-visible .contact-image-wrapper {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Why Choose Us Animations - Scroll triggered */
.why-choose-section header {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.why-choose-section.section-visible header {
  opacity: 1;
  transform: translateY(0);
}

.why-choose-section .feature-card {
  opacity: 0;
  transform: translateY(40px) scale(0.7);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.why-choose-section.section-visible .feature-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.why-choose-section.section-visible .feature-card:nth-child(1) { transition-delay: 0.1s; }
.why-choose-section.section-visible .feature-card:nth-child(2) { transition-delay: 0.2s; }
.why-choose-section.section-visible .feature-card:nth-child(3) { transition-delay: 0.3s; }
.why-choose-section.section-visible .feature-card:nth-child(4) { transition-delay: 0.4s; }
.why-choose-section.section-visible .feature-card:nth-child(5) { transition-delay: 0.5s; }

/* Testimonials Animations - Scroll triggered */
.testimonials-section header {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.testimonials-section.section-visible header {
  opacity: 1;
  transform: translateY(0);
}

.testimonials-section .row.g-4 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s 0.3s ease-out, transform 1s 0.3s ease-out;
}

.testimonials-section.section-visible .row.g-4 {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery Animations - Scroll triggered */
.gallery-section header {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.gallery-section.section-visible header {
  opacity: 1;
  transform: translateY(0);
}

.gallery-section .gallery-item {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gallery-section.section-visible .gallery-item:nth-child(1) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

.gallery-section.section-visible .gallery-item:nth-child(2) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.4s;
}

.gallery-section .gallery-featured {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1s 0.6s ease-out, transform 1s 0.6s ease-out;
}

.gallery-section.section-visible .gallery-featured {
  opacity: 1;
  transform: scale(1);
}

/* Footer Animations - Scroll triggered */
.footer-section .col-lg-3 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.footer-section.section-visible .col-lg-3:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.footer-section.section-visible .col-lg-3:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.footer-section.section-visible .col-lg-3:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.footer-section.section-visible .col-lg-3:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.footer-section .footer-bottom {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s 0.5s ease-out, transform 0.8s 0.5s ease-out;
}

.footer-section.section-visible .footer-bottom {
  opacity: 1;
  transform: translateY(0);
}


/* inner service page animation */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Banner Section Animations - Always animate on load */
.service-banner-section .animate-banner-subtitle {
/*     opacity: 0; */
    transform: translateX(-30px);
    animation: slideInLeft 0.8s ease-out forwards;
}

.service-banner-section .animate-banner-title {
/*     opacity: 0; */
    transform: translateY(30px);
    animation: fadeInUp 1s 0.2s ease-out forwards;
}

.service-banner-section .animate-banner-description {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s 0.4s ease-out forwards;
}

/* Content Section Animations */
.service-content-section .animate-content-image {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.service-content-section.section-visible .animate-content-image {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.service-content-section .animate-content-text {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s 0.3s ease-out, transform 1s 0.3s ease-out;
}

.service-content-section.section-visible .animate-content-text {
    opacity: 1;
    transform: translateY(0);
}

/* Sidebar Animations */
.service-content-section .animate-sidebar-form {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s 0.2s ease-out, transform 1s 0.2s ease-out;
}

.service-content-section.section-visible .animate-sidebar-form {
    opacity: 1;
    transform: translateX(0);
}

.service-content-section .animate-sidebar-services {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s 0.4s ease-out, transform 1s 0.4s ease-out;
}

.service-content-section.section-visible .animate-sidebar-services {
    opacity: 1;
    transform: translateX(0);
}

/* Highlights Section Animations */
.service-highlights-wrapper .animate-highlights-header {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.service-highlights-wrapper.section-visible .animate-highlights-header {
    opacity: 1;
    transform: translateY(0);
}

.service-highlights-wrapper .animate-highlight-card {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.service-highlights-wrapper.section-visible .animate-highlight-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.service-highlights-wrapper.section-visible .animate-highlight-card:nth-child(1) {
    transition-delay: 0.1s;
}

.service-highlights-wrapper.section-visible .animate-highlight-card:nth-child(2) {
    transition-delay: 0.2s;
}

.service-highlights-wrapper.section-visible .animate-highlight-card:nth-child(3) {
    transition-delay: 0.3s;
}

.service-highlights-wrapper.section-visible .animate-highlight-card:nth-child(4) {
    transition-delay: 0.4s;
}

.service-highlights-wrapper.section-visible .animate-highlight-card:nth-child(5) {
    transition-delay: 0.5s;
}

.service-highlights-wrapper.section-visible .animate-highlight-card:nth-child(6) {
    transition-delay: 0.6s;
}

.service-highlights-wrapper .animate-highlights-cta {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s 0.7s ease-out, transform 1s 0.7s ease-out;
}

.service-highlights-wrapper.section-visible .animate-highlights-cta {
    opacity: 1;
    transform: translateY(0);
}

/* Info Bands Section Animations */
.service-info-bands .animate-info-row {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.service-info-bands.section-visible .animate-info-row {
    opacity: 1;
    transform: translateY(0);
}

.service-info-bands.section-visible .animate-info-row:nth-child(1) {
    transition-delay: 0.1s;
}

.service-info-bands.section-visible .animate-info-row:nth-child(2) {
    transition-delay: 0.3s;
}

.service-info-bands.section-visible .animate-info-row:nth-child(3) {
    transition-delay: 0.5s;
}

/* Gallery Section Animations */
.service-gallery-section .animate-gallery-slider {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.service-gallery-section.section-visible .animate-gallery-slider {
    opacity: 1;
    transform: scale(1);
}