/* A-Concepts — scroll-linked motion, run by the browser's own scroll engine (HANDOFF §8zh).
 *
 *   <div data-drift="26" style="position:relative;aspect-ratio:16/9;overflow:hidden">
 *     <div data-ph data-file="…"></div>        <!-- or a plain <img> -->
 *   </div>
 *   <div data-drawn> <span aria-hidden="true"></span> <span>02</span> <span>Capabilities</span> </div>
 *
 *   data-drift   the frame holds still and the photograph moves inside it, against the scroll,
 *                by up to the attribute's px (16px on phones) or 4.5% of the frame's height,
 *                whichever is less — the 1.09 scale hides the travel at the edges.
 *   data-drawn   an eyebrow row: its aria-hidden rule draws itself and its labels arrive as the
 *                row rises to the middle of the screen.
 *
 * This replaced scroll-drift.js, which moved the photographs from JavaScript on every scroll
 * event: whenever the page was busy (decoding a large photograph, say) the drift fell a frame or
 * more behind the finger and juddered inside its frame. Here the browser drives it as it
 * scrolls, off the main thread, so it cannot lag.
 *
 * Browsers without scroll-driven animations, and anyone who asks for reduced motion, get the
 * finished state: rules drawn, labels shown, photographs still and unscaled.
 *
 * KEEP SCROLL CONTAINERS OUT OF THE WAY. An ancestor with overflow:hidden or overflow:auto (even
 * overflow-x:hidden alone, which turns the other axis into auto) is a scroll container, and the
 * timeline attaches to it instead of the page — the effect then freezes. Clip with
 * overflow:clip instead: it looks the same and is not a scroll container.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-drift] { --ac-drift: 30px; view-timeline: --ac-frame block; }
    [data-drift="18"] { --ac-drift: 18px; }
    [data-drift="26"] { --ac-drift: 26px; }
    [data-drift] > img,
    [data-drift] > [data-ph] {
      animation: ac-drift linear both;
      animation-timeline: --ac-frame;
      animation-range: cover 0% cover 100%;
    }
    /* entering at the bottom the photograph sits high in its frame, leaving at the top it sits
       low — so it appears to hold back as the page moves */
    @keyframes ac-drift {
      from { transform: translate3d(0, calc(-1 * min(var(--ac-drift), 4.5%)), 0) scale(1.09); }
      to { transform: translate3d(0, min(var(--ac-drift), 4.5%), 0) scale(1.09); }
    }

    [data-drawn] { view-timeline: --ac-row block; }
    [data-drawn] > span[aria-hidden="true"] {
      transform-origin: left center;
      animation: ac-draw linear both;
      animation-timeline: --ac-row;
      animation-range: cover 17% cover 50%;
    }
    [data-drawn] > span:not([aria-hidden]) {
      animation: ac-label linear both;
      animation-timeline: --ac-row;
      animation-range: cover 17% cover 50%;
    }
    @keyframes ac-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes ac-label { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
  }
}
/* phones: a gentler drift (the frames are smaller and the thumb is closer) */
@media (max-width: 700px) {
  [data-drift][data-drift] { --ac-drift: 16px; }
}