/* ==========================================================================
   NatureDefender — Animation Layer
   GSAP drives the timelines; this file defines the resting/initial states
   so content doesn't flash unstyled before JS attaches, plus pure-CSS
   micro-interactions (hover, floating, magnetic buttons).
   ========================================================================== */

/* Elements GSAP will animate in start hidden via CSS to prevent flash */
[data-reveal] { opacity: 0; }
[data-reveal="fade-up"] { transform: translateY(36px); }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="image"] { opacity: 1; }

.js-ready [data-reveal] { will-change: transform, opacity; }

/* Text reveal mask only during GSAP animation, not by default */
.hero-title .line span { transform: none !important; opacity: 1 !important; }

/* Floating ambient cards (mission media, stat cards) */
.floaty { animation: floaty 7s ease-in-out infinite; }
.floaty--slow { animation-duration: 10s; }
.floaty--delay { animation-delay: -3s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Magnetic button wrapper — JS sets transform via inline style/gsap */
.magnetic { display: inline-flex; }

/* Image reveal wipe */
.reveal-wipe { position: relative; overflow: hidden; }
.reveal-wipe::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--emerald);
  transform-origin: left;
  z-index: 3;
  transform: scaleX(0);
}
.reveal-wipe.is-animating::before { animation: wipe 1.1s var(--ease-in-out); }
@keyframes wipe {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.001% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* Counter number ticking uses plain text content changes via JS/GSAP */

/* Card hover lift */
.glass-card, .project-card, .stat-card, .testimonial-card, .update-card,
.matter-card, .value-card, .pillar-card, .project-full-card {
  transition: transform 0.55s var(--ease-out), border-color 0.4s ease, box-shadow 0.55s var(--ease-out);
}
.glass-card:hover, .stat-card:hover, .testimonial-card:hover, .update-card:hover,
.matter-card:hover, .value-card:hover, .pillar-card:hover, .project-full-card:hover {
  transform: translateY(-6px);
  border-color: var(--hairline-strong);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6);
}

/* Nav underline / header transitions already in style.css; add link hover shimmer */
.link-arrow svg { transition: transform 0.35s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Loader bar animated by JS setting width; add shimmer */
.loader-bar span { transition: width 0.4s var(--ease-out); }

/* Fireflies glow pulse used on hero overlay accents (non-canvas DOM sparkle, optional) */
.firefly-dom {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px 2px rgba(224,192,136,0.8);
  animation: firefly-pulse 3.6s ease-in-out infinite;
}
@keyframes firefly-pulse {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

/* Respect reduced motion universally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-title .line span { transform: none !important; }
}