/* ========================================
   Components & Utilities
   ======================================== */
.theme {
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.theme.theme--frozen {
  transition: none;
}

.pattern {
  background-color: var(--c-bg);
  color: var(--c-fg);
  background-size: var(--pattern-size, 180px) var(--pattern-size, 180px);
  background-attachment: fixed;
}

.pattern.is-animating {
  animation: pattern-shift 120s linear infinite;
}

@keyframes pattern-shift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 40px;
  }
}

.hero__title {
  letter-spacing: 0.14em;
}

.hero__meta a {
  text-decoration: none;
}

.footer__nav a {
  text-decoration: none;
  border-bottom: var(--border) solid transparent;
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  border-bottom-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .pattern,
  .pattern.is-animating {
    animation: none;
    background-attachment: scroll;
  }

  .theme {
    transition: none;
  }
}