/* animations.css — Premium NGO animations, lightweight, no library deps */

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

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

@keyframes heroBgFade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--secondary) / 0.35); }
  50%       { box-shadow: 0 0 0 10px hsl(var(--secondary) / 0); }
}

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

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

@keyframes progressFill {
  from { width: 0; }
}

/* ── Hero image entrance ─────────────────────────────────────── */
.hero__bg-img {
  animation: heroBgFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Hero text stagger ───────────────────────────────────────── */
.hero-stagger-1 { animation: fadeInUp 0.7s 0.2s ease-out both; }
.hero-stagger-2 { animation: fadeInUp 0.7s 0.4s ease-out both; }
.hero-stagger-3 { animation: fadeInUp 0.7s 0.6s ease-out both; }
.hero-stagger-4 { animation: fadeInUp 0.7s 0.8s ease-out both; }

/* ── Basic helpers ───────────────────────────────────────────── */
.animate-fade-in-up   { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in      { animation: fadeIn 0.6s ease-out forwards; }
.animate-count-up     { animation: countUp 0.8s ease-out forwards; }
.animate-slide-left   { animation: slideInLeft 0.6s ease-out forwards; }
.animate-slide-right  { animation: slideInRight 0.6s ease-out forwards; }

/* ── Scroll reveal system ────────────────────────────────────── */
.reveal-up,
.reveal-scale,
.reveal-left,
.reveal-right {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal-up    { transform: translateY(22px); }
.reveal-scale { transform: translateY(14px) scale(0.985); }
.reveal-left  { transform: translateX(-22px); }
.reveal-right { transform: translateX(22px); }

.reveal-up,
.reveal-scale,
.reveal-left,
.reveal-right {
  transition:
    opacity  650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible,
.reveal-scale.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 400ms; }

/* ── Media zoom on hover ─────────────────────────────────────── */
.media-zoom-wrap { overflow: hidden; }
.media-zoom {
  transform: scale(var(--scroll-zoom, 1));
  transform-origin: center center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.media-zoom-wrap:hover .media-zoom { transform: scale(1.05); }

/* ── Donate pulse button ─────────────────────────────────────── */
.btn-pulse { animation: pulseGlow 2.2s ease-in-out infinite; }

/* ── Icon float (trust/stats icons) ─────────────────────────── */
.icon-float { animation: float 3s ease-in-out infinite; }

/* ── Stat bar fill ───────────────────────────────────────────── */
.stat-bar {
  height: 4px;
  background: hsl(var(--border));
  border-radius: 2px;
  overflow: hidden;
}
.stat-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)));
  border-radius: 2px;
  animation: progressFill 1.4s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Shimmer skeleton (loading placeholder) ─────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 25%,
    hsl(var(--border)) 50%,
    hsl(var(--muted)) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.6s linear infinite;
}

/* ── Testimonial quote entrance ──────────────────────────────── */
.testimonial-card { transition: transform 300ms ease, box-shadow 300ms ease; }
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -12px rgb(0 0 0 / 0.14);
}

/* ── Respect prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-scale, .reveal-left, .reveal-right,
  [data-reveal], .hero__bg-img, .hero-stagger-1, .hero-stagger-2,
  .hero-stagger-3, .hero-stagger-4, .animate-fade-in-up,
  .animate-fade-in, .animate-slide-left, .animate-slide-right,
  .media-zoom, .btn-pulse, .icon-float {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}