/* ==========================================================================
   ANIMATIONS
   Scroll-reveal utility classes (activated via IntersectionObserver in
   scroll.js by adding the .in-view class) + keyframes used across the site.
   ========================================================================== */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Base reveal states */
.reveal {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.in-view { opacity: 1; }

.fade-up { transform: translateY(42px); }
.fade-up.in-view { transform: translateY(0); }

.fade-down { transform: translateY(-42px); }
.fade-down.in-view { transform: translateY(0); }

.fade-left { transform: translateX(-48px); }
.fade-left.in-view { transform: translateX(0); }

.fade-right { transform: translateX(48px); }
.fade-right.in-view { transform: translateX(0); }

.zoom-in { transform: scale(0.9); }
.zoom-in.in-view { transform: scale(1); }

/* Stagger children helper: apply delay via inline style --delay in HTML,
   or use these nth-child fallbacks for grids up to 8 items */
.stagger .reveal:nth-child(1) { transition-delay: 0.05s; }
.stagger .reveal:nth-child(2) { transition-delay: 0.15s; }
.stagger .reveal:nth-child(3) { transition-delay: 0.25s; }
.stagger .reveal:nth-child(4) { transition-delay: 0.35s; }
.stagger .reveal:nth-child(5) { transition-delay: 0.45s; }
.stagger .reveal:nth-child(6) { transition-delay: 0.55s; }
.stagger .reveal:nth-child(7) { transition-delay: 0.65s; }
.stagger .reveal:nth-child(8) { transition-delay: 0.75s; }
.stagger .reveal:nth-child(9) { transition-delay: 0.85s; }

/* Hero entrance sequence (auto-plays on load, no observer needed) */
.hero-eyebrow, .hero h1, .hero p.lead, .hero-actions, .hero-stats {
  opacity: 0;
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-eyebrow { animation-delay: 0.15s; }
.hero h1 { animation-delay: 0.3s; }
.hero p.lead { animation-delay: 0.45s; }
.hero-actions { animation-delay: 0.6s; }
.hero-stats { animation-delay: 0.75s; }

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

/* Gradient animation for accent backgrounds */
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating ambient shapes (used behind hero / CTA sections) */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: floatShape 10s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.08); }
}

/* Card hover lift is defined in style.css via transform transitions;
   this file adds shared micro-interactions */
.icon-badge, .accordion-icon { transition: transform var(--transition-fast); }
.feature-card:hover .icon-badge,
.mv-card:hover .icon-badge { transform: rotate(-8deg) scale(1.08); }

/* Pulsing dot used in hero eyebrow */
.hero-eyebrow .dot { animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Counter number tick - subtle scale on completion, triggered via JS class */
.count.counted { animation: countPop 0.4s ease; }
@keyframes countPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Loading dots (used if needed inside buttons/forms) */
.loading-dots span {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 2px;
  animation: loadingDots 1.2s infinite ease-in-out;
}
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loadingDots {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Marquee-style logo/industry strip (optional use) */
.marquee-track { animation: marquee 24s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}