/* ==========================================================================
   ESWP ANIMATIONS — Premium UX Enhancement Layer
   Phase 1 + Phase 2 + Phase 3 — Added on top of existing animation system.
   All existing animations in main.css and components.css are preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PHASE 1 — CSS Micro-interactions
   -------------------------------------------------------------------------- */

/* Button active press state — subtle scale down on click */
.eswp-btn:active {
  transform: scale(0.98) translateY(0) !important;
  transition-duration: 80ms !important;
}

/* Hero buttons active states */
.eswp-btn-hero-primary:active,
.eswp-btn-hero-whatsapp:active {
  transform: scale(0.98) translateY(0) !important;
  transition-duration: 80ms !important;
}

/* Service card icon — subtle scale on hover */
.eswp-service-card:hover .eswp-service-card__icon {
  transform: scale(1.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure the icon transition base is always set */
.eswp-service-card__icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Trust card hover micro-lift */
.eswp-trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 102, 204, 0.10);
  border-color: rgba(2, 132, 199, 0.25) !important;
}

/* --------------------------------------------------------------------------
   PHASE 1 — Extended stagger delay classes
   Existing delays go up to .eswp-reveal-delay-4 in main.css
   -------------------------------------------------------------------------- */
.eswp-reveal-delay-5 { transition-delay: 0.5s; }
.eswp-reveal-delay-6 { transition-delay: 0.6s; }
.eswp-reveal-delay-7 { transition-delay: 0.7s; }

/* --------------------------------------------------------------------------
   PHASE 2 — Review cards stagger classes
   -------------------------------------------------------------------------- */
.eswp-stagger-1 { transition-delay: 0.08s; }
.eswp-stagger-2 { transition-delay: 0.16s; }
.eswp-stagger-3 { transition-delay: 0.24s; }
.eswp-stagger-4 { transition-delay: 0.32s; }

/* --------------------------------------------------------------------------
   PHASE 1 — Form control refined transition (extends existing focus styles)
   -------------------------------------------------------------------------- */
.eswp-form-control {
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease !important;
}

.eswp-form-control:focus {
  background-color: #fafcff !important;
}

/* --------------------------------------------------------------------------
   PHASE 3 — CTA Banner very subtle gradient animation
   12s cycle, very low intensity — professional, never distracting.
   -------------------------------------------------------------------------- */
@keyframes eswpCtaGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.eswp-cta-banner-strip-wrap {
  background-size: 200% 100%;
  animation: eswpCtaGradientShift 12s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — Comprehensive prefers-reduced-motion coverage
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* Show all reveal content immediately — no hidden content for a11y */
  .eswp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .eswp-reveal.eswp-revealed {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable all stagger delays */
  .eswp-reveal-delay-1, .eswp-reveal-delay-2,
  .eswp-reveal-delay-3, .eswp-reveal-delay-4,
  .eswp-reveal-delay-5, .eswp-reveal-delay-6, .eswp-reveal-delay-7,
  .eswp-stagger-1, .eswp-stagger-2,
  .eswp-stagger-3, .eswp-stagger-4 {
    transition-delay: 0s !important;
  }

  /* Disable keyframe entrance animations */
  .eswp-animate-fade-left,
  .eswp-animate-fade-up,
  .eswp-animate-grow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable brand marquee */
  .eswp-brand-marquee-track {
    animation: none !important;
    transform: translateX(0) !important;
  }

  /* Disable hero slide content animations */
  .eswp-hero-content-slide.active .eswp-hero-eyebrow,
  .eswp-hero-content-slide.active .eswp-hero-title,
  .eswp-hero-content-slide.active .eswp-hero-title-accent,
  .eswp-hero-content-slide.active .eswp-hero-subtitle,
  .eswp-hero-content-slide.active .eswp-hero-actions,
  .eswp-hero-content-slide.active .eswp-hero-trust-cards {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .eswp-hero-content-slide {
    transition: none !important;
  }

  /* Disable hero progress bar */
  .eswp-hero-nav-dot.active .eswp-hero-nav-progress {
    animation: none !important;
    width: 100% !important;
  }

  /* Disable CTA gradient */
  .eswp-cta-banner-strip-wrap {
    animation: none !important;
    background-position: 0% 50% !important;
  }

  /* Disable floating sphere animations */
  .eswp-float-fast,
  .eswp-float-slow {
    animation: none !important;
  }

  /* Disable button active transforms */
  .eswp-btn:active,
  .eswp-btn-hero-primary:active,
  .eswp-btn-hero-whatsapp:active {
    transform: none !important;
    transition: none !important;
  }

  /* Disable service card icon scale */
  .eswp-service-card:hover .eswp-service-card__icon {
    transform: none !important;
    transition: none !important;
  }

  /* Disable trust card hover lift */
  .eswp-trust-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Disable product card and image hover */
  .eswp-product-card:hover {
    transform: none !important;
  }

  .eswp-product-card:hover img,
  .eswp-product-card:hover .eswp-product-card__image {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — Reduce hover-dependent effects on touch devices
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .eswp-service-card:hover .eswp-service-card__icon {
    transform: none;
  }

  .eswp-trust-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Touch press — slight tactile feedback */
  .eswp-btn:active {
    transform: scale(0.97) !important;
  }
}

/* --------------------------------------------------------------------------
   PERFORMANCE — GPU compositing hints
   -------------------------------------------------------------------------- */
.eswp-brand-marquee-track {
  will-change: transform;
}

.eswp-hero-slide.active,
.eswp-hero-content-slide.active {
  will-change: transform, opacity;
}

/* Release will-change after reveal completes to free GPU memory */
.eswp-reveal.eswp-revealed {
  will-change: auto;
}