html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 88px;
}

body {
  transition: opacity 130ms ease;
}

body.page-leaving {
  opacity: 0.72;
  pointer-events: none;
}

.section-targeted {
  animation: section-target-feedback 1050ms ease-out;
}

@keyframes section-target-feedback {
  0% {
    box-shadow:
      inset 4px 0 0 rgba(12, 132, 72, 0),
      inset 0 0 0 9999px rgba(12, 132, 72, 0);
  }
  22% {
    box-shadow:
      inset 4px 0 0 rgba(12, 132, 72, 0.76),
      inset 0 0 0 9999px rgba(12, 132, 72, 0.045);
  }
  100% {
    box-shadow:
      inset 4px 0 0 rgba(12, 132, 72, 0),
      inset 0 0 0 9999px rgba(12, 132, 72, 0);
  }
}

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

  body,
  .section-targeted {
    animation: none;
    transition: none;
  }
}