/* motion: lively. Only transform and opacity. Nothing here applies when the visitor prefers reduced motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  html[data-motion] { --m-rise: 24px; --m-time: .7s; --m-step: 80ms; --m-zoom: 1.06; }
  html.m-on .m-in { opacity: 0; transform: translate3d(0, var(--m-rise), 0); transition: opacity var(--m-time) cubic-bezier(.2,.7,.2,1), transform var(--m-time) cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * var(--m-step)); will-change: opacity, transform; }
  html.m-on .m-in.m-zoom { transform: scale(var(--m-zoom)); }
  html.m-on .m-in.in { opacity: 1; transform: none; will-change: auto; }
  html.m-on .m-first { animation: m-up var(--m-time) cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * var(--m-step) + 80ms); }
  @keyframes m-up { from { opacity: 0; transform: translate3d(0, var(--m-rise), 0); } to { opacity: 1; transform: none; } }
  @media (hover: hover) {
    html.m-on a[class*="bg-"], html.m-on button { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
    html.m-on a[class*="bg-"]:hover, html.m-on button:hover { transform: translate3d(0, -2px, 0); }
    html.m-on .m-card img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
    html.m-on .m-card:hover img { transform: scale(var(--m-zoom)); }
  }
}