/* Motion, first pass (phase 4). Tokens: motion/entrance/duration 700 with the
   overshoot easing, motion/word/duration 600, motion/easing/standard,
   motion/focus/blur 10. Cards have no tilt and no image zoom: only their
   component hover (DESIGN-NOTES 53). Everything here switches off
   under prefers-reduced-motion (the page is complete without it). */

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Entrances: rise into place as they enter the viewport ---------- */

  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(var(--space-48));
    transition:
      opacity var(--motion-entrance-duration) var(--motion-easing-standard),
      transform var(--motion-entrance-duration) var(--motion-entrance-easing);
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
  }

  .js-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* Words: each word lifts out of a mask, one after another */
  .js-motion [data-words] .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
  }

  .js-motion [data-words] .word > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform var(--motion-word-duration) var(--motion-entrance-easing);
    transition-delay: calc(var(--word-i, 0) * 70ms);
  }

  .js-motion [data-words].is-in .word > span {
    transform: none;
  }

  /* Typing (Home statement): motion.js types the letters with the scroll
     (.is-typed); the mark lands last as the final word, on the entrance curve. */
  .js-motion [data-type] .char {
    opacity: 0;
    transition: opacity 80ms linear;
  }

  .js-motion [data-type] .home-intro__mark {
    opacity: 0;
    transform: scale(0.6);
    transition:
      opacity 200ms var(--motion-easing-standard),
      transform var(--motion-entrance-duration) var(--motion-entrance-easing);
  }

  .js-motion [data-type] :is(.char, .home-intro__mark).is-typed {
    opacity: 1;
    transform: none;
  }

  /* Images: wipe open from the bottom edge */
  /* Focus pull: blur to sharp (motion/focus/blur) */
  .js-motion [data-focus] {
    filter: blur(var(--motion-focus-blur));
    opacity: 0;
    transition: filter var(--motion-word-duration) var(--motion-easing-standard), opacity var(--motion-word-duration) var(--motion-easing-standard);
  }

  .js-motion [data-focus].is-in {
    filter: none;
    opacity: 1;
  }

  /* ---------- Red wipe (Home Highlights, idea for review; DESIGN-NOTES 37) ----------
     motion.js moves a line from the bottom of the screen to the top with the
     scroll: below it the panel is red and the red card mats turn ink. Hard
     gradient stops at --wipe-at (px from each element's top). */
  .js-motion [data-red-wipe] {
    background: linear-gradient(var(--surface-canvas) var(--wipe-at, 100%), var(--color-red-500) 0);
  }

  .js-motion [data-red-wipe] .card-work:not([data-mat="ink"]) {
    background: linear-gradient(var(--color-red-500) var(--wipe-at, 100%), var(--color-base-black) 0);
  }

  /* An empty box over the red part, so the header reads it as a red chapter. */
  .red-wipe-zone {
    position: absolute;
    inset: auto 0 0;
    height: var(--wipe-zone-h, 0px);
    pointer-events: none;
  }

  /* ---------- Chapters stack: each holds when its bottom meets the viewport bottom ---------- */

  .js-stack [data-stack] {
    position: sticky;
    top: var(--stick-top, 0px);
  }

  /* Footer revealed from below: it waits under the last chapter */
  .js-stack .site-main {
    position: relative;
    z-index: 1;
    background: var(--surface-frame);
  }

  /* A held chapter's content fades into its surface as the next one covers it
     (motion.js sets --covered 0 → 1). Not the hero film. */
  .js-stack [data-stack]:not([data-header-clear]) > * {
    opacity: calc(1 - var(--covered, 0));
  }

  /* Frames are opaque and stacked (motion.js sets their z-index). */
  .js-stack .frame {
    position: relative;
    background: var(--surface-frame);
  }

  .js-stack .site-footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }

  /* ---------- Work page rails (desktop; motion.js builds them; DESIGN-NOTES 46) ---------- */
  .is-measuring [data-stack] {
    position: relative !important;
    top: auto !important;
  }

  .work-rails {
    position: absolute;
    top: 0;
    pointer-events: none;
  }

  .work-rails__seg {
    position: relative;
  }

  .work-rails .rail {
    position: sticky;
  }

  @media (min-width: 1200px) {
    .js-motion .work.has-rails .grid > .rail {
      visibility: hidden;
    }
  }

}