/* ========================================================================
   MOTION — Native scroll-driven animations + IntersectionObserver fallback
   Caps total interactions per page at 4:
     1. Hero clip-path wipe reveal (load)
     2. Hero photo parallax (scroll)
     3. Section entry reveal (view)
     4. Link CTA spring (hover) — defined in style.css inline
   ======================================================================== */

/* ── 1 & 2. Hero — clip-path wipe reveal + parallax ──────────────────── */

.hero-headline,
.hero-eyebrow,
.hero-lede-jp,
.hero-meta {
  opacity: 0;
}

.hero-eyebrow {
  animation: fadeIn 800ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms forwards;
}

.hero-headline .line {
  display: block;
  clip-path: inset(0 100% -10% 0);
  animation: wipeReveal 1100ms cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

.hero-headline .line:nth-of-type(1) { animation-delay: 300ms; }
.hero-headline .line:nth-of-type(2) { animation-delay: 480ms; }
.hero-headline .line:nth-of-type(3) { animation-delay: 660ms; }

.hero-headline {
  animation: showHeadline 0ms 300ms forwards;
}

.hero-lede-jp {
  animation: fadeUp 900ms cubic-bezier(0.25, 0.1, 0.25, 1) 900ms forwards;
}

.hero-meta {
  animation: fadeUp 900ms cubic-bezier(0.25, 0.1, 0.25, 1) 1050ms forwards;
}

@keyframes showHeadline {
  to { opacity: 1; }
}

@keyframes wipeReveal {
  to { clip-path: inset(0 0% -10% 0); }
}

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

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

/* Hero photo parallax via native scroll-timeline */
@supports (animation-timeline: scroll()) {
  .hero-bg {
    animation: heroParallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
}

@keyframes heroParallax {
  to { transform: translateY(12vh) scale(1.06); }
}

/* ── 3. Section-entry scroll reveals ─────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* Native version (when supported) */
@supports (animation-timeline: view()) {
  [data-reveal] {
    /* Reset JS fallback, use CSS instead.
       Quick reveal — completes by 10% into cover range so critical content
       (numbered policy points, recruit specs, address blocks) is visible as
       soon as it enters the viewport. Earlier ranges like `entry 0% entry 50%`
       leave content invisible when the viewport scroll-locks on a section. */
    opacity: 1;
    transform: none;
    animation: scrollIn linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 10%;
  }
  [data-reveal].in {
    /* Native path doesn't need the .in class */
  }
}

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

/* Stagger groups */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal-stagger].in > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].in > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].in > *:nth-child(8) { transition-delay: 560ms; }

@supports (animation-timeline: view()) {
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    animation: scrollIn linear both;
    animation-timeline: view();
    /* Quick reveal — complete by 15% into cover range so content is visible
       as soon as it enters the viewport. Earlier ranges hide critical content
       at certain scroll positions. */
    animation-range: entry 0% cover 15%;
  }
  [data-reveal] {
    animation-range: entry 0% cover 10%;
  }
}

/* ── Reduced motion: collapse everything to static ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-headline,
  .hero-headline .line,
  .hero-eyebrow,
  .hero-lede-jp,
  .hero-meta,
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

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