/* Motion kit (base/components/motion), owner 2026-09-30: "Start & EDS lack of
   animation". Every Start site ships it. Mark elements with data-motion; the
   page links motion.css and motion.js (no inline style or script: the shipped
   CSP refuses both).

   Safety rules built in:
   - The hero entrance is pure CSS and never hides the opening image: the image
     only settles from a slight zoom, so the LCP paints at once.
   - Scroll reveals hide nothing until motion.js has marked the page
     (html.motion-on), and motion.js marks only content below the first screen,
     so nothing visible flickers.
   - ?motion=off turns the reveals off for a still screenshot.
   - prefers-reduced-motion: every rule below is off; content is static.
   - Only transform, opacity, clip-path and colours move: no layout property
     (scripts/qa/motion.mjs fails width/height/margin/padding transitions).

   What scripts/qa/motion.mjs measures, and what satisfies it:
   - entrance: data-motion="hero-line" on the h1 and its lines;
   - reveal: data-motion="reveal" on every section of <main> below the first
     screen (the probe watches each main > * block move as it is scrolled to);
   - controls: every link and button gets a transition below. */

:root {
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-dur: 700ms;
  --m-rise: 24px;
  --m-stagger: 80ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Hero entrance (no JS). */
  [data-motion="hero-image"] { animation: m-settle 1800ms var(--m-ease) both; transform-origin: 50% 40%; }
  [data-motion="hero-line"] { animation: m-rise var(--m-dur) var(--m-ease) both; animation-delay: calc(150ms + var(--m-i, 0) * 120ms); }
  [data-motion="hero-line"]:nth-of-type(1) { --m-i: 0; }
  [data-motion="hero-line"]:nth-of-type(2) { --m-i: 1; }
  [data-motion="hero-line"]:nth-of-type(3) { --m-i: 2; }
  [data-motion="hero-line"]:nth-of-type(4) { --m-i: 3; }
  [data-motion="hero-line"]:nth-of-type(5) { --m-i: 4; }

  /* 2. Scroll reveals (JS marks them). */
  html.motion-on [data-motion="reveal"].m-wait { opacity: 0; transform: translateY(var(--m-rise)); }
  html.motion-on [data-motion="reveal"] { transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); }
  html.motion-on [data-motion="stagger"].m-wait > * { opacity: 0; transform: translateY(var(--m-rise)); }
  html.motion-on [data-motion="stagger"] > * { transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); transition-delay: calc(var(--m-i, 0) * var(--m-stagger)); }
  /* One row stays uncovered: a target clipped to nothing never intersects, so
     IntersectionObserver would never report it and the picture stayed hidden. */
  html.motion-on [data-motion="wipe"].m-wait { clip-path: inset(0 0 calc(100% - 1px) 0); }
  html.motion-on [data-motion="wipe"] { transition: clip-path 1000ms var(--m-ease); }
  html.motion-on [data-motion="wipe"] img { transition: transform 1400ms var(--m-ease); }
  html.motion-on [data-motion="wipe"].m-wait img { transform: scale(1.12); }

  /* 3. Hover and focus: cards lift, pictures breathe, arrows nudge. */
  [data-motion="lift"] { transition: transform 260ms var(--m-ease), box-shadow 260ms var(--m-ease); }
  @media (hover: hover) {
    [data-motion="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(0 0 0 / .12); }
    [data-motion="zoom"] img { transition: transform 700ms var(--m-ease); }
    [data-motion="zoom"]:hover img { transform: scale(1.05); }
    [data-motion="nudge"] .m-arrow { display: inline-block; transition: transform 220ms var(--m-ease); }
    [data-motion="nudge"]:hover .m-arrow { transform: translateX(4px); }
  }
  [data-motion="lift"]:focus-within { transform: translateY(-4px); }
  [data-motion="zoom"] { overflow: hidden; }

  /* Every control answers the pointer; :where() keeps this at zero specificity
     so a site's own transition wins. */
  :where(a[href], button, summary, [role="button"]) { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, opacity 200ms ease; }
  :where(a[href], button):active { transform: scale(.98); }

  /* 4. Header: solid once the page scrolls (JS sets .m-scrolled). */
  [data-motion="header"] { transition: background-color 300ms ease, box-shadow 300ms ease; }
  [data-motion="header"].m-scrolled { box-shadow: 0 6px 20px rgb(0 0 0 / .08); }

  /* 5. A gentle pulse for the one action that matters most (WhatsApp). */
  [data-motion="pulse"] { animation: m-pulse 2.8s ease-in-out 1.6s 3; }
}

@keyframes m-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-rise)); } to { opacity: 1; transform: none; } }
@keyframes m-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / .45); } 50% { box-shadow: 0 0 0 12px rgb(37 211 102 / 0); } }