/* =============================================================================
   NONPROFIT PLATFORM — ANIMATIONS
   Scroll-triggered reveals, page transitions, micro-interactions, ambient motion
   Uses IntersectionObserver via main.js — classes toggled by JS
   ============================================================================= */

/* ── SPIN / BASIC KEYFRAMES ────────────────────────────────────────────────── */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes ping {
  0%   { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

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

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

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLL REVEAL — BASE STATES ────────────────────────────────────────────
   Elements start invisible. JS adds .revealed when they enter the viewport.
   Each variant starts from a different position/state.
   ────────────────────────────────────────────────────────────────────────── */

/* Default reveal (fade up) */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: 
    opacity var(--duration-slower) var(--ease-spring),
    transform var(--duration-slower) var(--ease-spring);
  will-change: opacity, transform;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade only */
[data-reveal="fade"] {
  transform: none;
}

/* Slide from left */
[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="left"].revealed {
  transform: translateX(0);
}

/* Slide from right */
[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="right"].revealed {
  transform: translateX(0);
}

/* Scale up */
[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="scale"].revealed {
  transform: scale(1);
}

/* Zoom from below */
[data-reveal="zoom"] {
  transform: translateY(24px) scale(0.96);
}

[data-reveal="zoom"].revealed {
  transform: translateY(0) scale(1);
}

/* Stagger delays — add data-delay="1" through "5" */
[data-delay="1"] { transition-delay: 100ms; }
[data-delay="2"] { transition-delay: 200ms; }
[data-delay="3"] { transition-delay: 300ms; }
[data-delay="4"] { transition-delay: 400ms; }
[data-delay="5"] { transition-delay: 500ms; }
[data-delay="6"] { transition-delay: 600ms; }

/* Stagger children — parent gets data-stagger, JS adds delays to children */
.stagger-children [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.stagger-children [data-reveal]:nth-child(2) { transition-delay: 100ms; }
.stagger-children [data-reveal]:nth-child(3) { transition-delay: 200ms; }
.stagger-children [data-reveal]:nth-child(4) { transition-delay: 300ms; }
.stagger-children [data-reveal]:nth-child(5) { transition-delay: 400ms; }
.stagger-children [data-reveal]:nth-child(6) { transition-delay: 500ms; }

/* ── PAGE TRANSITION ─────────────────────────────────────────────────────── */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  z-index: var(--z-top);
  transform: translateY(100%);
  transition: transform var(--duration-page) var(--ease-spring);
  pointer-events: none;
}

.page-transition-overlay.entering {
  transform: translateY(0);
}

.page-transition-overlay.leaving {
  transform: translateY(-100%);
}

/* Fade in on page load */
.page-enter {
  animation: page-fade-in var(--duration-slow) var(--ease-spring) forwards;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HERO ANIMATIONS ─────────────────────────────────────────────────────── */

/* Hero content entrance — orchestrated sequence */
.hero-animate .hero-eyebrow {
  animation: hero-enter var(--duration-slow) var(--ease-spring) 100ms both;
}

.hero-animate .hero-title {
  animation: hero-enter var(--duration-slow) var(--ease-spring) 250ms both;
}

.hero-animate .hero-subtitle {
  animation: hero-enter var(--duration-slow) var(--ease-spring) 400ms both;
}

.hero-animate .hero-actions {
  animation: hero-enter var(--duration-slow) var(--ease-spring) 550ms both;
}

.hero-animate .hero-trust {
  animation: hero-enter var(--duration-slow) var(--ease-spring) 700ms both;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Animated hero image */
.hero-img-animate {
  animation: hero-image-in var(--duration-slower) var(--ease-spring) 200ms both;
}

@keyframes hero-image-in {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ── COUNTER ANIMATION ───────────────────────────────────────────────────── */

/* .counting class added by JS when element enters viewport */
.stat-number {
  display: inline-block;
  transition: none;
}

.stat-number.counting {
  animation: count-up var(--duration-slow) var(--ease-spring) forwards;
}

/* ── CARD HOVER EFFECTS ──────────────────────────────────────────────────── */

/* Lift on hover */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-default);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Scale on hover */
.hover-scale {
  transition: transform var(--duration-base) var(--ease-spring);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Glow on hover */
.hover-glow {
  transition: box-shadow var(--duration-base) var(--ease-default);
}

.hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2), var(--shadow-lg);
}

/* ── IMAGE ZOOM ──────────────────────────────────────────────────────────── */

.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform var(--duration-slower) var(--ease-default);
  transform-origin: center;
}

.img-zoom:hover img {
  transform: scale(1.06);
}

/* ── SHIMMER BUTTON ──────────────────────────────────────────────────────── */

.btn-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 50%,
    var(--color-primary) 100%
  );
  background-size: 200% 100%;
}

.btn-shimmer:hover {
  animation: shimmer 1.5s infinite;
  background-size: 200% 100%;
}

/* ── FLOATING ELEMENTS ───────────────────────────────────────────────────── */

.float-animation {
  animation: float 4s var(--ease-in-out) infinite;
}

.float-animation-slow {
  animation: float 6s var(--ease-in-out) infinite;
}

.float-animation-delay {
  animation: float 4s var(--ease-in-out) 1.5s infinite;
}

/* ── NOTIFICATION PULSE ──────────────────────────────────────────────────── */

.notification-pulse {
  position: relative;
}

.notification-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--color-error);
  border-radius: 50%;
  border: 2px solid white;
}

.notification-pulse-animated::after {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ── LOADING STATES ──────────────────────────────────────────────────────── */

.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-primary-xlight);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.loading-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.loading-spinner-lg { width: 40px; height: 40px; border-width: 4px; }

/* Full page loader */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: var(--z-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transition: opacity var(--duration-slow) var(--ease-out);
}

.page-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loader-logo {
  height: 60px;
  animation: pulse 2s infinite;
}

.page-loader-bar {
  width: 200px;
  height: 3px;
  background: var(--color-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.page-loader-bar::after {
  content: '';
  display: block;
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  animation: loader-bar 1.4s var(--ease-in-out) infinite;
}

@keyframes loader-bar {
  0%   { width: 0%; margin-left: 0; }
  50%  { width: 75%; margin-left: 10%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ── GALLERY LIGHTBOX ────────────────────────────────────────────────────── */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base), visibility var(--duration-base);
}

.lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transform: scale(0.94);
  transition: transform var(--duration-slow) var(--ease-spring);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.lightbox-overlay.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast), transform var(--duration-fast) var(--ease-bounce);
  backdrop-filter: blur(8px);
}

.lightbox-close {
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}

.lightbox-prev { left: var(--space-6); }
.lightbox-next { right: var(--space-6); }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,0.25);
}

.lightbox-caption {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  backdrop-filter: blur(8px);
  max-width: 80vw;
  text-align: center;
}

/* ── HERO SCROLL INDICATOR ───────────────────────────────────────────────── */

.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  animation: bounce-y 2.5s var(--ease-in-out) infinite;
}

.scroll-indicator-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6));
}

/* ── GRADIENT BORDER ─────────────────────────────────────────────────────── */

.gradient-border {
  position: relative;
  background: var(--color-white);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ── REVEAL LINE ─────────────────────────────────────────────────────────── */

/* Underline that draws in on hover */
.underline-draw {
  position: relative;
  text-decoration: none;
}

.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width var(--duration-base) var(--ease-default);
}

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

/* ── REDUCED MOTION OVERRIDE ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-animate .hero-eyebrow,
  .hero-animate .hero-title,
  .hero-animate .hero-subtitle,
  .hero-animate .hero-actions,
  .hero-animate .hero-trust,
  .page-enter,
  .float-animation,
  .float-animation-slow,
  .float-animation-delay {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:active { transform: none; }
  .hover-lift:hover, .hover-scale:hover { transform: none; }
}