/* Motion (all pages, specs/design.md §10). Scroll-driven effects; everything is skipped for
   prefers-reduced-motion, and browsers without scroll-driven animations keep the one-off reveal
   from base.css. To turn the motion layer off, remove motion.css and motion.js from the pages. */

@media (prefers-reduced-motion: no-preference) {

  /* 5. Header hides while scrolling down, comes back when scrolling up (class set by motion.js) */
  .site-header { transition: transform 320ms var(--ease), box-shadow var(--dur) var(--ease); }
  .site-header.is-hidden { transform: translateY(-100%); }

  /* 2. Titles rise line by line from a mask (lines built by motion.js, .m-in added on enter) */
  .m-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .m-line > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--l, 0) * 110ms);
  }
  .m-in .m-line > span { transform: none; }

  /* Hero photo opens like a curtain on load (container clips the brief zoom) */
  .hero__media { overflow: hidden; }
  .hero__media img { animation: m-hero 1200ms cubic-bezier(.2, .7, .2, 1) 150ms both; }
  @keyframes m-hero {
    from { clip-path: inset(0 0 100% 0); scale: 1.08; }
    to { clip-path: inset(0 0 0 0); scale: 1; }
  }

  @supports (animation-timeline: view()) {
    /* Content follows the scroll position (and rewinds when scrolling back up) */
    .js .reveal, .js .reveal.is-in {
      opacity: 1; transform: none; transition: none;
      animation: m-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    .js .reveal.m-split { animation: none; }
    @keyframes m-rise {
      from { opacity: 0; translate: 0 40px; }
      to { opacity: 1; translate: 0 0; }
    }

    /* 1. Photos uncover bottom-up and settle from a slight zoom while they enter */
    .service-card__media img,
    .service-detail__media img,
    .about__media img,
    .audience img,
    .work__grid .project-card__link img { /* Home preview only: on the Portfolio the photos are the main content */
      animation: m-curtain linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes m-curtain {
      from { clip-path: inset(100% 0 0 0); scale: 1.12; }
      to { clip-path: inset(0 0 0 0); scale: 1; }
    }

    /* 3. Process: a red line runs down the steps; each marker and number lights up as it is reached */
    .process__steps { position: relative; padding-left: 36px; view-timeline: --steps block; }
    .process__steps::before,
    .process__steps::after {
      content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px;
      background: var(--stone-200);
    }
    .process__steps::after {
      background: var(--red-600);
      transform-origin: top;
      animation: m-grow linear both;
      animation-timeline: --steps;
      animation-range: cover 20% cover 65%;
    }
    @keyframes m-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

    .step { position: relative; }
    .step::before {
      content: ""; position: absolute; left: -37px; top: calc(var(--space-6) + 14px);
      width: 12px; height: 12px;
      background: var(--white); border: 2px solid var(--stone-400);
      animation: m-lit linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 50%;
    }
    @keyframes m-lit { to { background: var(--red-600); border-color: var(--red-600); } }
    .step__num {
      animation: m-num linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 50%;
    }
    @keyframes m-num { from { color: var(--stone-400); } to { color: var(--navy-700); } }
  }
}