/* Animations */

/* Only animate if user prefers it */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll Reveal Classes (added via JS) */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal.slide-left {
    transform: translateX(-50px);
  }
  
  .reveal.slide-right {
    transform: translateX(50px);
  }

  .reveal.slide-left.active,
  .reveal.slide-right.active {
    transform: translateX(0);
  }

  /* Hover Effects */
  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
  }

  .step-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
  }

  /* Subtle floating animation for phone mockup */
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }

  .phone-mockup {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float-delay-1 {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
  }

  .fc-1 { animation: float-delay-1 5s ease-in-out infinite 1s; }
  .fc-2 { animation: float-delay-1 7s ease-in-out infinite 0.5s; }
  .fc-3 { animation: float-delay-1 6s ease-in-out infinite 2s; }
}