/* =========================================================
   Animation system: scroll-reveal, floating shapes, hover
   polish, animated counters. Kept in its own file so it can
   be added/removed independently of the core stylesheets.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* ---------- Floating decorative shapes ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatYSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.anim-float { animation: floatY 3.2s ease-in-out infinite; }
.anim-float-slow { animation: floatYSlow 5s ease-in-out infinite; }

.hero-illustration {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Card hover polish ---------- */
.card, .testimonial-card, .price-card, .item-row {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover, .price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-med);
}
.icon-svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-white);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card .icon { transition: transform 0.3s ease; }
.card:hover .icon { transform: scale(1.1) rotate(-4deg); }

/* ---------- Nav link underline ---------- */
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* ---------- Button micro-interaction ---------- */
.btn-primary, .btn-outline {
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.97); }

/* ---------- Animated stat counters ---------- */
.stat-number.counting { color: var(--color-deep); }

/* ---------- Hero gradient shimmer ---------- */
.hero {
  background-size: 200% 200%;
  animation: heroShift 12s ease infinite;
}
@keyframes heroShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Testimonial stars pop ---------- */
.testimonial-card .stars {
  display: inline-block;
  animation: starPop 0.5s ease backwards;
}
@keyframes starPop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}