:root {
  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --motion-slow: 720ms;
  --motion-duration-fast: var(--motion-fast);
  --motion-duration-medium: var(--motion-medium);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-cinematic: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-standard: var(--ease-out);
}

html[data-motion="reduced"] {
  scroll-behavior: auto;
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}

html[data-page-visible="false"] .feather * {
  animation-play-state: paused !important;
}

html[data-performance="constrained"] .feather .fib,
html[data-performance="constrained"] .feather .glint {
  animation: none !important;
}

html[data-performance="constrained"] .motion-layer {
  display: none;
}

.motion-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  contain: strict;
  isolation: isolate;
}

.motion-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .motion-layer { display: none; }
}