/* ============================================
   HOPE Foundation — Animations
   ============================================ */

/* Keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.2; }
  50% { transform: translateY(-30px) scale(1.5); opacity: 0.6; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(2deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}

/* Reveal classes */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-zoom { opacity: 0; transform: scale(0.85); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-zoom.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.s1 { transition-delay: 0.1s; }
.s2 { transition-delay: 0.2s; }
.s3 { transition-delay: 0.3s; }
.s4 { transition-delay: 0.4s; }
.s5 { transition-delay: 0.5s; }
.s6 { transition-delay: 0.6s; }
.s7 { transition-delay: 0.7s; }
.s8 { transition-delay: 0.8s; }

/* Hero animations — fade only (no slide up / down) */
@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-content h1 { animation: fadeOnly 1s ease both; }
.hero-content p { animation: fadeOnly 1s ease 0.2s both; }
.hero-quote { animation: fadeOnly 1s ease 0.35s both; }
.hero-badges { animation: fadeOnly 0.8s ease both; }
.hero-buttons { animation: fadeOnly 1s ease 0.5s both; }
.hero-stats,
.hero-stats-bar { animation: fadeOnly 1s ease 0.7s both; }

/* Hover lift */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ========== HOMEPAGE: fade only — NO slide from bottom ========== */
@keyframes imgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes heroBgFade {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* Kill slide-up / slide-in on homepage reveals — opacity only */
.home-page .reveal,
.home-page .reveal-left,
.home-page .reveal-right,
.home-page .reveal-zoom {
  opacity: 0;
  transform: none !important;
  transition: opacity 1s ease !important;
}
.home-page .reveal.visible,
.home-page .reveal-left.visible,
.home-page .reveal-right.visible,
.home-page .reveal-zoom.visible {
  opacity: 1;
  transform: none !important;
}

.home-page .hero-bg {
  transform: none !important;
  animation: imgFadeIn 1.8s ease both, heroBgFade 10s ease-in-out 1.8s infinite alternate;
}

.home-page img.img-fade,
.home-page .img-fade img,
.home-page .about-collage img,
.home-page .home-gallery-grid img,
.home-page .donation-bar-img img,
.home-page .news-card img,
.home-page .story-author img,
.home-page .ambulance-banner-bg {
  opacity: 0;
  transform: none !important;
  transition: opacity 1.2s ease !important;
}
.home-page img.img-fade.visible,
.home-page .img-fade.visible img,
.home-page .img-fade.visible,
.home-page .about-collage.visible img,
.home-page .home-gallery.visible .home-gallery-grid img,
.home-page .donation-bar.visible .donation-bar-img img,
.home-page .news-card.visible img,
.home-page .story-card.visible .story-author img,
.home-page img.is-visible {
  opacity: 1;
  transform: none !important;
}

/* Image reveal */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal img {
  transition: transform 0.8s ease, filter 0.8s ease;
}
.img-reveal:hover img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Magnetic button effect */
.btn { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, background 0.3s ease; }

/* Ripple effect on buttons */
.btn {
  position: relative;
  overflow: hidden;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

/* Gradient text */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Loading spinners */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Animated underline for nav */
.nav-menu li a { position: relative; }
.nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}
.nav-menu li a:hover::after,
.nav-menu li a.active::after { transform: scaleX(1); }

/* Gallery hover zoom */
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  transition: transform 0.6s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.7), transparent);
  opacity: 0;
  transition: var(--transition);
  display: flex; align-items: flex-end; padding: 20px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
}

/* FAQ accordion */
.faq-item { overflow: hidden; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 25px 20px;
}
.faq-question i { transition: transform 0.3s ease; }
.faq-item.active .faq-question i { transform: rotate(180deg); }

/* Page transition */
.page-enter { animation: fadeInUp 0.6s ease; }

/* Floating medical icons background */
.floating-icons {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.floating-icons i {
  position: absolute;
  color: rgba(255,255,255,0.03);
  font-size: 4rem;
  animation: floatIcon 8s ease-in-out infinite;
}