/* ========================================
   LINK EFFECT
======================================== */

.site-nav a,
.link-item,
.site-logo,
.site-footer a {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.site-nav a:hover,
.site-logo:hover,
.site-footer a:hover {
  opacity: 0.55;
}

.link-item {
  transition:
    padding-left 220ms ease,
    background-color 220ms ease;
}

.link-item:hover {
  padding-left: 16px;
  background: var(--color-surface);
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}