/*! WAPI Connect, "Kuwait Time": motion module "draw" styles (M12). Plan: .router/MOTION.md §4.1 H8.
    The flow drawing's svg sits exactly where the crop's picture sits (same rules as .w-cam > img: source px through the
    crop's --sw --sh --x --y --w --h, physical on purpose, a screenshot does not mirror). Since the clarity rollout
    (2026-10-31) no page tracks a drawn canvas: the home g-flow track rules are gone (that group is a data-calm explainer).
    Tokens only, no new colour; nothing here applies with reduced motion or without script. */

@media (prefers-reduced-motion: no-preference) {
  /* 1. the flow svg (made by draw.js): over the picture, under the pins */
  .w-cam > .w-flowsvg {
    position: absolute; display: block; overflow: hidden; pointer-events: none; max-inline-size: none;
    width: calc(var(--sw) / var(--w) * 100%);
    height: calc(var(--sh) / var(--h) * 100%);
    left: calc(var(--x) / var(--w) * -100%);
    top: calc(var(--y) / var(--h) * -100%);
  }
  /* the shutter's settle (wapi-layout.css gives the picture the same) */
  .w-ready [data-reveal] [data-r="shutter"] .w-cam > .w-flowsvg { transform: scale(1.05); transition: transform 1400ms var(--w-ease-soft); transition-delay: calc(var(--i, 0) * 80ms); }
  .w-ready [data-reveal].is-in [data-r="shutter"] .w-cam > .w-flowsvg { transform: none; }
}

/* Print: the plain page */
@media print {
  .w-flowsvg { display: none !important; }
  .w-cam > img { opacity: 1 !important; }
}