/* ============================================
   RideLog — Animations & Keyframes
   Scroll animations, parallax classes, transitions
   ============================================ */

/* --- Scroll Animation Base --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* --- Directional Animations --- */
.animate-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.animate-fade-in.animated {
  opacity: 1;
}

.animate-slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slide-left.animated {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slide-right.animated {
  opacity: 1;
  transform: translateX(0);
}

.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-scale-in.animated {
  opacity: 1;
  transform: scale(1);
}

/* --- Stagger Delays --- */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* --- Keyframe Animations --- */

/* Floating effect for hero mockup */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139, 154, 70, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(139, 154, 70, 0.6), 0 0 80px rgba(139, 154, 70, 0.2);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Shield pulse for privacy section */
@keyframes shield-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(139, 154, 70, 0.4));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(139, 154, 70, 0.7));
  }
}

.animate-shield-pulse {
  animation: shield-pulse 3s ease-in-out infinite;
}

/* Background particles */
@keyframes particle-drift {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

/* Counter number grow */
@keyframes countup-highlight {
  0% { color: var(--text-primary); }
  50% { color: var(--accent-green-light); }
  100% { color: var(--text-primary); }
}

/* Gradient text shimmer */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient-text {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* Spin (for loading states) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- NEW: Hero Glow Orb Pulse --- */
@keyframes orb-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* --- NEW: Section Glow Pulse --- */
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* --- NEW: Counter Glow --- */
@keyframes counter-glow {
  0% {
    text-shadow: 0 0 10px rgba(139, 154, 70, 0.8), 0 0 20px rgba(139, 154, 70, 0.4);
  }
  100% {
    text-shadow: none;
  }
}

/* --- NEW: Privacy Radar Ring Expand --- */
@keyframes ring-expand {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* --- NEW: Star Pop (testimonials) --- */
@keyframes star-pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.3) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* --- NEW: CTA Button Glow --- */
@keyframes button-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(139, 154, 70, 0.3);
  }
  50% {
    box-shadow: 0 4px 30px rgba(139, 154, 70, 0.5), 0 0 40px rgba(139, 154, 70, 0.2);
  }
}

/* --- Parallax --- */
.parallax-element {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-fade-in,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float,
  .animate-pulse-glow,
  .animate-shield-pulse,
  .animate-gradient-text {
    animation: none;
  }

  .hero-glow-orb,
  .privacy-icon .ring {
    animation: none;
  }

  .section-route-sharing::after,
  .section-discover::after {
    animation: none;
  }

  .rating-stars .icon {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .cta-section .btn--primary {
    animation: none;
  }

  .brand-stat-number.glow {
    animation: none;
  }

  .parallax-element {
    transform: none !important;
  }
}