/* Premium scroll-driven motion layer for the dark industrial landing page.
   Plain CSS, no libraries. All hidden states sit under a .js ancestor so the
   page stays fully visible without JS, and everything motion related only
   applies under prefers-reduced-motion: no-preference. */

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

  /* Two rAF animated elements get will-change, nothing else does. */
  .js .hero-bg,
  .js .hero-copy {
    will-change: transform;
  }

  /* 1. HERO ENTRANCE. Words rise with stagger, lede and CTA follow. */
  .js .hero-copy > * {
    animation: none;
  }
  .js .hero h1.split {
    opacity: 1;
    transform: none;
  }
  .js .hero h1.split .w > span {
    transform: translateY(110%);
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--wi, 0) * 60ms);
  }
  .js .hero.hero-in h1.split .w > span {
    transform: translateY(0);
  }
  .js .hero .lede,
  .js .hero .cta-row {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
  }
  .js .hero .lede {
    transition-delay: 700ms;
  }
  .js .hero .cta-row {
    transition-delay: 850ms;
  }
  .js .hero.hero-in .lede,
  .js .hero.hero-in .cta-row {
    opacity: 1;
    transform: none;
  }
  .js .hero.hero-in .hero-bg {
    animation: heroBgIn 1.6s cubic-bezier(.22, 1, .36, 1);
  }
  @keyframes heroBgIn {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
  }

  /* 3. ABOUT PARALLAX. Clip the figure, oversize the image. */
  .js figure[data-parallax] {
    overflow: hidden;
  }
  .js figure[data-parallax] img {
    transform: scale(1.12);
  }

  /* 4. SECTION HEADLINE REVEALS. Same word masks as the hero, plus blur. */
  .js h2.split .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
  }
  .js h2.split .w > span {
    display: inline-block;
    transform: translateY(110%);
    filter: blur(6px);
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease;
    transition-delay: calc(var(--wi, 0) * 60ms);
  }
  .js h2.split.words-in .w > span {
    transform: translateY(0);
    filter: blur(0);
  }

  /* 6. SERVICE TILES. Per tile stagger driven by --i set from JS. */
  .js .service-grid li.reveal {
    transition: opacity 600ms cubic-bezier(.16, 1, .3, 1), transform 600ms cubic-bezier(.16, 1, .3, 1), border-color 220ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i) * 50ms), calc(var(--i) * 50ms), 0s;
  }

  /* 7. WORK GALLERY TILT. Smooth reset when the pointer leaves. */
  .js .work-item.tilt {
    transition: transform 500ms ease;
  }
  .js .work-item.tilt img {
    transition: transform 500ms ease;
  }

  /* 8. PROCESS STACK. Fast linear follow while steps cover each other. */
  .js .process-step.is-visible {
    transition: transform 200ms linear, opacity 200ms linear;
  }

  /* 9. FOOTER WORDMARK. Two spans rise with a short stagger. */
  .js .footer-mark span {
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 900ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1);
  }
  .js .footer-mark span:nth-child(2) {
    transition-delay: 120ms;
  }
  .js .footer-mark.mark-in span {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero h1.split .w > span,
  .js .hero .lede,
  .js .hero .cta-row,
  .js .hero .hero-bg,
  .js figure[data-parallax] img,
  .js h2.split .w > span,
  .js .service-grid li,
  .js .work-item.tilt,
  .js .work-item.tilt img,
  .js .process-step,
  .js .footer-mark span {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
}