/* THE MOTION LAYER'S CSS. AGENTS.md, "The motion foundation". Loaded without blocking first paint (a print-media
   link swapped to all on load, scripts/build-design-site.mjs), on the pages scripts/motion-map.mjs names. It owns only
   the Reviews pause control and the print backstop. Everything that must hold from the first frame (the waiting state,
   the count overlay, the hero rise, the lift, the At scale cut, the first-screen hero) is written by the build into a
   small inline <style> in the page head, from the same map design/motion.js reads, so a number is typed once. !important
   is used only where an inline drawn style must be beaten. The script never writes a position, a colour or a display
   value directly: it sets a data attribute or a custom property, and every rule reads one of those. */

/* --- Reviews: the pause control and the paused state for both rows. Both rows are found by their
   own drawn animation name rather than a build-tool id, so a recompose cannot silently stop this
   from matching. Hover or focus inside the row stack pauses without needing the button; WCAG 2.2.2
   requires the button regardless, for anyone who cannot hover or tab into the stack itself. */
[data-lib="Reviews"] > div:nth-child(2)[data-vt-paused] [style*="vt-marquee"],
[data-lib="Reviews"] > div:nth-child(2):hover [style*="vt-marquee"],
[data-lib="Reviews"] > div:nth-child(2):focus-within [style*="vt-marquee"] {
  animation-play-state: paused !important;
}
[data-vt-pause-btn] {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 16px;
  right: max(16px, calc((100% - var(--max)) / 2 + 16px));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: var(--bw-hair) solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur-hover) var(--ease);
}
[data-vt-pause-btn]:hover { border-color: var(--ink); }
[data-vt-pause-btn]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pink-ring); }
[data-vt-pause-btn] svg { display: block; }

/* --- Print and reduced motion: nothing this layer drives is ever hidden or held. beforeprint
   also resolves every pending appear animation to its end state in design/motion.js; this is the
   CSS backstop in case print fires before that runs. */
/* The hiding rule and its print override are in the inline <style> in <head> (scripts/build-design-site.mjs); under
   reduced motion design/motion.js never starts, so nothing is ever hidden. */