/** Shared entrance animations. Classes are rendered directly in PHP markup. */
.fade-in,
.fade-up,
.fade-left,
.fade-right {
  --intro-x: 0;
  --intro-y: 0;
  opacity: 0;
  translate: var(--intro-x) var(--intro-y);
}

.fade-up {
  --intro-y: 32px;
}

.fade-left {
  --intro-x: -40px;
}

.fade-right {
  --intro-x: 40px;
}

.fade-in.is-animated,
.fade-up.is-animated,
.fade-left.is-animated,
.fade-right.is-animated {
  animation: intro-reveal 600ms cubic-bezier(.22, 1, .36, 1) both;
}

.fade-in[data-delay],
.fade-up[data-delay],
.fade-left[data-delay],
.fade-right[data-delay] {
  animation-delay: var(--anim-delay, 0ms);
}

@keyframes intro-reveal {
  from {
    opacity: 0;
    translate: var(--intro-x) var(--intro-y);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.site-footer__bottom a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s ease;
}

.site-footer__bottom a:hover, .site-footer__bottom a:focus-visible {
    color: var(--color-green);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-up,
  .fade-left,
  .fade-right {
    opacity: 1;
    translate: none;
    animation: none;
  }
}