:root {
  --swin-motion-fast: 180ms;
  --swin-motion-base: 480ms;
  --swin-motion-ease: cubic-bezier(.22,1,.36,1);
}

.motion-card,
.motion-row,
.motion-control,
.motion-nav,
.motion-media > img:first-child {
  transition-duration: var(--swin-motion-fast);
  transition-timing-function: var(--swin-motion-ease);
}

.motion-card {
  transition-property: transform, box-shadow, border-color;
  transform: translateZ(0);
}

.motion-row {
  transition-property: transform, color, background-color;
  transform: translateZ(0);
}

.motion-control,
.motion-nav {
  transition-property: transform, color, background-color, border-color, box-shadow, filter, opacity;
}

.motion-media { overflow: hidden; }
.motion-media > img:first-child {
  transition-property: transform, filter;
  transform: scale(1.001);
}

.motion-ready .motion-reveal {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity var(--swin-motion-base) var(--swin-motion-ease),
    translate var(--swin-motion-base) var(--swin-motion-ease);
  transition-delay: var(--motion-delay,0ms);
}

.motion-ready .motion-section.is-motion-visible > .motion-reveal {
  opacity: 1;
  translate: 0 0;
}

.motion-control:focus-visible,
.motion-nav:focus-visible,
.motion-card:focus-visible,
.motion-row:focus-visible,
.motion-media:focus-visible {
  outline: 3px solid rgba(20,120,201,.48);
  outline-offset: 3px;
}

.motion-hover-enabled .motion-card:hover {
  border-color: rgba(20,120,201,.3);
  box-shadow: 0 16px 34px rgba(5,43,73,.16);
  transform: translate3d(0,-4px,0);
}

.motion-hover-enabled .motion-row:hover { transform: translate3d(4px,0,0); }

.motion-hover-enabled .motion-control:hover {
  filter: brightness(1.04);
  transform: translate3d(0,-2px,0);
}

.motion-hover-enabled .motion-nav:hover {
  color: #1478c9;
  transform: translate3d(0,-1px,0);
}

.motion-hover-enabled .motion-media:hover > img:first-child {
  filter: saturate(1.04);
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .motion-card,
  .motion-row,
  .motion-control,
  .motion-nav,
  .motion-media > img:first-child,
  .motion-ready .motion-reveal {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-ready .motion-reveal {
    opacity: 1;
    translate: 0 0;
  }
}