/* Scroll arrivals, edwebmedia.com (2026-11-06, Edweb Future improvement 4). Pairs with calm/motion.js, which adds
   html.mp-on only when motion is allowed. Each section its own move; desktop only; text and photos never sit faded. */

:root {
  --e-rise: cubic-bezier(0.2, 0.7, 0.2, 1);
  --e-line: cubic-bezier(0.3, 0.6, 0.2, 1);
  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-spring: linear(0, 0.152 4.2%, 0.342 8.3%, 0.493 12.5%, 0.611 16.7%, 0.701 20.8%, 0.770 25%, 0.824 29.2%, 0.865 33.3%, 0.896 37.5%, 0.920 41.7%, 0.939 45.8%, 0.953 50%, 0.964 54.2%, 0.972 58.3%, 0.979 62.5%, 0.984 66.7%, 0.987 70.8%, 0.990 75%, 0.993 79.2%, 0.994 83.3%, 0.996 87.5%, 0.997 91.7%, 0.997 95.8%, 1);
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.mp-on .step, html.mp-on .step--feature { animation: none !important; }   /* the old scroll-tied stage rise is replaced by the rail */
  html.mp-on main section.band { overflow-x: clip; }

  /* Headings: the heading is the window */
  html.mp-on .mp-h { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
  html.mp-on .mp-h > .mp-r { display: inline-block; transition: transform 1200ms var(--e-line); }
  html.mp-on .mp-h:not(.mp-in) > .mp-r { transform: translateY(110%); }

  /* Websites: one by one; the screenshot is solid within 450 ms; the coral rule draws */
  html.mp-on .mv-rise { transition: transform 1300ms var(--e-line), opacity 450ms var(--e-out); transition-delay: calc(var(--i, 0) * 130ms); }
  html.mp-on .mv-rise:not(.mv-in) { opacity: 0; transform: translateY(20px); }
  html.mp-on .work-three .work-tile figcaption { position: relative; border-top-color: transparent; }
  html.mp-on .work-three .work-tile figcaption::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--coral); transform-origin: left center; transition: transform 1600ms var(--e-line); transition-delay: calc(var(--i, 0) * 130ms); }
  html.mp-on .work-tile:not(.mp-ln) figcaption::before { transform: scaleX(0); }

  /* Services and the contact card: settle solid, no fade (Edgar 2026-10-23: a dark card must not show grey) */
  html.mp-on .mv-settle { transition: transform 1071ms var(--e-spring); }
  html.mp-on .mv-settle:not(.mv-in) { transform: translateY(28px) scale(0.98); }

  /* Prices: the figure climbs out of its own line, card after card */
  html.mp-on .mv-pm { display: inline-block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: bottom; }
  html.mp-on .pcard-price .mv-pr { display: inline-block; font-size: inherit; color: inherit; transition: transform 900ms var(--e-rise); transition-delay: calc(120ms + var(--i, 0) * 160ms); }
  html.mp-on .pcard:not(.mv-in) .mv-pr { transform: translateY(105%); }

  /* Questions: a light fade with an 8 px lift */
  html.mp-on .mv-list { transition: transform 600ms var(--e-out), opacity 600ms var(--e-out); transition-delay: calc(var(--i, 0) * 50ms); }
  html.mp-on .mv-list:not(.mv-in) { opacity: 0; transform: translateY(8px); }
}

/* Steps: the rail exists from 1081 px; the line runs through the dots, each dot lights as it is reached */
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  html.mp-on .mv-rail .step::before { transition: transform 300ms linear; transition-delay: calc(var(--si, 0) * 300ms); }
  html.mp-on .mv-rail:not(.mv-in) .step::before { transform: scaleX(0); }
  html.mp-on .mv-rail .step::after { transition: transform 420ms var(--e-out); transition-delay: calc(var(--si, 0) * 300ms); }
  html.mp-on .mv-rail:not(.mv-in) .step::after { transform: scale(0.4); }
}
/* Phones and tablets (900 px and under): nothing in this file applies, the page stays still. */