/* ==========================================================================
   Tyler Tobin for Milton — Animations
   Subtle, premium motion. All effects respect prefers-reduced-motion
   (handled globally in style.css).
   ========================================================================== */

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

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
[data-animate-group] > * { transition-delay: calc(var(--stagger-index, 0) * 90ms); }

/* ---------- Card hover lift (supplemental motion) ---------- */
.card-hover { will-change: transform; }

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

/* ---------- Scroll cue ---------- */
@keyframes scroll-cue {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------- Counters ---------- */
.stat-number { font-variant-numeric: tabular-nums; }

/* ---------- Timeline reveal ---------- */
.timeline-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.timeline-item.is-visible { opacity: 1; transform: none; }

/* ---------- Policy card transitions ---------- */
.policy-quicknav a { transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.policy-quicknav a:hover { transform: translateY(-1px); }

/* ---------- Mobile menu fade for list items ---------- */
.mobile-nav-list a {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mobile-nav.is-open .mobile-nav-list a {
  opacity: 1;
  transform: none;
}
.mobile-nav.is-open .mobile-nav-list a:nth-child(1) { transition-delay: 0.08s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(2) { transition-delay: 0.13s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(3) { transition-delay: 0.18s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(4) { transition-delay: 0.23s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(5) { transition-delay: 0.28s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(6) { transition-delay: 0.33s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(7) { transition-delay: 0.38s; }
.mobile-nav.is-open .mobile-nav-list a:nth-child(8) { transition-delay: 0.43s; }

/* ---------- FAQ answer open state helper ---------- */
.faq-question .faq-icon { transition: transform var(--transition-fast); }

/* ---------- Hero parallax ---------- */
.hero-media { transition: transform 0.1s linear; }

/* ---------- Page load fade ---------- */
body { animation: page-fade-in 0.5s var(--ease); }
@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}