/* ─────────────────────────────────────────────────────────────────
   MOTION.CSS — Animations & transitions
   Signature motion: Clip-path wipe reveals on section headings
───────────────────────────────────────────────────────────────── */

/* ── KEYFRAMES ────────────────────────────────────────────────── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wipe-right {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

@keyframes copper-pulse {
  0%, 100% {
    color: var(--brand-primary);
    text-shadow: none;
  }
  50% {
    color: var(--brand-accent);
    text-shadow: 0 0 20px rgba(200,121,65,0.4);
  }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,121,65,0); }
  50%       { box-shadow: 0 0 20px 4px rgba(200,121,65,0.25); }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ── HERO ENTRANCE (staggered fade-up) ───────────────────────── */
.hero-eyebrow-row,
.hero-h1,
.hero-deck,
.author-box,
.hero-media {
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) forwards;
}

.hero-eyebrow-row { animation-delay: 100ms; }
.hero-h1          { animation-delay: 200ms; }
.hero-deck        { animation-delay: 350ms; }
.author-box       { animation-delay: 480ms; }
.hero-media       {
  animation: fade-in 800ms var(--ease-out) 550ms forwards;
}

/* ── SCROLL REVEALS ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

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

/* Stagger children */
.reveal-stagger {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

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

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay:  60ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 360ms; }

/* Signature motion: clip-path wipe for section titles */
.section-title,
.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-xslow) var(--ease-out);
}

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

/* ── HOVER STATES ─────────────────────────────────────────────── */

/* Image hover — subtle scale inside overflow:hidden container */
.img-hover {
  overflow: hidden;
  display: block;
}

.img-hover img {
  transition: transform 400ms var(--ease-out);
}

.img-hover:hover img {
  transform: scale(1.04);
}

/* CTA button active press */
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Nav overlay link stagger */
#nav-overlay.is-open .nav-overlay__link {
  opacity: 0;
  transform: translateX(-16px);
  animation: slide-in-link var(--dur-slow) var(--ease-out) forwards;
}

@keyframes slide-in-link {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#nav-overlay.is-open .nav-overlay__link:nth-child(1) { animation-delay:  80ms; }
#nav-overlay.is-open .nav-overlay__link:nth-child(2) { animation-delay: 140ms; }
#nav-overlay.is-open .nav-overlay__link:nth-child(3) { animation-delay: 200ms; }
#nav-overlay.is-open .nav-overlay__link:nth-child(4) { animation-delay: 260ms; }
#nav-overlay.is-open .nav-overlay__link:nth-child(5) { animation-delay: 320ms; }

#nav-overlay.is-open .nav-overlay__cta {
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 420ms forwards;
}

/* ── COUNTDOWN PULSE ──────────────────────────────────────────── */
.countdown {
  animation: copper-pulse 2s ease-in-out infinite;
}

/* ── PROGRESS BAR GLOW ────────────────────────────────────────── */
#pb {
  box-shadow: 0 0 8px rgba(200,121,65,0.6);
}

/* ── STICKY BAR ───────────────────────────────────────────────── */
#iqi4em {
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ── PROOF NUMBERS ENTRANCE ───────────────────────────────────── */
.proof-num {
  display: inline-block;
}

.proof-bar.is-visible .proof-num {
  animation: scale-in var(--dur-mid) var(--ease-out) forwards;
}

/* ── FAQ OPEN/CLOSE ───────────────────────────────────────────── */
.faq-answer {
  transition: max-height var(--dur-slow) var(--ease-out);
}

/* ── DUOTONE IMAGE REVEAL ─────────────────────────────────────── */
.duotone-overlay {
  transition: opacity 400ms var(--ease-out);
}

.hero-media:hover .duotone-overlay {
  opacity: 0.35;
}

.article-img:hover::after {
  opacity: 0.3;
}

/* ── WINNER BANNER ENTRANCE ───────────────────────────────────── */
.winner-banner {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ── REDUCED MOTION OVERRIDE ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Already handled globally in tokens.css */
  /* Additional specifics: */
  .hero-eyebrow-row,
  .hero-h1,
  .hero-deck,
  .author-box,
  .hero-media {
    opacity: 1;
    animation: none;
  }

  .reveal,
  .reveal-stagger,
  .reveal-wipe,
  .section-title {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  #nav-overlay.is-open .nav-overlay__link {
    opacity: 1;
    transform: none;
    animation: none;
  }

  #nav-overlay.is-open .nav-overlay__cta {
    opacity: 1;
    animation: none;
  }

  .countdown {
    animation: none;
    color: var(--brand-primary);
  }

  .winner-banner {
    animation: none;
  }
}