/* styles/motion.css
 * Final-touch motion (BRI-7805). Two movements, one vocabulary: rise --space-12 and fade,
 * decelerating over --ease-settle. Transform and opacity only.
 * Entrance (.settle): a CSS animation from first paint, so it needs no JS and cannot flash;
 * .settle--media follows the copy by three stagger steps. The workflow hero's slots are targeted
 * by class because the builder's markup is frozen. Fill mode is backwards only, so once the
 * entrance ends the element carries no transform.
 * Reveal ([data-reveal], and the marks inside [data-reveal-stagger]): js/motion.js marks a figure
 * below the viewport as pending and reveals it once when it enters. Without JS, for crawlers and in the
 * md siblings the figure is simply there; print shows everything.
 * Reduced motion removes the entrance; the script never adds a class; the utilities rule
 * zeroes anything left. Tokens: --dur-settle, --dur-reveal, --dur-stagger, --ease-settle. */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes settle {
      from {
        opacity: 0;
        transform: translateY(var(--space-12));
      }
    }

    .settle,
    .workflow-hero__inner > * {
      animation: settle var(--dur-settle) var(--ease-settle) var(--settle-delay, 0ms) backwards;
    }

    .settle--media,
    .workflow-hero__media {
      --settle-delay: calc(3 * var(--dur-stagger));
    }

    /* js/motion.js sets --reveal-i on each staggered child; a lone figure stays at 0. */
    [data-reveal],
    [data-reveal-stagger] > * {
      --reveal-i: 0;
    }

    [data-reveal].reveal-pending,
    [data-reveal-stagger] .reveal-pending {
      opacity: 0;
      transform: translateY(var(--space-12));
    }

    [data-reveal].reveal-in,
    [data-reveal-stagger] .reveal-in {
      opacity: 1;
      transform: none;
      transition: opacity var(--dur-reveal) var(--ease-settle), transform var(--dur-reveal) var(--ease-settle);
      transition-delay: calc(var(--reveal-i) * var(--dur-stagger));
    }

    /* A focus into a pending figure reveals it at once, so the ring is never faint. */
    [data-reveal].reveal-now,
    [data-reveal-stagger] .reveal-now {
      transition: none;
    }
  }

  @media print {
    .settle,
    .workflow-hero__inner > * {
      animation: none;
    }

    [data-reveal].reveal-pending,
    [data-reveal-stagger] .reveal-pending {
      opacity: 1;
      transform: none;
    }
  }
}