/* ─── motion.css — Animations & Transitions ─── */

/* ─── Page Entrance Sequence ─────────────────────────────── */

/* Elements that animate on page load */
.entrance {
  opacity: 0;
  animation-fill-mode: both;
}

.entrance-up {
  transform: translateY(24px);
  animation: entranceUp var(--duration-reveal) var(--ease-out) forwards;
}

.entrance-fade {
  animation: entranceFade var(--duration-reveal) var(--ease-out) forwards;
}

.entrance-left {
  transform: translateX(-24px);
  animation: entranceLeft var(--duration-reveal) var(--ease-out) forwards;
}

/* Entrance delays for hero sequence */
.delay-0   { animation-delay: 0ms; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }

/* ─── Keyframes ──────────────────────────────────────────── */

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

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

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

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

@keyframes numberCount {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Wordmark Draw-on ───────────────────────────────────── */

.wordmark-reveal {
  opacity: 0;
  animation: entranceFade 600ms var(--ease-out) 100ms forwards;
}

/* ─── Hero Entrance (sequential) ────────────────────────── */
/*
  1. Wordmark fades in (0ms)
  2. Section label slides up (100ms)
  3. H1 wipes in from left (200ms)
  4. Subtitle fades up (400ms)
  5. CTA group slides up (550ms)
  6. Hero image fades in (100ms, independent)
*/

.hero-section .section-label {
  animation: entranceUp var(--duration-reveal) var(--ease-out) 100ms both;
}

.hero-section .hero-headline {
  animation: entranceUp var(--duration-reveal) var(--ease-out) 200ms both;
}

.hero-section .hero-subtitle {
  animation: entranceUp var(--duration-reveal) var(--ease-out) 380ms both;
}

.hero-section .hero-actions {
  animation: entranceUp var(--duration-reveal) var(--ease-out) 520ms both;
}

.hero-section .hero-visual {
  animation: entranceFade 900ms var(--ease-out) 80ms both;
}

/* ─── Scroll Reveal — IntersectionObserver classes ──────── */
/*
  .reveal elements start invisible.
  JS adds .is-visible when they enter viewport.
*/

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Clip-path wipe reveal for headings */
.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path var(--duration-reveal) var(--ease-out);
}

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

/* Stagger children within a container */
.reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-group > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-group > .reveal:nth-child(6) { transition-delay: 400ms; }

/* Stat numbers count-up animation target */
.stat-display-number {
  transition: opacity 400ms ease;
}

/* ─── Hover: Image Scale ─────────────────────────────────── */

.img-zoom-container {
  overflow: hidden;
}

.img-zoom-container img {
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

.img-zoom-container:hover img {
  transform: scale(1.05);
}

/* ─── Hover: Ruled Link Underline ─────────────────────────── */

.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}

.link-underline:hover::after {
  width: 100%;
}

/* ─── Signature Motion: Magnetic Button ──────────────────── */
/*
  Applied via JS to .btn-magnetic elements.
  JS applies CSS custom properties --btn-x and --btn-y.
*/

.btn-magnetic {
  transition: transform var(--duration-fast) var(--ease-out);
  transform: translate(var(--btn-x, 0px), var(--btn-y, 0px));
}

/* ─── Nav Slide In/Out ────────────────────────────────────── */

.site-nav {
  transition: transform var(--duration-slow) var(--ease-out);
}

/* ─── Takeaway item hover ─────────────────────────────────── */

.takeaway-item {
  transition: background-color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

.takeaway-item:hover .takeaway-title {
  color: var(--brand-primary);
  transition: color var(--duration-fast) ease;
}

/* ─── FAQ item hover ──────────────────────────────────────── */

.faq-item {
  transition: background-color var(--duration-fast) ease;
}

.faq-item:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ─── Reason block hover accent ──────────────────────────── */

.reason-headline {
  transition: color var(--duration-fast) ease;
}

.reason-block:hover .reason-headline {
  color: var(--brand-primary);
}

/* ─── Reduced Motion Override ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .entrance,
  .entrance-up,
  .entrance-fade,
  .entrance-left,
  .reveal,
  .reveal-wipe,
  .hero-section .section-label,
  .hero-section .hero-headline,
  .hero-section .hero-subtitle,
  .hero-section .hero-actions,
  .hero-section .hero-visual,
  .wordmark-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .img-zoom-container img {
    transition: none;
  }
}