:root {
  --motion-reveal-distance: 26px;
  --motion-visual-distance: 42px;
  --motion-reveal-duration: 780ms;
  --motion-settle-duration: 1100ms;
  --motion-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-entering {
  will-change: opacity, translate, scale;
}

@media (max-width: 760px) {
  :root {
    --motion-reveal-distance: 18px;
    --motion-visual-distance: 26px;
    --motion-reveal-duration: 680ms;
    --motion-settle-duration: 900ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-entering {
    will-change: auto;
  }
}