/* ==========================================================================
   ULTRA-PREMIUM ECOMMERCE PERFORMANCE AGENCY - ANIMATIONS (animations.css)
   Handcrafted to match exact motion specifications.
   Easing curve: cubic-bezier(0.16, 1, 0.3, 1) [ease-out-expo feel]
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAME DEFINITIONS
   -------------------------------------------------------------------------- */

/* Hero Radial Glow Background Drift Loop */
@keyframes radialGlowDrift {
  0% {
    transform: translate(-50%, -20%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-46%, -16%) scale(1.08);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -20%) scale(1);
    opacity: 0.8;
  }
}

/* Floating Dashboard Cards Idle Motion */
@keyframes floatCardIdle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Secondary Floating Card Idle Motion (Opposite phase) */
@keyframes floatCardIdleAlt {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Final CTA Pulse Glow Background Loop */
@keyframes ctaPulseGlow {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Button Breathing Glow Effect */
@keyframes buttonBreathingGlow {
  0%, 100% {
    box-shadow: 0 8px 24px -4px var(--accent-orange-glow);
  }
  50% {
    box-shadow: 0 12px 36px 0px rgba(255, 85, 0, 0.65);
  }
}

/* Number Pulse Animation (Triggered after count-up) */
@keyframes numberPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
    color: #FF7722;
  }
  100% {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   2. HERO ENTRANCE SEQUENCES
   -------------------------------------------------------------------------- */

.hero-eyebrow-entrance {
  opacity: 0;
  transform: translateY(15px);
  animation: heroFadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0s;
}

.hero-title-entrance {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}

.hero-subhead-entrance {
  opacity: 0;
  transform: translateY(15px);
  animation: heroFadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.8s;
}

.hero-cta-entrance {
  opacity: 0;
  transform: scale(0.95);
  animation: heroScaleFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1s;
}

.hero-dash-entrance {
  opacity: 0;
  transform: translateX(30px);
  animation: heroSlideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.2s;
}

@keyframes heroFadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroScaleFadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroSlideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Apply Continuous Idle Loops after Entrance */
.hero-bg-glow {
  animation: radialGlowDrift 15s infinite ease-in-out;
}

.floating-idle {
  animation: floatCardIdle 4s ease-in-out infinite;
}

.floating-idle-alt {
  animation: floatCardIdleAlt 4.5s ease-in-out infinite;
}

.btn-pulse-idle {
  animation: buttonBreathingGlow 2.5s infinite ease-in-out;
}

.cta-bg-glow {
  animation: ctaPulseGlow 4s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   3. SCROLL-TRIGGER INTERSECTIONOBSERVER CLASSES
   -------------------------------------------------------------------------- */

/* General Fade Slide Up */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from left */
.reveal-from-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-from-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in cards (0.9 -> 1) */
.reveal-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale-in.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delays for Children */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* SVG Checkmark Draw Animation */
.svg-checkmark-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s ease-out;
}

.revealed .svg-checkmark-path {
  stroke-dashoffset: 0;
}

/* SVG Line Draw Animation (Process Section) */
.process-line-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1s ease-out;
}

/* Number pulse class */
.number-pulse-complete {
  animation: numberPulse 0.5s ease-out;
}

/* Shake Animation for X Marks */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.animate-shake {
  animation: shakeX 0.45s ease-in-out;
}

/* Progress Bar Fill Animation */
@keyframes fillProgress {
  from { width: 0%; }
  to { width: 70%; }
}

.revealed .progress-bar-fill {
  animation: fillProgress 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hero Highlight Words Reveal */
@keyframes colorReveal {
  from {
    color: #6B7280;
    text-shadow: none;
  }
  to {
    color: var(--accent-orange);
    text-shadow: 0 0 15px rgba(255, 85, 0, 0.4);
  }
}

.hero-highlight-word {
  color: #6B7280;
  display: inline-block;
}

.hero-highlight-word.revealed {
  animation: colorReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}

/* Fast Urgency Pulsing Glow */
@keyframes buttonFastBreathingGlow {
  0%, 100% {
    box-shadow: 0 4px 14px -4px var(--accent-orange-glow);
  }
  50% {
    box-shadow: 0 10px 28px 0px rgba(255, 85, 0, 0.8);
  }
}

.btn-fast-pulse {
  animation: buttonFastBreathingGlow 1.8s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   4. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Disable continuous loops, pulses, floats, and glows */
  .floating-idle,
  .floating-idle-alt,
  .hero-bg-glow,
  .cta-bg-glow,
  .btn-pulse-idle,
  .btn-fast-pulse,
  .eyebrow-badge .dot {
    animation: none !important;
    transform: none !important;
  }

  /* Reset translations/scales but keep standard fades */
  .reveal-on-scroll,
  .reveal-from-left,
  .reveal-scale-in,
  .hero-eyebrow-entrance,
  .hero-title-entrance,
  .hero-subhead-entrance,
  .hero-cta-entrance,
  .hero-dash-entrance,
  .process-step-card,
  .team-card,
  .belief-item,
  .faq-item {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }

  /* Instant SVG drawing and fills */
  .process-line-path,
  .team-flow-line-path,
  .services-line-path,
  .retention-timeline-path,
  .svg-checkmark-path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}