/* ============================================================
   ANIMATIONS.CSS — Association of Community Development
   ============================================================
   Shared animation library for the ACD premium NGO website.
   Covers scroll-reveals, glassmorphism, glow effects, button
   & card micro-interactions, parallax, marquee, and more.

   Brand palette:
     Teal    #2B8FBF    Green   #3BAD8A    Coral   #C94F3A
     Orange  #E8892A    Purple  #7B4CA0    Cream   #FDF6EF
     Dark    #1a1a2e    Night   #0f0f1e

   Fonts:
     Body    'DM Sans', sans-serif
     Headings 'Playfair Display', serif
   ============================================================ */


/* ============================================================
   1. SCROLL-REVEAL ANIMATIONS
   Used with IntersectionObserver: add .visible when in view.
   ============================================================ */

/* Base reveal — invisible until triggered */
.reveal {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Revealed state */
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Direction variants — starting positions */
.reveal-up {
  transform: translateY(60px);
}

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

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

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

.reveal-fade {
  /* Opacity-only; no transform needed — base .reveal handles it */
  transform: none;
}

/* Stagger delays for sequential child reveals */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }


/* ============================================================
   2. ANIMATED GRADIENT BACKGROUND
   Apply to hero sections, banners, or full-bleed containers.
   ============================================================ */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient-bg {
  background: linear-gradient(
    135deg,
    #2B8FBF 0%,
    #3BAD8A 25%,
    #7B4CA0 50%,
    #C94F3A 75%,
    #E8892A 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}


/* ============================================================
   3. GLASSMORPHISM UTILITIES
   Frosted-glass cards for overlays and floating panels.
   ============================================================ */

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
}

/* Dark variant — for cards on light backgrounds needing depth */
.glass-dark {
  background: rgba(15, 15, 30, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}


/* ============================================================
   4. GLOW EFFECTS
   Pulsing coloured glows for CTAs, icons, feature highlights.
   ============================================================ */

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow-color); }
  50%      { box-shadow: 0 0 20px 6px var(--glow-color); }
}

.glow-teal {
  --glow-color: rgba(43, 143, 191, 0.45);
  animation: glowPulse 2.4s ease-in-out infinite;
}

.glow-coral {
  --glow-color: rgba(201, 79, 58, 0.45);
  animation: glowPulse 2.4s ease-in-out infinite;
}

.glow-purple {
  --glow-color: rgba(123, 76, 160, 0.45);
  animation: glowPulse 2.4s ease-in-out infinite;
}


/* ============================================================
   5. TEXT SHIMMER
   Shimmering gradient text for headings and accents.
   ============================================================ */

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

.shimmer-text {
  background: linear-gradient(
    90deg,
    #2B8FBF 0%,
    #3BAD8A 25%,
    #7B4CA0 50%,
    #C94F3A 75%,
    #2B8FBF 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s linear infinite;
}


/* ============================================================
   6. FLOAT ANIMATION
   Gentle bobbing for decorative elements, badges, icons.
   ============================================================ */

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

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

.float {
  animation: float 3s ease-in-out infinite;
  will-change: transform;
}

.float-slow {
  animation: floatSlow 5s ease-in-out infinite;
  will-change: transform;
}

.float-delay-1 {
  animation-delay: 0.5s;
}

.float-delay-2 {
  animation-delay: 1s;
}


/* ============================================================
   7. BUTTON EFFECTS
   Premium micro-interactions for CTAs and action buttons.
   ============================================================ */

/* --- 7a. Ripple effect ----------------------------------- */
.btn-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* creates a new stacking context */
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.btn-ripple:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
  /* Restart animation on click via instant reset */
  transition: width 0s, height 0s, opacity 0s;
}

/* Re-trigger: when released, the transition plays out */
.btn-ripple:not(:active)::after {
  transition: width 0.6s ease, height 0.6s ease, opacity 0.8s ease;
}

/* --- 7b. Magnetic button (JS handles translateX/Y) ------- */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* --- 7c. Glow on hover ----------------------------------- */
.btn-glow {
  transition: box-shadow 0.35s ease, transform 0.3s ease;
}

.btn-glow:hover {
  box-shadow:
    0 0 12px rgba(43, 143, 191, 0.35),
    0 0 40px rgba(43, 143, 191, 0.15);
  transform: translateY(-2px);
}

/* --- 7d. Shine sweep on hover ---------------------------- */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: 1;
}

.btn-shine:hover::before {
  left: 120%;
}


/* ============================================================
   8. CARD EFFECTS
   Rich hover interactions for cause cards, team cards, etc.
   ============================================================ */

/* --- 8a. Tilt on hover ----------------------------------- */
.card-tilt {
  perspective: 1000px;
  transition: transform 0.4s ease;
}

.card-tilt:hover {
  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
}

/* --- 8b. Hover lift with enhanced shadow ----------------- */
.card-hover-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}

.card-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 60px rgba(26, 26, 46, 0.12),
    0 8px 24px rgba(26, 26, 46, 0.08);
}

/* --- 8c. Animated gradient border ------------------------ */
@keyframes borderGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card-glow-border {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

/* Gradient border via pseudo-element behind the card content */
.card-glow-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    #2B8FBF,
    #3BAD8A,
    #7B4CA0,
    #C94F3A,
    #E8892A,
    #2B8FBF
  );
  background-size: 300% 300%;
  animation: borderGlow 6s ease infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}


/* ============================================================
   9. PARTICLE CANVAS CONTAINER
   Positioned overlay for JS-driven particle effects.
   ============================================================ */

.particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}


/* ============================================================
   10. WAVE DIVIDER
   Smooth organic section transitions via clip-path wave.
   ============================================================ */

.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider::before {
  content: '';
  display: block;
  width: 100%;
  height: 80px;
  background: inherit;
  clip-path: polygon(
    0% 60%,
    4% 55%,
    8% 48%,
    12% 42%,
    16% 38%,
    20% 35%,
    25% 34%,
    30% 36%,
    35% 40%,
    40% 46%,
    45% 52%,
    50% 55%,
    55% 54%,
    60% 50%,
    65% 44%,
    70% 38%,
    75% 34%,
    80% 33%,
    85% 36%,
    90% 42%,
    95% 50%,
    100% 60%,
    100% 100%,
    0% 100%
  );
}

/* Alternate: wave with SVG for smoother curves */
.wave-divider-svg {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider-svg svg {
  display: block;
  width: 100%;
  height: 80px;
}


/* ============================================================
   11. ANIMATED UNDERLINE FOR LINKS
   Sliding underline that expands from left on hover.
   ============================================================ */

.animated-underline {
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #2B8FBF, #3BAD8A);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.animated-underline:hover::after {
  width: 100%;
}


/* ============================================================
   12. PULSING DOT — Live indicators, status badges
   ============================================================ */

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.5); opacity: 0.4; }
  100% { transform: scale(1);   opacity: 1; }
}

.pulse-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3BAD8A;
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* Colour variants */
.pulse-dot--coral  { background: #C94F3A; }
.pulse-dot--teal   { background: #2B8FBF; }
.pulse-dot--purple { background: #7B4CA0; }


/* ============================================================
   13. COUNTER / TABULAR NUMBER STYLING
   Smooth transitions for JS-driven counting animations.
   ============================================================ */

.counter-number {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: inline-block;
  will-change: transform, opacity;
}


/* ============================================================
   14. PARALLAX LAYER
   Base class for JS-driven parallax scroll elements.
   ============================================================ */

.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
  pointer-events: none;
}

/* Depth variants — slower layers feel further away */
.parallax-layer--slow {
  will-change: transform;
  transition: transform 0.15s linear;
}

.parallax-layer--fast {
  will-change: transform;
  transition: transform 0.05s linear;
}


/* ============================================================
   15. HERO ENTRANCE ANIMATIONS (one-shot)
   Staggered entrance for hero elements on page load.
   ============================================================ */

@keyframes heroSlideIn {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroBadgePop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.hero-animate-1 {
  opacity: 0;
  animation: heroSlideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-animate-2 {
  opacity: 0;
  animation: heroSlideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-animate-3 {
  opacity: 0;
  animation: heroSlideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* Badge pop — enters after hero text has settled */
.hero-badge-pop {
  opacity: 0;
  animation: heroBadgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}


/* ============================================================
   16. MARQUEE ANIMATION
   Infinite horizontal scroll for logos, testimonials, partners.
   ============================================================ */

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

/* Pause on hover for usability */
.marquee-track:hover {
  animation-play-state: paused;
}

/* Reverse direction variant */
.marquee-track--reverse {
  animation-direction: reverse;
}


/* ============================================================
   17. SMOOTH SCROLL INDICATOR
   Bouncing arrow prompting users to scroll down.
   ============================================================ */

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%                      { transform: translateY(10px); }
  60%                      { transform: translateY(5px); }
}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  animation: scrollBounce 2.5s ease infinite;
}

.scroll-indicator__arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid #2B8FBF;
  border-bottom: 2px solid #2B8FBF;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover .scroll-indicator__arrow {
  opacity: 1;
}

.scroll-indicator__text {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
}


/* ============================================================
   BONUS: UTILITY HELPERS
   ============================================================ */

/* Smooth scroll for anchor navigation */
html {
  scroll-behavior: smooth;
}

/* GPU-accelerated compositing hints */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Fade in/out utility */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

/* Spin — for loading indicators */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Scale pop — for notification badges, tooltips */
@keyframes scalePop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.scale-pop {
  animation: scalePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ============================================================
   ♿ ACCESSIBILITY: REDUCED MOTION
   Respects user system preferences. Disables all non-essential
   animations and transitions for users who prefer reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Kill all animations globally */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements immediately — no scroll animation */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade {
    transform: none !important;
  }

  /* Stagger delays — remove */
  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5,
  .stagger-6 {
    transition-delay: 0s !important;
  }

  /* Static gradient — no shift */
  .animated-gradient-bg {
    animation: none !important;
  }

  /* Remove glow pulsing */
  .glow-teal,
  .glow-coral,
  .glow-purple {
    animation: none !important;
    box-shadow: none !important;
  }

  /* Shimmer text — solid gradient, no motion */
  .shimmer-text {
    animation: none !important;
  }

  /* Float — static position */
  .float,
  .float-slow {
    animation: none !important;
    transform: none !important;
  }

  /* Buttons — instant feedback, no sweep/ripple */
  .btn-shine::before {
    display: none !important;
  }

  .btn-ripple::after {
    display: none !important;
  }

  .btn-glow:hover {
    box-shadow: none !important;
    transform: none !important;
  }

  .btn-magnetic {
    transition: none !important;
  }

  /* Cards — no tilt or lift animation */
  .card-tilt:hover {
    transform: none !important;
  }

  .card-hover-lift:hover {
    transform: none !important;
  }

  .card-glow-border::before {
    animation: none !important;
  }

  /* Pulse dot — static */
  .pulse-dot {
    animation: none !important;
  }

  /* Hero entrance — show immediately */
  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3,
  .hero-badge-pop {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  /* Marquee — stop scrolling */
  .marquee-track {
    animation: none !important;
  }

  /* Scroll indicator — static */
  .scroll-indicator {
    animation: none !important;
  }

  /* Counter — no transition */
  .counter-number {
    transition: none !important;
  }

  /* Parallax — disable transforms */
  .parallax-layer,
  .parallax-layer--slow,
  .parallax-layer--fast {
    will-change: auto !important;
    transition: none !important;
    transform: none !important;
  }

  /* Utility animations */
  .fade-in,
  .fade-out,
  .spin,
  .scale-pop {
    animation: none !important;
    opacity: 1 !important;
  }
}