/* ─── MOTION.CSS — Animations, transitions, scroll reveals ─── */

/* ═══════════════════════════════════════════════════════════
   PAGE ENTRANCE — sequential stagger on load
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes drawLine {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero entrance sequence */
.hero-kicker {
  animation: slideInLeft 0.5s ease both;
  animation-delay: 0.1s;
}

.hero-headline {
  animation: fadeSlideUp 0.6s ease both;
  animation-delay: 0.22s;
}

.hero-sub {
  animation: fadeSlideUp 0.5s ease both;
  animation-delay: 0.38s;
}

.hero-cta-group {
  animation: fadeSlideUp 0.5s ease both;
  animation-delay: 0.5s;
}

.hero-badge {
  animation: fadeIn 0.5s ease both;
  animation-delay: 0.68s;
}

/* Stats panel stagger */
.stat-card:nth-child(1) {
  animation: countUp 0.45s ease both;
  animation-delay: 0.55s;
}
.stat-card:nth-child(2) {
  animation: countUp 0.45s ease both;
  animation-delay: 0.65s;
}
.stat-card:nth-child(3) {
  animation: countUp 0.45s ease both;
  animation-delay: 0.75s;
}
.stat-card:nth-child(4) {
  animation: countUp 0.45s ease both;
  animation-delay: 0.85s;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL — IntersectionObserver adds .is-visible
   ═══════════════════════════════════════════════════════════ */
.reveal {
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger variants */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.42s; }

/* Clip-path wipe for headings */
.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-wipe.is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ═══════════════════════════════════════════════════════════
   SIGNATURE MOTION — Parallax layer offset
   (applied via JS: hero-parallax-bg transform)
   ═══════════════════════════════════════════════════════════ */
.hero-parallax-bg {
  will-change: transform;
  transition: none; /* transform set directly by JS */
}

/* ═══════════════════════════════════════════════════════════
   HOVER STATES — Smooth, never instant
   ═══════════════════════════════════════════════════════════ */
.btn-primary,
.btn-ghost,
.btn-header,
.btn-inverse {
  transition:
    background var(--t-fast),
    color var(--t-fast),
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Image zoom inside overflow:hidden */
.reason-card--image {
  overflow: hidden;
}

.reason-card--image img {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reason-card--image:hover img {
  transform: scale(1.05);
}

/* Wordmark hover */
.wordmark {
  transition: opacity var(--t-fast);
}

.wordmark:hover {
  opacity: 0.82;
}

/* Footer link arrow slide */
.footer-nav-links a,
.mega-nav-col nav a {
  transition:
    color var(--t-fast),
    padding-left var(--t-fast),
    border-color var(--t-fast);
}

/* Stat card hover */
.stat-card {
  transition: background var(--t-fast);
}

/* Product image lift */
.product-img {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-visual-panel:hover .product-img {
  transform: translateY(-8px) scale(1.02);
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION OVERRIDE
   (also defined in tokens.css for certainty)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-kicker,
  .hero-headline,
  .hero-sub,
  .hero-cta-group,
  .hero-badge,
  .stat-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal,
  .reveal-wipe {
    transition: none;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .hero-parallax-bg {
    transform: none !important;
  }
}