/* ============================================
   AUVANO ANIMATIONS — animations.css
   ============================================ */

/* ---------- Gradient Shimmer (Hero text) ---------- */
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Hero Background Drift ---------- */
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-40px, 30px) scale(1.05); }
  50% { transform: translate(20px, -20px) scale(0.95); }
  75% { transform: translate(30px, 40px) scale(1.02); }
}

@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.03); }
  50% { transform: translate(-20px, 30px) scale(0.97); }
  75% { transform: translate(-40px, -20px) scale(1.05); }
}

@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 20px) scale(1.04); }
  66% { transform: translate(-30px, -30px) scale(0.96); }
}

/* ---------- Scroll Line (Hero bottom) ---------- */
@keyframes scrollLine {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  30% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
  60% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ---------- Logo Scroll (Integrations Bar) ---------- */
@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Code Scroll (Hero Terminal) ---------- */
@keyframes codeScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ---------- Fade In ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Pulse Ring (Phone icon, Globe markers) ---------- */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(203, 164, 74, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(203, 164, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(203, 164, 74, 0);
  }
}

/* ---------- Pulse Dot (Flat map markers) ---------- */
@keyframes pulse-dot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(203, 164, 74, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(203, 164, 74, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(203, 164, 74, 0);
  }
}

/* ---------- Chat Bubble In ---------- */
@keyframes bubbleIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- Globe Marker Pulse ---------- */
@keyframes globePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ---------- Counter Glow ---------- */
@keyframes counterGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(203, 164, 74, 0.2);
  }
  50% {
    text-shadow: 0 0 40px rgba(203, 164, 74, 0.4);
  }
}

/* ---------- Tab Panel Stagger ---------- */
@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Nav Slide Down ---------- */
@keyframes navSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ---------- Floating particles (subtle) ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Typing Indicator ---------- */
@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes typingShow {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Equalizer Bars ---------- */
@keyframes equalizerBar {
  0%, 100% { height: 30%; }
  25% { height: 80%; }
  50% { height: 50%; }
  75% { height: 90%; }
}

/* ---------- Pricing Card Hover Glow ---------- */
@keyframes cardGlow {
  0%, 100% {
    box-shadow: 0 0 30px rgba(203, 164, 74, 0.1);
  }
  50% {
    box-shadow: 0 0 50px rgba(203, 164, 74, 0.2);
  }
}

/* Hero entrance — clean stagger, no bounce */
.hero__title,
.hero__sub,
.hero__ctas,
.hero__trust {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero__title  { animation-delay: 0.05s; }
.hero__sub    { animation-delay: 0.15s; }
.hero__ctas   { animation-delay: 0.25s; }
.hero__trust  { animation-delay: 0.35s; }

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

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__gradient,
  .ticker__content,
  .phone-mockup__bubble,
  .phone-mockup__status-item,
  .hero__scroll-line,
  .gradient-text {
    animation: none !important;
  }

  .phone-mockup__bubble,
  .phone-mockup__status-item {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}