/* ================================================================
   Women AI Labs — Animations
   All keyframe, entrance, and continuous animations.
   AOS (Animate on Scroll) handles scroll-triggered reveals.
   ================================================================ */

/* ── AOS custom easing override ── */
[data-aos] { transition-timing-function: cubic-bezier(.25,.8,.25,1) !important; }

/* ── Gradient text shimmer ── */
@keyframes gradShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-title .grad,
.page-hero-title .grad,
.section-title .grad,
.stat-ribbon .rib .v,
.mission-tile .num,
.tier .amount,
.impact-money .amt,
.t-step .yr {
  background-size: 200% auto;
  animation: gradShimmer 5s ease infinite;
}

/* ── Floating hero art ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
.hero-art svg,
.hero-art .float-art {
  animation: float 7s ease-in-out infinite;
}

/* ── Particle drift (hero background dots) ── */
@keyframes particleDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: .6; }
  33%  { transform: translate(8px, -12px) scale(1.1); opacity: .9; }
  66%  { transform: translate(-6px, -6px) scale(.95); opacity: .5; }
  100% { transform: translate(0, 0) scale(1); opacity: .6; }
}
.hero-particle {
  animation: particleDrift 8s ease-in-out infinite;
}
.hero-particle:nth-child(2n)  { animation-delay: -2s; animation-duration: 11s; }
.hero-particle:nth-child(3n)  { animation-delay: -5s; animation-duration: 9s; }
.hero-particle:nth-child(5n)  { animation-delay: -1s; animation-duration: 13s; }

/* ── Sponsor marquee pause on hover ── */
.sponsor-track:hover { animation-play-state: paused; }

/* ── Lab pin pulse ── */
@keyframes ping {
  0%   { transform: scale(.5); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ── Hero word-by-word entrance ── */
@keyframes wordIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-title .word {
  display: inline-block;
  animation: wordIn .65s cubic-bezier(.22,1,.36,1) both;
}
.hero-title .word:nth-child(1) { animation-delay: .1s; }
.hero-title .word:nth-child(2) { animation-delay: .2s; }
.hero-title .word:nth-child(3) { animation-delay: .3s; }
.hero-title .word:nth-child(4) { animation-delay: .4s; }
.hero-title .word:nth-child(5) { animation-delay: .5s; }
.hero-title .word:nth-child(6) { animation-delay: .6s; }

/* Hero eyebrow slide in */
@keyframes eyebrowIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: eyebrowIn .5s cubic-bezier(.22,1,.36,1) .05s both; }

/* Hero lede and CTA fade up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-lede         { animation: fadeUp .55s cubic-bezier(.22,1,.36,1) .35s both; }
.hero-lede.small   { animation-delay: .45s; }
.hero-ctas         { animation: fadeUp .55s cubic-bezier(.22,1,.36,1) .55s both; }
.hero-link         { animation: fadeUp .55s cubic-bezier(.22,1,.36,1) .65s both; }

/* ── Stat counter (JS adds .counted class, which removes animation) ── */
@keyframes numberIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.stat-val { animation: numberIn .5s cubic-bezier(.22,1,.36,1) both; }
.stat:nth-child(1) .stat-val { animation-delay: .1s; }
.stat:nth-child(2) .stat-val { animation-delay: .18s; }
.stat:nth-child(3) .stat-val { animation-delay: .26s; }
.stat:nth-child(4) .stat-val { animation-delay: .34s; }
.stat:nth-child(5) .stat-val { animation-delay: .42s; }
.stat:nth-child(6) .stat-val { animation-delay: .50s; }

/* ── Sticky header glass ── */
@keyframes headerGlass {
  from { background: transparent; }
  to   { background: rgba(10,5,24,.88); }
}

/* ── Card hover glow ── */
.card,
.pillar,
.story,
.article-tile,
.involve-card,
.person,
.event-tile,
.mission-tile,
.flow-step,
.program,
.tier,
.faq-item {
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover,
.mission-tile:hover,
.flow-step:hover {
  border-color: rgba(236,72,153,.35);
  box-shadow: 0 8px 32px -12px rgba(236,72,153,.25);
}
.pillar:hover,
.involve-card:hover,
.event-tile:hover,
.program:hover {
  box-shadow: 0 12px 40px -16px rgba(168,85,247,.35);
}

/* ── Button shimmer on hover ── */
@keyframes btnShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.btn-primary {
  background-size: 200% auto;
  background-image: linear-gradient(135deg, #a855f7 0%, #d946ef 33%, #ec4899 66%, #a855f7 100%);
}
.btn-primary:hover {
  animation: btnShimmer .6s linear 1;
}

/* ── Page hero art fade in ── */
@keyframes artReveal {
  from { opacity: 0; transform: scale(.96) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.page-hero-art { animation: artReveal .8s cubic-bezier(.22,1,.36,1) .2s both; }

/* ── Sponsor logo hover ── */
.sponsor { transition: opacity .2s, transform .2s; }
.sponsor:hover { transform: translateY(-2px); }

/* ── Section reveal (used by JS IntersectionObserver for browsers without AOS) ── */
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: sectionReveal .7s cubic-bezier(.22,1,.36,1) both;
}

/* ── Blog post image zoom on hover ── */
.story-img img,
.article-tile .at-img img,
.article-feature .feat-img img,
.event-tile .ev-img img {
  transition: transform .5s ease;
}
.story:hover       .story-img img,
.article-tile:hover .at-img img,
.article-feature:hover .feat-img img,
.event-tile:hover  .ev-img img {
  transform: scale(1.04);
}

/* ── Timeline dot pulse ── */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(236,72,153,.2); }
  50%       { box-shadow: 0 0 0 8px rgba(236,72,153,.08); }
}
.t-step::before { animation: dotPulse 3s ease-in-out infinite; }
.t-step:nth-child(2)::before { animation-delay: -.6s; }
.t-step:nth-child(3)::before { animation-delay: -1.2s; }
.t-step:nth-child(4)::before { animation-delay: -1.8s; }
.t-step:nth-child(5)::before { animation-delay: -2.4s; }

/* ── Nav link underline expand ── */
.nav a { transition: color .15s; }
.nav a::after {
  content: ""; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--grad-pink); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.active::after { transform: scaleX(1); }

/* ── Image cover skeleton loading ── */
@keyframes skeleton {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.img-placeholder {
  background: linear-gradient(90deg, #1a0e35 25%, #2a1565 50%, #1a0e35 75%);
  background-size: 800px 100%;
  animation: skeleton 1.8s ease-in-out infinite;
}

/* ── Donut chart entrance ── */
@keyframes donutDraw {
  from { stroke-dashoffset: 276.5; }
}
.donut-arc {
  animation: donutDraw 1.2s cubic-bezier(.22,1,.36,1) .3s both;
}

/* ── Progress bar ── */
@keyframes barGrow {
  from { width: 0; }
}
.impact-bar > span { animation: barGrow 1.2s cubic-bezier(.22,1,.36,1) .4s both; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}