/*
  taste-skill motion.css - the micro-interactions a company site has (figma.com, x.ai): one small
  opt-in layer over system.css and ui/cards.css. Link it after them (data-motion on <html> is optional);
  load motion.js once (it adds the tab indicator, the number tick and the card loops).
  The layer is ON as soon as this file is linked: no attribute is needed (a hover shot of a linked card or photo
  shows the 2px lift and the 1.03 zoom). <html data-motion="off"> switches the whole layer off; data-motion="live"
  is the number tick in a headless shot (motion.js).
  references/motion.md says what moves and how fast. Everything here answers the pointer, the
  keyboard or a number coming into view once, plus the hero's one entrance on load (the end of this
  file); nothing moves because the page scrolled (that is a dealt moment's job, assets/moments).

  Hover moves sit under (hover: hover) and (pointer: fine): a phone never keeps a stuck hover.
  Hover out runs 120ms against 150ms in (motion.md, tokens).
  Under prefers-reduced-motion colours still change and a press still shows; nothing moves or scales.
*/

:root {
  --m-in: 150ms;                              /* hover in: buttons, links, nav, tabs */
  --m-out: 120ms;                             /* hover out */
  --m-press: 90ms;                            /* a press */
  --m-panel: 200ms;                           /* a menu or sheet opening */
  --m-close: 120ms;                           /* a menu closing */
  --m-slide: 240ms;                           /* an indicator travelling between two tabs or links */
  --m-image: 600ms;                           /* a photograph scaling inside its mask */
  --m-image-out: 400ms;                       /* ...and settling back */
  --m-ease: var(--ease, cubic-bezier(.2, .8, .2, 1)); /* the one UI ease-out (system.css --ease): fast start, soft landing */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);  /* the indicator: leaves and lands softly */
  --m-ease-enter: cubic-bezier(.22, 1, .36, 1); /* an entrance settling: long soft tail, never past its mark */
  --m-cycle: 3.2s;                            /* one cycle of a card's loop (2.5-4 s) */
  --m-lift: -2px;
}

/* ---------------------------------------------------------------- buttons */
html:not([data-motion="off"]) .btn {
  position: relative;
  transition: background-color var(--m-out) var(--m-ease), color var(--m-out) var(--m-ease),
              border-color var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease),
              transform var(--m-press) var(--m-ease);
}
/* the tone moves toward the ground: a black button greys a little on white, a white one on black */
html:not([data-motion="off"]) .btn--primary:hover { background: color-mix(in oklab, var(--action) 84%, var(--bg)); }
html:not([data-motion="off"]) .btn--secondary:hover {
  background: color-mix(in oklab, var(--bg) 92%, var(--ink));
  border-color: color-mix(in oklab, var(--ink) 32%, transparent);
}
html:not([data-motion="off"]) .btn:hover { transition-duration: var(--m-in), var(--m-in), var(--m-in), var(--m-in), var(--m-press); }
html:not([data-motion="off"]) .btn:active { transform: translateY(1px) scale(.985); }
/* the step: a button rises 1px on hover (2px on the large size) and presses 1px down with a 1.5% shrink on
   click; pointer only. The text-link secondary (arrow and block looks) keeps its underline and does not step.
   Reduced motion keeps the colour change only (see the end of this file). */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .btn:hover { transform: translateY(-1px); }
  html:not([data-motion="off"]) .btn--xl:hover { transform: translateY(-2px); }
  html:not([data-motion="off"]):is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary:hover { transform: none; }
  html:not([data-motion="off"]) .btn:active { transform: translateY(1px) scale(.985); }
  html:not([data-motion="off"]):is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary:active { transform: scale(.985); }
}

/* the arrow: the text arrow (.btn--arrow, .link) nudges 3px; the drawn arrow (.m-arrow) grows its
   stem and moves its head 3px, the way a good product site's "Learn more" does. The pointer's move
   only for a fine pointer; keyboard focus shows it anywhere */
html:not([data-motion="off"]) :is(.btn--arrow, .link)::after { transition: transform var(--m-out) var(--m-ease); }
html:not([data-motion="off"]) :is(.btn--arrow, .link):focus-visible::after { transform: translateX(3px); transition-duration: var(--m-in); }
.m-arrow { width: 12px; height: 12px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6;
           stroke-linecap: round; stroke-linejoin: round; }
.m-arrow__stem { opacity: 0; transform: scaleX(.2); transform-origin: 1px 50%; transform-box: fill-box;
                 transition: opacity var(--m-out) var(--m-ease), transform var(--m-out) var(--m-ease); }
.m-arrow__head { transition: transform var(--m-out) var(--m-ease); }
:is(a, button):focus-visible > .m-arrow .m-arrow__stem { opacity: 1; transform: none; transition-duration: var(--m-in); }
:is(a, button):focus-visible > .m-arrow .m-arrow__head { transform: translateX(3px); transition-duration: var(--m-in); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) :is(.btn--arrow, .link):hover::after { transform: translateX(3px); transition-duration: var(--m-in); }
  :is(a, button):hover > .m-arrow .m-arrow__stem { opacity: 1; transform: none; transition-duration: var(--m-in); }
  :is(a, button):hover > .m-arrow .m-arrow__head { transform: translateX(3px); transition-duration: var(--m-in); }
}

/* a pill that is a link (the line above a hero headline) */
html:not([data-motion="off"]) a.pill { transition: background-color var(--m-out) var(--m-ease), border-color var(--m-out) var(--m-ease); }
html:not([data-motion="off"]) a.pill:hover { background: color-mix(in oklab, var(--card) 90%, var(--ink)); border-color: var(--line-strong); transition-duration: var(--m-in); }

/* ---------------------------------------------------------------- links: an underline that draws */
/* .link and links in running text: a rest line, and the ink line draws left to right on hover and
   leaves to the right. A link in a sentence rests on its own colour at 45% (about 3.3:1 on its
   ground), so it reads as a link even when it is the same colour as the text (WCAG 1.4.1); .link
   and .m-link carry an arrow or sit alone and rest on the faint hairline */
html:not([data-motion="off"]) :is(.link, .m-link, p a:not([class]), .footer ul a, .footer .link) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--m-rest, var(--line-strong)), var(--m-rest, var(--line-strong)));
  background-repeat: no-repeat; background-size: 0% 1px, 100% 1px;
  background-position: right 0 bottom 0, 0 100%;
  transition: background-size var(--m-out) var(--m-ease), color var(--m-out) var(--m-ease);
  padding-bottom: 2px;
}
/* set on its own rule: the shared rule above is (0,3,1) through :is(.footer .link) and would win */
html:not([data-motion="off"]) p a:not([class]) { --m-rest: color-mix(in oklab, currentColor 45%, transparent); }
html:not([data-motion="off"]) :is(.footer ul a, .m-link--bare):not(:hover, :focus-visible) { background-size: 0% 1px, 0% 1px; }
html:not([data-motion="off"]) :is(.link, .m-link, p a:not([class]), .footer ul a, .footer .link):is(:hover, :focus-visible) {
  background-size: 100% 1px, 100% 1px; background-position: left 0 bottom 0, 0 100%; transition-duration: var(--m-in);
}
/* the link's arrow is not underlined: the line runs under the words only */
html:not([data-motion="off"]) .link { background-size: 0% 1px, calc(100% - 1em - var(--s-2)) 1px; }
html:not([data-motion="off"]) .link:is(:hover, :focus-visible) { background-size: calc(100% - 1em - var(--s-2)) 1px, calc(100% - 1em - var(--s-2)) 1px; }
html:not([data-motion="off"]) .link, html:not([data-motion="off"]) .link:is(:hover, :focus-visible) { background-position: 0 100%, 0 100%; }
html:not([data-motion="off"]) .footer ul a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- navigation */
/* the nav words take no pill (ST-08, ST-11): system.css draws the underline under a word from the left on hover and focus, and
   takes it away to the right; the page you are on keeps its still bar (system.css draws it, at the same inset) */
@media (min-width: 1024px) {
  /* the full-width panel: fades and settles 6px in 200ms with its columns together (one surface, read
     as one); it closes in 120ms. While one menu is open, the next word swaps the panel at once
     (motion.js .m-menu-open) */
  html:not([data-motion="off"]) .nav__menu {
    transform: translateY(-6px);
    transition: opacity var(--m-close) var(--m-ease), transform var(--m-close) var(--m-ease), visibility 0s linear var(--m-close);
  }
  html:not([data-motion="off"]) .nav__item:is(:hover, :focus-within) > .nav__menu {
    transition: opacity var(--m-panel) var(--m-ease) 150ms, transform var(--m-panel) var(--m-ease) 150ms, visibility 0s linear 150ms;
  }
  /* .m-menu-open comes on when the first panel starts to show (150ms): from then the next word swaps
     the panel at once. Duration and delay go to 0, the properties stay listed, so the panel that is
     still fading in finishes its own 200ms instead of snapping */
  html:not([data-motion="off"]) .nav.m-menu-open .nav__menu,
  html:not([data-motion="off"]) .nav.m-menu-open .nav__item:is(:hover, :focus-within) > .nav__menu { transition-duration: 0s; transition-delay: 0s; }
  html:not([data-motion="off"]) .menu-col a { transition: color var(--m-out) var(--m-ease); }
  html:not([data-motion="off"]) .menu-col a:hover { transition-duration: var(--m-in); }
  html:not([data-motion="off"]) .menu-card .panel { transition: border-color var(--m-out) var(--m-ease); }
}
/* the phone sheet slides in 8px and fades (system.js opens it) */
@media (max-width: 1023px) {
  html:not([data-motion="off"]) .nav.is-open .nav__links { transition: opacity var(--m-panel) var(--m-ease), transform var(--m-panel) var(--m-ease); }
  @starting-style { html:not([data-motion="off"]) .nav.is-open .nav__links { opacity: 0; transform: translateY(-8px); } }
}

/* ---------------------------------------------------------------- tabs: the indicator slides */
html:not([data-motion="off"]) .tabs.m-has-ind { position: relative; isolation: isolate; }
html:not([data-motion="off"]) .tabs.m-has-ind .tab { position: relative; z-index: 1; }
html:not([data-motion="off"]) .tabs.m-has-ind .tab[aria-selected="true"] { background: transparent; border-color: transparent; }
/* the pill takes its new size at once and travels by transform alone (motion.js: it starts scaled to
   the old tab's size at the old place and settles to scale 1 at the new one), so nothing is laid out
   again while it moves and its corners are true at rest */
.m-tab-ind {
  position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0px); height: var(--h, 0px);
  border-radius: var(--r-btn); background: var(--ink); pointer-events: none;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--sx, 1), var(--sy, 1)); transform-origin: 0 0;
  transition: transform var(--m-slide) var(--m-ease-io);
}
.m-tab-ind.is-jump { transition: none; }
html:not([data-motion="off"]) .tab { transition: color var(--m-slide) var(--m-ease), border-color var(--m-out) var(--m-ease), background-color var(--m-out) var(--m-ease); }

/* ---------------------------------------------------------------- focus */
/* the ring (system.css) is drawn in full in the frame the focus lands; no transition */

/* ---------------------------------------------------------------- cards: a 2px lift */
/* the card rises 2px, its border and shadow deepen; a card without its own box (.card--open) lifts
   its panel. Never tilts, flips or follows the pointer */
html:not([data-motion="off"]) .card:not(.card--open, .card--plan) {
  transition: transform var(--m-out) var(--m-ease), border-color var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease);
}
html:not([data-motion="off"]) .card--open > .panel { transition: transform var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .card:not(.card--open, .card--plan, .m-nolift):hover {
    transform: translateY(var(--m-lift));
    border-color: color-mix(in oklab, var(--ink) 16%, transparent);
    /* the shadow is deeper on a dark card (its lightness l): about .2 on white, .64 on near-black */
    box-shadow: inset 0 1px 0 var(--c-hi, transparent), 0 1px 2px rgb(0 0 0 / .06),
                0 14px 32px -18px oklch(from var(--card, #fff) 0 0 0 / calc(0.75 - l * 0.55));
    transition-duration: 180ms;
  }
  html:not([data-motion="off"]) .card--open:not(.m-nolift):hover > .panel {
    transform: translateY(var(--m-lift)); box-shadow: 0 14px 32px -18px oklch(from var(--bg, #fff) 0 0 0 / calc(0.75 - l * 0.55)); transition-duration: 180ms;
  }
}

/* ---------------------------------------------------------------- photographs: 1.03 inside the mask */
/* a photograph in a link or a linked card grows 3% inside its own mask (the frame, the tile, a .m-zoom wrapper);
   the mask clips it, so the box never moves. .m-zoom is the hook for any other photograph: wrap it. */
.m-zoom { overflow: clip; }
html:not([data-motion="off"]) :is(.frame__img, .tile__media > img, .m-zoom img, .m-zoom > video) {
  transition: transform var(--m-image-out) var(--m-ease);
}
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) :is(a, .card:has(a), .m-zoom):hover :is(.frame__img, .tile__media > img),
  html:not([data-motion="off"]) .m-zoom:hover :is(img, video) { transform: scale(1.03); transition-duration: var(--m-image); }
}

/* ---------------------------------------------------------------- inputs, switches, checks */
html:not([data-motion="off"]) .field :is(input, select, textarea), .m-input {
  transition: border-color var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease), background-color var(--m-out) var(--m-ease);
}
html:not([data-motion="off"]) .field :is(input, select, textarea):hover, .m-input:hover { border-color: color-mix(in oklab, var(--ink) 48%, transparent); }
html:not([data-motion="off"]) .field :is(input, select, textarea):focus, .m-input:focus {
  /* the field's own ring in place of the outline: a 2px line in --action (3:1 on the ground) and a soft halo,
     there at once like every focus ring (the hover's fade does not apply to focus) */
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action), 0 0 0 4px color-mix(in oklab, var(--action) 20%, transparent); transition-duration: 0s;
}
/* a switch: <button class="m-switch" role="switch" aria-checked="false" aria-label="..."></button>
   (motion.js flips aria-checked on click unless the page handles it). The knob slides in 180ms and
   stretches 4px while pressed, both by transform (a scaleX from its left edge; on, the 12px shift
   keeps its right edge where it rests). The off track is ink at 48% (3.3:1 or more against the knob
   and the ground, the 3:1 a control needs) */
.m-switch {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--ink) 48%, var(--bg));
  transition: background-color 180ms var(--m-ease);
}
.m-switch::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--bg); box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transform-origin: 0 50%; transition: transform 180ms var(--m-ease);
}
.m-switch[aria-checked="true"] { background: var(--action); }
.m-switch[aria-checked="true"]::before { transform: translateX(16px); background: var(--action-ink); }
.m-switch:active::before { transform: scaleX(1.22); transition-duration: var(--m-press); }
.m-switch[aria-checked="true"]:active::before { transform: translateX(12px) scaleX(1.22); }
.m-switch:hover:not([aria-checked="true"]) { background: color-mix(in oklab, var(--ink) 58%, var(--bg)); }
/* a check box: <input type="checkbox" class="m-check">, the tick fades in as it grows from 70% to full size, 160ms */
.m-check {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--ink) 48%, var(--bg)); background: var(--bg) no-repeat center / 14px 14px;
  display: inline-grid; place-items: center;
  transition: background-color var(--m-in) var(--m-ease), border-color var(--m-in) var(--m-ease);
}
.m-check::before {
  content: ""; width: 10px; height: 6px; margin-top: -2px; border: solid var(--action-ink); border-width: 0 0 2px 2px;
  opacity: 0; transform: rotate(-45deg) scale(.7); transform-origin: 50% 50%;
  transition: transform 160ms var(--m-ease), opacity 100ms var(--m-ease);
}
.m-check:hover:not(:checked) { border-color: color-mix(in oklab, var(--ink) 64%, var(--bg)); }
.m-check:checked { background-color: var(--action); border-color: var(--action); }
.m-check:checked::before { opacity: 1; transform: rotate(-45deg) scale(1); }

/* ---------------------------------------------------------------- FAQ
   Every answer stays open (ST-47, system.css): nothing here opens, closes or animates its height. */

/* ---------------------------------------------------------------- numbers that tick once */
[data-m-count] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- loops inside a card's panel */
/* a CSS loop the page writes inside [data-m-loop] runs one cycle in --m-cycle (2.5-4 s) and repeats
   while on screen; motion.js pauses it off screen and restarts it on hover (motion.md) */
[data-m-loop] { --m-cycle: 3.2s; --m-still: 0.6; --m-safe: 48px; }
/* the pause button (a 32px disc 12px in from the bottom-right corner) gets a clear band: content in
   the flow ends --m-safe (48px) above the bottom edge, and a fading stage dissolves above that band,
   never under the button. Size the panel so the loop's subject sits above the fade */
[data-m-loop]:not(:has(> .stage)) { padding-bottom: var(--m-safe); }
[data-m-loop] > .stage:is(.stage--fade-b, .stage--fade-br) { bottom: var(--m-safe); }
/* on a phone (as ui.js does) and under reduced motion a loop holds its finished picture: the frame at
   --m-still (0-1) of the cycle, set on the loop where the picture is complete */
@media (max-width: 639px) {
  [data-m-loop] * { animation-duration: var(--m-cycle) !important; animation-delay: calc(-1 * var(--m-still) * var(--m-cycle)) !important;
                    animation-play-state: paused !important; }
}
[data-m-loop].is-m-off *, [data-m-loop].is-m-paused * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- the hero's entrance */
/* Once on load the hero enters (motion.js enter(), motion.md): the h1 line by line out of word masks,
   then its lead, each button and its facts 60ms apart, the picture settling; about 1.1 s.
   Markup: data-enter on the hero <section> and the one head line that sets html.m-enter before the
   first paint (with its 700ms safety mark, m-enter-done). Only the words wait, and only in that window
   until motion.js takes over (.is-entering): no script, reduced motion, print and data-motion="off"
   show the hero as written; a script later than the mark finds the words fading in here.
   The pictures (a photograph, a window, the collage) are never hidden, so nothing blinks or flashes
   the hero's ground: a photograph waits at 1.05 and a window or collage at .98, by the scale property
   (it composes with any transform of their own), and they settle by transition as soon as the
   entrance starts or the mark passes. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.m-enter:not(.m-enter-done, [data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-entering, .is-entered)
    :is(h1, h1 ~ *, :has(> h1) ~ *, :has(~ h1)):not([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage,
         :has([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage)) { opacity: 0; }
  /* the mark passed before motion.js arrived: the words fade in instead of appearing at once */
  html.m-enter.m-enter-done:not([data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-entering, .is-entered)
    :is(h1, h1 ~ *, :has(> h1) ~ *, :has(~ h1)) { transition: opacity 400ms var(--m-ease); }
  /* the settle: a photograph from 1.05 inside its frame (the hero clips one of its own), anything else from .98 */
  html.m-enter:not([data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-still)
    :is(:is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage):is(img, picture, video),
        :is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage) > :is(img, picture, video, .frame__img)) {
    transition: scale 1100ms var(--m-ease-enter), clip-path 1100ms var(--m-ease-enter);
  }
  /* the clip's resting value, kept below the waiting rule's weight so that one wins while it applies */
  .hero[data-enter] :is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage):is(img, picture, video) { clip-path: inset(0); }
  html.m-enter:not([data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-still)
    :is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage):not(img, picture, video, :has(> :is(img, picture, video, .frame__img))) {
    transition: scale 900ms var(--m-ease-enter);
  }
  html.m-enter:not(.m-enter-done, [data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-entering, .is-entered)
    :is(:is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage):is(img, picture, video),
        :is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage) > :is(img, picture, video, .frame__img)) { scale: 1.05; }
  html.m-enter:not(.m-enter-done, [data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-entering, .is-entered)
    :is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage):is(img, picture, video) { clip-path: inset(2.381%); }   /* a picture that is itself the media (a band under the header, a full-bleed layer) has no frame: its own clip keeps it inside its box while larger, (1 - 1/1.05) / 2 */
  html.m-enter:not(.m-enter-done, [data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-entering, .is-entered)
    :is([data-enter-media], .hero__bg, .hero__media, .hero__stage, .hero__art, .hero__window, .hero-visual, .ly-collage):not(img, picture, video, :has(> :is(img, picture, video, .frame__img))) { scale: .98; }
  html.m-enter:not([data-motion="off"]) .hero[data-enter]:not([data-enter="off"], .is-entered) { overflow: clip; }
}
/* while it runs: each word of the h1 in its own mask (the masks go when the h1 gets its own nodes back) */
.hero[data-enter] .m-w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero[data-enter] .m-w__in { display: inline-block; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="off"]) .card:hover, html:not([data-motion="off"]) .card--open:hover > .panel,
  html:not([data-motion="off"]) :is(a, .card:has(a), .m-zoom):hover :is(.frame__img, .tile__media > img, img, video),
  html:not([data-motion="off"]) .btn:is(:hover, :active), html:not([data-motion="off"]) :is(.btn--arrow, .link):hover::after,
  :is(a, button):hover > .m-arrow :is(.m-arrow__head, .m-arrow__stem) { transform: none !important; }
  .m-arrow__stem { opacity: 1; transform: none; }
  html:not([data-motion="off"]) .nav__menu { transform: none !important; }
  /* the controls keep their state and their colour change, without travel: the tab pill and the switch
     knob jump, the tick fades in at full size, the underline is drawn at once */
  .m-tab-ind { transition: none; }
  .m-switch::before { transition-property: background-color; }
  .m-switch:active::before { transform: none; }
  .m-switch[aria-checked="true"]::before, .m-switch[aria-checked="true"]:active::before { transform: translateX(16px); }
  .m-check::before { transform: rotate(-45deg) scale(1); transition-property: opacity; }
  html:not([data-motion="off"]) :is(.link, .m-link, p a:not([class]), .footer ul a, .footer .link) { transition-property: color, opacity, background-color, border-color; }
  /* a press still shows, as a deeper tone instead of a move */
  html:not([data-motion="off"]) .btn--primary:active { background: color-mix(in oklab, var(--action) 74%, var(--bg)); }
  html:not([data-motion="off"]) .btn--secondary:active { background: color-mix(in oklab, var(--bg) 86%, var(--ink)); }
  [data-m-loop] * { animation-duration: var(--m-cycle) !important; animation-iteration-count: infinite !important;
                    animation-delay: calc(-1 * var(--m-still) * var(--m-cycle)) !important; animation-play-state: paused !important; }
}