/* ==========================================================================
   animations.css — All keyframe animations + reveal/transition utilities.
   GPU-accelerated only (transform / opacity). All non-essential motion is
   disabled via prefers-reduced-motion in critical.css.
   ========================================================================== */

/* Page-level fade-in on initial paint */
.page-fade {
  animation: pageFade 480ms var(--ease-out) both;
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero counters / numbers shine */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Subtle gold halo around the brand mark */
.brand__mark {
  animation: brandGlow 4s ease-in-out infinite alternate;
}
@keyframes brandGlow {
  from { filter: drop-shadow(0 0 0px rgba(245, 166, 35, 0)); }
  to   { filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.4)); }
}

/* "How it works" SVG icon animations — opt in by class */
.svg-rays { transform-origin: center; animation: rotate 20s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

.svg-bolt { transform-origin: center; animation: pulseScale 2.4s ease-in-out infinite; }
@keyframes pulseScale {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

.svg-arrow-down { animation: arrowDown 1.6s ease-in-out infinite; }
@keyframes arrowDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* Slide variants for steps (used by JS to direction-target) */
.step--enter-right { animation: stepEnterRight var(--t-med) var(--ease-out) both; }
.step--enter-left  { animation: stepEnterLeft  var(--t-med) var(--ease-out) both; }
@keyframes stepEnterRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepEnterLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Shake on validation error */
.shake { animation: shake 360ms var(--ease-in-out); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Floating CTA button micro-interaction (icon arrow) */
.btn .icon-arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .icon-arrow { transform: translateX(3px); }

/* Card lift handled in style.css (.card:hover) — kept GPU-only */

/* Hero highlighted word shimmer (decorative) */
.hero h1 em {
  background-size: 200% 100%;
  animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}

/* Save indicator already animated in style.css via @keyframes pulse */

/* Number pop on calculator update */
.calc-stat__num { transition: color var(--t-fast); }
.calc-stat__num.is-updating { animation: numFlash 280ms var(--ease-out); }
@keyframes numFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); color: var(--c-gold-500); }
  100% { transform: scale(1); }
}