/* ================================================================
   NETACHEM — Animations
   ================================================================ */

/* === Hero entrance === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-tagline-top { animation: fadeInUp 0.8s ease 0.3s both; }
.hero h1          { animation: fadeInUp 0.8s ease 0.5s both; }
.hero-sub         { animation: fadeInUp 0.8s ease 0.7s both; }
.hero-ctas        { animation: fadeInUp 0.8s ease 0.9s both; }
.hero-tagline-bottom { animation: fadeInUp 0.8s ease 1.05s both; }

/* === Scroll reveal === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.stagger-1 { transition-delay: 0.00s; }
.stagger-2 { transition-delay: 0.08s; }
.stagger-3 { transition-delay: 0.16s; }
.stagger-4 { transition-delay: 0.24s; }
.stagger-5 { transition-delay: 0.32s; }
.stagger-6 { transition-delay: 0.40s; }
.stagger-7 { transition-delay: 0.48s; }
.stagger-8 { transition-delay: 0.56s; }

/* === Button hover lift === */
.btn-primary {
  transition: background-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}