/* ============================================================
   LUSWEPO AUTOMOTIVE — animations.css
   ============================================================
   TIP: To disable ALL animations (e.g. for testing) just
   remove the <link> to this file in each HTML page.
   ============================================================ */

/* ── Fade-in on scroll ──────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.stagger > *:nth-child(1) { transition-delay: .05s; }
.stagger > *:nth-child(2) { transition-delay: .12s; }
.stagger > *:nth-child(3) { transition-delay: .19s; }
.stagger > *:nth-child(4) { transition-delay: .26s; }
.stagger > *:nth-child(5) { transition-delay: .33s; }
.stagger > *:nth-child(6) { transition-delay: .40s; }

/* ── Navbar slide-down on load ──────────────────────────────── */
@keyframes navSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

#navbar { animation: navSlide .5s ease forwards; }

/* ── Hero content entrance ──────────────────────────────────── */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-label   { animation: heroFade .6s .2s ease both; }
.hero-title   { animation: heroFade .6s .35s ease both; }
.hero-desc    { animation: heroFade .6s .5s ease both; }
.hero-actions { animation: heroFade .6s .62s ease both; }
.hero-stats   { animation: heroFade .6s .75s ease both; }

/* ── Page hero entrance ─────────────────────────────────────── */
.page-hero .breadcrumb    { animation: heroFade .5s .1s ease both; }
.page-hero .section-label { animation: heroFade .5s .2s ease both; }
.page-hero .section-title { animation: heroFade .6s .3s ease both; }
.page-hero .page-hero-desc { animation: heroFade .6s .42s ease both; }

/* ── Hover lift utility ─────────────────────────────────────── */
.hover-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15,19,64,.15);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
}