:root {
  --motion-fast: 180ms;
  --motion-ease-out: cubic-bezier(.23, 1, .32, 1);
}
.brand > svg { width: 100%; height: auto; }
.bcp-motion-mark { max-width: 100%; }
.button {
  transition: transform var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast) ease;
}
.button:hover { transform: none; }
.text-link .arrow,
.service-row > .arrow,
.need-top .arrow,
.button .arrow {
  transition: transform 220ms var(--motion-ease-out);
}
.service-row { position: relative; isolation: isolate; }
.service-row::before {
  content: '';
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  background: var(--green);
  opacity: 0;
  transform: scaleX(.97);
  transform-origin: left center;
  transition: opacity 220ms ease, transform 220ms var(--motion-ease-out);
}
.service-row:focus-visible::before { opacity: .32; transform: none; }
.desktop-nav > a:not(.button):not([aria-current])::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--motion-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .button:hover { transform: translateY(-2px); }
  html[data-motion="on"] .button:active { transform: translateY(0) scale(.98); }
  html[data-motion="on"] .button:hover .arrow,
  html[data-motion="on"] .text-link:hover .arrow { transform: translateX(4px); }
  html[data-motion="on"] .service-row:hover > .arrow { transform: translate(3px, -3px); }
  html[data-motion="on"] .need-entry:hover .arrow { transform: translate(2px, -2px); }
  .service-row:hover::before { opacity: .32; transform: none; }
  .desktop-nav > a:not(.button):hover::after { transform: scaleX(1); }
}
/* Keyboard navigation stays immediate, including an element that was hovered. */
html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] a,
html[data-input="keyboard"] a::before,
html[data-input="keyboard"] a::after,
html[data-input="keyboard"] .arrow { transition: none !important; }
html[data-input="keyboard"] a:focus-visible,
html[data-input="keyboard"] a:focus-visible .arrow { transform: none !important; }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] .bcp-motion-mark .motion-ball,
html[data-motion="off"] .bcp-motion-mark .motion-trail { animation: none !important; transform: none !important; }
html[data-motion="off"] .button,
html[data-motion="off"] .arrow,
html[data-motion="off"] a::before,
html[data-motion="off"] a::after { transition: none !important; }

.motion-showcase { padding-block: 35px 70px; }
.motion-showcase h1 { max-width: 800px; }
.motion-showcase > p { max-width: 650px; margin-top: 24px; }
.motion-stages { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 40px; }
.motion-stage { min-height: 300px; display: grid; place-items: center; padding: 32px; border: 1px solid var(--line); }
.motion-stage.dark { background: var(--ink); border-color: var(--ink); }
.motion-stage .bcp-motion-logo { width: 460px; }
.motion-stage .bcp-motion-symbole { width: 235px; }
.motion-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.motion-actions label { font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.motion-actions input { accent-color: var(--ink); width: 18px; height: 18px; }
.motion-showcase .note { margin-top: 20px; }
.motion-showcase[data-slow="true"] .is-playing .motion-ball,
.motion-showcase[data-slow="true"] .is-playing .motion-trail { animation-duration: 2900ms; }
@media (max-width:600px) {
  .motion-stages { grid-template-columns: 1fr; }
  .motion-stage { min-height: 230px; padding: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }
  .button, .arrow, a::before, a::after { transition: none !important; }
  .button:hover, .button:hover .arrow, .text-link:hover .arrow,
  .service-row:hover > .arrow, .need-entry:hover .arrow { transform: none !important; }
}