/* ============================================================
   APEX Health Supply — animations.css
   Keyframes, scroll-reveal, transitions
   ============================================================ */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes waveFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes pulse-teal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,140,140,0.35); }
  50%       { box-shadow: 0 0 0 12px rgba(14,140,140,0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--from-left {
  transform: translateX(-28px);
}

.reveal--from-right {
  transform: translateX(28px);
}

.reveal--scale {
  transform: scale(0.92);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays */
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }
.reveal--delay-5 { transition-delay: 0.40s; }
.reveal--delay-6 { transition-delay: 0.48s; }

/* ── Hero entrance animation (runs once, no JS needed) ── */
.hero-animate-1 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.hero-animate-2 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.hero-animate-3 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.hero-animate-4 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }

/* ── Hover Utilities ── */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── Floating decoration ── */
.float-anim {
  animation: waveFloat 4s ease-in-out infinite;
}

/* ── Pulsing icon ── */
.pulse-anim {
  animation: pulse-teal 2.5s ease-in-out infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--from-left,
  .reveal--from-right,
  .reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3,
  .hero-animate-4 {
    animation: none;
    opacity: 1;
  }

  .float-anim,
  .pulse-anim {
    animation: none;
  }
}