/* The existing UPVC visual system is unchanged. Motion is progressive enhancement. */
:root {
  --motion-fast: 150ms;
  --motion-state: 250ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}
/* Replace the old hidden-until-observed rule, including its no-JS failure mode. */
html body .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-motion-kind="image"] { transform-origin: center center; }
.button, .header-action, .finish-option, .thickness-options button, .board-colours button {
  transform-origin: center center;
  transition-property: background-color, color, border-color, box-shadow, scale;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-ease);
}
.button:active, .header-action:active, .finish-option:active,
.thickness-options button:active, .board-colours button:active { scale: .98; }
.button svg, .text-link > .arrow, .download-arrow, .source-link > span[aria-hidden] {
  transition: translate var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover svg, .text-link:hover > .arrow, .source-link:hover > span[aria-hidden] { translate: 3px 0; }
  .download-item:hover .download-arrow { translate: 0 3px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-kind] { translate: none !important; scale: none !important; clip-path: none !important; }
  .button:active, .header-action:active, .finish-option:active,
  .thickness-options button:active, .board-colours button:active { scale: none; }
  .button svg, .text-link > .arrow, .download-arrow, .source-link > span[aria-hidden] { translate: none !important; transition: none; }
}
@media print {
  [data-motion-kind] { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
}