/* Mobile Animations - Premium scroll-triggered animations for mobile devices */
/* Only affects screens max-width: 768px */

@media (max-width: 768px) {
  /* ========================================
     1. BASE ANIMATION KEYFRAMES
     ======================================== */
  
  /* Fade In Up Animation */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fade In Down Animation */
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Slide In Left Animation */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Slide In Right Animation */
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Scale In Animation */
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Float Animation for Hover */
  @keyframes float {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-8px) scale(1.02);
    }
  }

  /* Pulse Animation */
  @keyframes pulse {
    0% {
      box-shadow: 0 4px 15px rgba(30, 64, 175, 0.2);
    }
    50% {
      box-shadow: 0 4px 25px rgba(30, 64, 175, 0.4);
    }
    100% {
      box-shadow: 0 4px 15px rgba(30, 64, 175, 0.2);
    }
  }

  /* Icon Bounce Animation */
  @keyframes iconBounce {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    25% {
      transform: translateY(-5px) scale(1.05);
    }
    75% {
      transform: translateY(3px) scale(0.95);
    }
  }

  /* Icon Rotate Animation */
  @keyframes iconRotate {
    0% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(10deg) scale(1.1);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }

  /* Icon Glow Animation */
  @keyframes iconGlow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4);
    }
  }

  /* ========================================
     2. ANIMATED ELEMENTS CLASSES
     ======================================== */

  /* Default state for all animated elements */
  .animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  /* Visible state when in viewport */
  .animate-on-scroll.visible {
    opacity: 1;
  }

  /* ========================================
     3. ADVANTAGE BLOCKS ANIMATIONS
     ======================================== */

  /* Service/Advantage blocks (Bénéfices complets section) */
  .service-area .col-xl-3,
  .service-area .col-lg-4,
  .service-area .col-md-6,
  .service-area .col-sm-6 {
    opacity: 0;
  }

  .service-area .col-xl-3.visible,
  .service-area .col-lg-4.visible,
  .service-area .col-md-6.visible,
  .service-area .col-sm-6.visible {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--animation-delay, 0s);
  }

  /* Widgets services blocks */
  .widgets-services__single,
  .single-service,
  .single-feature {
    opacity: 0;
    transform-origin: center center;
  }

  .widgets-services__single.visible,
  .single-service.visible,
  .single-feature.visible {
    animation: scaleIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--animation-delay, 0s);
  }

  /* Icon containers animations */
  .widgets-services__single-icon,
  .service-icon,
  .feature-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Animated icon containers in advantages section */
  .widgets-services__single .d-flex[style*="background: linear-gradient"],
  .widgets .d-flex[style*="background: linear-gradient"],
  .service-area .d-flex[style*="background: linear-gradient"] {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .widgets-services__single.visible .d-flex[style*="background: linear-gradient"],
  .widgets.visible .d-flex[style*="background: linear-gradient"],
  .visible .d-flex[style*="background: linear-gradient"] {
    opacity: 1;
    transform: scale(1);
    animation: iconBounce 2s ease-in-out infinite;
    animation-delay: var(--icon-animation-delay, 0.5s);
  }

  /* Different animations for different icon colors */
  /* Green icons - Bounce */
  .visible .d-flex[style*="#10b981"] {
    animation: iconBounce 2.5s ease-in-out infinite;
  }

  /* Blue icons - Rotate */
  .visible .d-flex[style*="#3b82f6"],
  .visible .d-flex[style*="#1e40af"] {
    animation: iconRotate 3s ease-in-out infinite;
  }

  /* Yellow icons - Glow */
  .visible .d-flex[style*="#fbbf24"],
  .visible .d-flex[style*="#f59e0b"] {
    animation: iconGlow 2s ease-in-out infinite;
  }

  /* Purple icons - Float */
  .visible .d-flex[style*="#8b5cf6"],
  .visible .d-flex[style*="#7c3aed"] {
    animation: float 3s ease-in-out infinite;
  }

  /* Icons inside the containers */
  .widgets-services__single .fas,
  .widgets-services__single .fa,
  .widgets .fas,
  .widgets .fa {
    transition: transform 0.3s ease;
  }

  /* ========================================
     4. PROCESS STEPS ANIMATIONS
     ======================================== */

  /* Process step cards */
  .process-step,
  .card.position-relative {
    opacity: 0;
  }

  /* Alternate animations for steps */
  .process-area .col-lg-12:nth-child(odd) .card.visible,
  .feature-area .col-lg-12:nth-child(odd) .card.visible {
    animation: slideInLeft 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--animation-delay, 0s);
  }

  .process-area .col-lg-12:nth-child(even) .card.visible,
  .feature-area .col-lg-12:nth-child(even) .card.visible {
    animation: slideInRight 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--animation-delay, 0s);
  }

  /* Step badges animation */
  .badge.rounded-pill {
    opacity: 0;
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card.visible .badge.rounded-pill {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
  }

  /* ========================================
     5. HOVER ANIMATIONS (Touch-friendly)
     ======================================== */

  /* Service blocks hover */
  .widgets-services__single:active,
  .single-service:active,
  .single-feature:active {
    transform: scale(0.98);
    transition: transform 0.2s ease;
  }

  /* Card hover with float effect */
  .card:hover,
  .single-service:hover,
  .single-feature:hover {
    animation: float 3s ease-in-out infinite;
  }

  /* Icon hover rotation */
  .widgets-services__single:hover .widgets-services__single-icon,
  .single-service:hover .service-icon,
  .single-feature:hover .feature-icon {
    transform: rotate(5deg) scale(1.1);
  }

  /* Enhanced hover for icon containers */
  .widgets-services__single:hover .d-flex[style*="background: linear-gradient"],
  .widgets:hover .d-flex[style*="background: linear-gradient"] {
    transform: scale(1.15) rotate(5deg);
    animation-play-state: paused;
  }

  /* Icon hover effects */
  .widgets-services__single:hover .fas,
  .widgets-services__single:hover .fa,
  .widgets:hover .fas,
  .widgets:hover .fa {
    transform: scale(1.2);
  }

  /* Process cards hover */
  .process-area .card:hover,
  .feature-area .card:hover {
    animation: pulse 2s ease-in-out infinite;
  }

  /* Process steps icon animations */
  .process-area .fas,
  .feature-area .fas {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .process-area .card.visible .fas,
  .feature-area .card.visible .fas {
    opacity: 1;
    transform: scale(1);
    animation: iconBounce 2s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  /* ========================================
     6. STAGGERED DELAYS
     ======================================== */

  /* Auto-stagger for grid items */
  .row > [class*="col-"]:nth-child(1) { --animation-delay: 0.1s; --icon-animation-delay: 0.6s; }
  .row > [class*="col-"]:nth-child(2) { --animation-delay: 0.2s; --icon-animation-delay: 0.7s; }
  .row > [class*="col-"]:nth-child(3) { --animation-delay: 0.3s; --icon-animation-delay: 0.8s; }
  .row > [class*="col-"]:nth-child(4) { --animation-delay: 0.4s; --icon-animation-delay: 0.9s; }
  .row > [class*="col-"]:nth-child(5) { --animation-delay: 0.5s; --icon-animation-delay: 1.0s; }
  .row > [class*="col-"]:nth-child(6) { --animation-delay: 0.6s; --icon-animation-delay: 1.1s; }
  .row > [class*="col-"]:nth-child(7) { --animation-delay: 0.7s; --icon-animation-delay: 1.2s; }
  .row > [class*="col-"]:nth-child(8) { --animation-delay: 0.8s; --icon-animation-delay: 1.3s; }

  /* ========================================
     7. HERO SECTION ANIMATIONS
     ======================================== */

  /* Hero content animation */
  .welcome-content > * {
    opacity: 0;
  }

  .welcome-content.visible > *:nth-child(1) {
    animation: fadeInDown 0.8s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .welcome-content.visible > *:nth-child(2) {
    animation: fadeInUp 0.8s 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .welcome-content.visible > *:nth-child(3) {
    animation: fadeInUp 0.8s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .welcome-content.visible > *:nth-child(4) {
    animation: fadeInUp 0.8s 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .welcome-content.visible > *:nth-child(5) {
    animation: scaleIn 0.8s 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* ========================================
     8. PROBLEM CARDS ANIMATIONS
     ======================================== */

  /* Problem cards with warning style */
  .problem-card,
  [class*="border-left"][style*="#ef4444"],
  .card[style*="border-left"][style*="#ef4444"] {
    opacity: 0;
    transform: translateX(-30px);
  }

  .problem-card.visible,
  [class*="border-left"][style*="#ef4444"].visible,
  .card[style*="border-left"][style*="#ef4444"].visible {
    animation: slideInLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--animation-delay, 0s);
  }

  /* ========================================
     9. TESTIMONIALS & QUOTES
     ======================================== */

  /* Testimonial cards */
  .testimonial-card,
  .quote-box,
  blockquote {
    opacity: 0;
  }

  .testimonial-card.visible,
  .quote-box.visible,
  blockquote.visible {
    animation: fadeInUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* ========================================
     10. CTA SECTIONS
     ======================================== */

  /* Call to action sections */
  .cta-section,
  .cta-area,
  [class*="bg-primary"][class*="text-white"] {
    opacity: 0;
  }

  .cta-section.visible,
  .cta-area.visible,
  [class*="bg-primary"][class*="text-white"].visible {
    animation: scaleIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* CTA buttons special animation */
  .cta-section .btn,
  .cta-area .btn {
    opacity: 0;
    transform: translateY(20px);
  }

  .cta-section.visible .btn,
  .cta-area.visible .btn {
    animation: fadeInUp 0.6s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* ========================================
     11. PERFORMANCE OPTIMIZATIONS
     ======================================== */

  /* Disable animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Hardware acceleration for smooth animations */
  .animate-on-scroll,
  .card,
  .single-service,
  .single-feature,
  .widgets-services__single {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }

  /* Clean up after animation */
  .visible {
    will-change: auto;
  }
}

/* ========================================
   12. TOUCH FEEDBACK
   ======================================== */

@media (max-width: 768px) {
  /* Active state for touch devices */
  .card:active,
  .single-service:active,
  .single-feature:active,
  .widgets-services__single:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Ripple effect for buttons */
  .btn {
    position: relative;
    overflow: hidden;
  }

  .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }

  .btn:active::after {
    width: 300px;
    height: 300px;
  }
}