/* /css/method-anim.css — Animations for ai-native-design (method) page.
   Two animations:
   1. H2 word-reveal — each section heading splits into words, cascades in
      left-to-right with 70ms stagger, slight upward translate.
   2. Method-row procession — for .method-row blocks, the big editorial
      number (01..06 / Day 0..3) animates in first (scale + fade), then
      heading + paragraph cascade 100ms after.

   Triggered by .is-visible class added by /css/method-anim.js when the
   element enters the viewport (IntersectionObserver, threshold 0.15). */

/* ===== 1. H2 word reveal ===== */
.section-h2-anim {
  /* container is visible; just words start hidden */
}
.section-h2-anim .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition:
    opacity   0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.section-h2-anim.is-visible .word {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger up to 12 words. Headings on this page max ~6 words so plenty. */
.section-h2-anim.is-visible .word:nth-child(1)  { transition-delay: 0ms; }
.section-h2-anim.is-visible .word:nth-child(2)  { transition-delay: 70ms; }
.section-h2-anim.is-visible .word:nth-child(3)  { transition-delay: 140ms; }
.section-h2-anim.is-visible .word:nth-child(4)  { transition-delay: 210ms; }
.section-h2-anim.is-visible .word:nth-child(5)  { transition-delay: 280ms; }
.section-h2-anim.is-visible .word:nth-child(6)  { transition-delay: 350ms; }
.section-h2-anim.is-visible .word:nth-child(7)  { transition-delay: 420ms; }
.section-h2-anim.is-visible .word:nth-child(8)  { transition-delay: 490ms; }
.section-h2-anim.is-visible .word:nth-child(9)  { transition-delay: 560ms; }
.section-h2-anim.is-visible .word:nth-child(10) { transition-delay: 630ms; }
.section-h2-anim.is-visible .word:nth-child(11) { transition-delay: 700ms; }
.section-h2-anim.is-visible .word:nth-child(12) { transition-delay: 770ms; }

/* ===== 2. Method-row procession ===== */
/* The big editorial number enters first (slight scale-up + fade),
   the heading + paragraph cascade in 100ms after. */
.method-row.anim-row .method-row__num {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity   0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.method-row.anim-row .method-row__body {
  opacity: 0;
  transform: translateY(0.55em);
  transition:
    opacity   0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
  will-change: opacity, transform;
}
.method-row.anim-row.is-visible .method-row__num,
.method-row.anim-row.is-visible .method-row__body {
  opacity: 1;
  transform: none;
}

/* When multiple rows are in viewport at once, stagger them slightly
   so they don't all enter on the same frame. JS adds nth-child-style
   delays via the .row-stagger-N class (0..9). */
.method-row.anim-row.row-stagger-1.is-visible .method-row__num { transition-delay: 80ms; }
.method-row.anim-row.row-stagger-1.is-visible .method-row__body { transition-delay: 180ms; }
.method-row.anim-row.row-stagger-2.is-visible .method-row__num { transition-delay: 160ms; }
.method-row.anim-row.row-stagger-2.is-visible .method-row__body { transition-delay: 260ms; }
.method-row.anim-row.row-stagger-3.is-visible .method-row__num { transition-delay: 240ms; }
.method-row.anim-row.row-stagger-3.is-visible .method-row__body { transition-delay: 340ms; }

/* Reduced motion: bypass everything. */
@media (prefers-reduced-motion: reduce) {
  .section-h2-anim .word,
  .method-row.anim-row .method-row__num,
  .method-row.anim-row .method-row__body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}