/* ================================================
   2H&G Animations — animations.css
   ================================================ */

/* --- Fade In --- */
.anim-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* --- Slide Up --- */
.anim-slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Stagger delays for card groups */
.cards--three .anim-slide-up:nth-child(1) { transition-delay: 0s; }
.cards--three .anim-slide-up:nth-child(2) { transition-delay: 0.12s; }
.cards--three .anim-slide-up:nth-child(3) { transition-delay: 0.24s; }

.science-grid .anim-slide-up:nth-child(1) { transition-delay: 0s; }
.science-grid .anim-slide-up:nth-child(2) { transition-delay: 0.12s; }
.science-grid .anim-slide-up:nth-child(3) { transition-delay: 0.2s; }
.science-grid .anim-slide-up:nth-child(4) { transition-delay: 0.28s; }

/* --- Count Up Number Pulse --- */
@keyframes numberPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.hero__number.counted {
  animation: numberPulse 0.5s ease;
}