/* ============================================================
   ELGI5 — ANIMATIONS
   Keyframes + scroll reveal + ambient motion
   ============================================================ */

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal="fade-up"] { transform: translateY(28px); }
[data-reveal="fade-left"] { transform: translateX(-32px); }
[data-reveal="fade-right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(0.94); }

[data-reveal].in-view {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger helper — set via inline style var(--d) or nth-child */
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Floating ambient motion ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes float-y-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-card.fc-rank { animation: float-y 5.5s ease-in-out infinite; }
.float-card.fc-score { animation: float-y-sm 4.6s ease-in-out infinite 0.3s; }
.float-card.fc-eligibility { animation: float-y-sm 5s ease-in-out infinite 0.6s; }
.float-card.fc-ai { animation: float-y 6.2s ease-in-out infinite 0.2s; }

.dash-frame { animation: float-y-sm 7s ease-in-out infinite; }

/* ---------- Blobs ---------- */
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: translate(0,0) scale(1); }
  33% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; transform: translate(2%, -3%) scale(1.05); }
  66% { border-radius: 35% 65% 55% 45% / 40% 55% 45% 60%; transform: translate(-2%, 2%) scale(0.98); }
}
.hero-blob { animation: blob-morph 14s ease-in-out infinite; }
.hero-blob.blob-2 { animation-duration: 18s; animation-direction: reverse; }

/* ---------- Scroll indicator ---------- */
@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 1; }
  70% { opacity: 0.3; }
  100% { transform: translateY(14px); opacity: 0; }
}
.scroll-indicator .wheel i { animation: scroll-dot 1.8s ease-in-out infinite; }

/* ---------- Typing effect cursor ---------- */
@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.type-caret {
  display: inline-block;
  width: 3px;
  margin-left: 3px;
  background: var(--c-green-deep);
  animation: blink-caret 0.9s step-end infinite;
}

/* ---------- Ripple ---------- */
@keyframes ripple-anim {
  to { transform: scale(3); opacity: 0; }
}

/* ---------- Loader pulse ---------- */
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.6; }
}

/* ---------- Marquee (testimonials) ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Journey node glow pulse on hover ---------- */
@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126,217,87,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(126,217,87,0); }
}
.journey-step:hover .step-node { animation: node-glow 1.4s ease-out infinite; }

/* ---------- Card shine ---------- */
.feature-card, .why-card, .testi-card {
  position: relative;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease-out);
  pointer-events: none;
}
.feature-card:hover::after { left: 150%; }

/* ---------- Counter number pop ---------- */
.stat-num.counted {
  animation: count-pop 0.4s var(--ease-spring);
}
@keyframes count-pop {
  0% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ---------- Ring draw ---------- */
.ring-progress {
  stroke-dasharray: var(--circ, 251);
  stroke-dashoffset: var(--circ, 251);
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.ring-progress.drawn { stroke-dashoffset: var(--offset, 40); }

/* ---------- Underline animated link (nav handled separately) ---------- */
.anim-underline {
  background-image: linear-gradient(var(--c-dark), var(--c-dark));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.35s var(--ease-out);
}
.anim-underline:hover { background-size: 100% 2px; }

/* ---------- Button morph on hover (brand) ---------- */
.btn-brand { background-size: 160% 160%; background-position: 0% 50%; }
.btn-brand:hover { background-position: 100% 50%; }

/* ---------- Wave separator ---------- */
.wave-sep { display: block; width: 100%; height: auto; margin-top: -1px; }

/* ---------- Fade-in whole hero on load ---------- */
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { animation: hero-fade-in 0.9s var(--ease-out) both; }
.hero-copy .eyebrow { animation-delay: 0.05s; }
.hero-copy h1 { animation-delay: 0.15s; }
.hero-copy p.lead { animation-delay: 0.28s; }
.hero-copy .hero-cta { animation-delay: 0.4s; }
.hero-copy .hero-trust { animation-delay: 0.52s; }

.hero-visual { animation: hero-fade-in 1.1s var(--ease-out) 0.3s both; }