/* Homepage motion.
   Progressive enhancement: without scroll timelines, or when reduced motion is requested,
   the page is complete and static. Only transform, opacity and stroke-dashoffset animate,
   and nothing listens to scroll events in JavaScript. */

@media (prefers-reduced-motion: no-preference) {
  /* The hero settles once on load. */
  .hero-copy > * { animation: settle .9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .32s; }
  .hero-portrait { animation: settle-portrait 1.2s var(--ease) .1s both; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero: the portrait sinks behind the hero rule slightly slower than the page scrolls. */
    .home-hero { view-timeline: --hero block; overflow: clip; }
    .hero-portrait img { animation: portrait-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }

    /* Problem: the paper sculpture drifts behind the text. */
    .problem-scene { view-timeline: --problem block; }
    .problem-scene .story-backdrop { overflow: hidden; }
    .problem-scene .story-backdrop img { animation: backdrop-drift linear both; animation-timeline: --problem; animation-range: cover 0% cover 100%; }

    /* Section headings rise into place as they enter. */
    .problem-chapter h2, .ai-chapter h2, .partnership-intro h2, .partnership-continuity h2, .growth-copy h2, .closing h2 {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    /* Convergence diagrams draw with the scroll position: three strands, then the result. */
    .flow { view-timeline: --flow block; }
    .flow-strand, .flow-result { stroke-dasharray: 1; animation: draw linear both; animation-timeline: --flow; }
    .flow-strand-1 { animation-range: entry 30% cover 40%; }
    .flow-strand-2 { animation-range: entry 45% cover 44%; }
    .flow-strand-3 { animation-range: entry 60% cover 48%; }
    .flow-result-line { animation-range: cover 44% cover 54%; }
    .flow-result-head { animation-range: cover 53% cover 57%; }
    .flow-inputs span { animation: slide-in linear both; animation-timeline: --flow; animation-range: entry 10% entry 90%; }
    .flow-label { animation: slide-in linear both; animation-timeline: --flow; animation-range: cover 50% cover 60%; }

    /* Partnership areas arrive one by one beside the sticky introduction. */
    .partnership .partnership-row { animation: row-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }

    /* Growth: the diagram column floats gently against the copy. */
    .growth-chapter { view-timeline: --growth block; }
    .growth-visual { animation: float linear both; animation-timeline: --growth; animation-range: cover 0% cover 100%; }

    /* Biography: the stage photograph moves slower than its frame. */
    .about-stage { view-timeline: --stage block; }
    .about-stage img { animation: stage-drift linear both; animation-timeline: --stage; animation-range: cover 0% cover 100%; }

    /* Narrow layouts stack the growth column and show the photograph at its natural size. */
    @media (max-width: 760px) {
      .growth-visual, .about-stage img { animation: none; }
    }
  }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes settle-portrait {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes portrait-drift {
  from { transform: translateY(0); }
  to { transform: translateY(14%); }
}

@keyframes backdrop-drift {
  from { transform: translateY(-6%) scale(1.12); }
  to { transform: translateY(6%) scale(1.12); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(.5em); }
  to { opacity: 1; transform: none; }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes row-in {
  from { opacity: .12; transform: translateY(44px); }
  to { opacity: 1; transform: none; }
}

@keyframes float {
  from { transform: translateY(40px); }
  to { transform: translateY(-40px); }
}

@keyframes stage-drift {
  from { transform: translateY(-6%); }
  to { transform: translateY(6%); }
}