/* =====================================================================
   animations.css — Keyframes, transitions, scroll-reveal, nav morph
   ===================================================================== */

/* -----------------------------------------------------------------
   Marquee
----------------------------------------------------------------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -----------------------------------------------------------------
   Scroll-reveal — sections get .reveal in HTML;
   IntersectionObserver in main.js adds .revealed
----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------
   Button micro-interactions
----------------------------------------------------------------- */
.btn:hover  { transform: translateY(-1px) scale(1.03); }
.btn:active { transform: scale(0.97); }

/* -----------------------------------------------------------------
   Hamburger → × morph
   .nav-toggle.active triggers the cross shape
----------------------------------------------------------------- */
.nav-toggle span {
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity   160ms ease,
              background 200ms ease;
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* -----------------------------------------------------------------
   Mobile nav panel slide-in from right
----------------------------------------------------------------- */
.mobile-nav {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-backdrop {
  transition: opacity 320ms ease;
}

/* Mobile nav link stagger-in when panel opens */
.mobile-nav-link {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.mobile-nav.is-open .mobile-nav-link:nth-child(1),
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(1) { transition-delay:  60ms; opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-link:nth-child(2),
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-link:nth-child(3),
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(3) { transition-delay: 140ms; opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-link:nth-child(4),
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-link:nth-child(5),
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(5) { transition-delay: 220ms; opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-link:nth-child(6),
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(6) { transition-delay: 260ms; opacity: 1; transform: none; }

/* -----------------------------------------------------------------
   prefers-reduced-motion — disable all non-essential animation
----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mobile-nav,
  .mobile-nav-backdrop {
    transition: none;
  }
  .nav-toggle span {
    transition: none;
  }
  .mobile-nav-link {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover  { transform: none; }
  .btn:active { transform: none; }
  .marquee-track { animation: none; }
  .feature-card:hover,
  .benefit-card:hover,
  .price-card:hover { transform: none; }
}