:root {
  --motion-duration-press: 100ms;
  --motion-duration-fast: 160ms;
  --motion-duration-enter: 240ms;
  --motion-duration-reveal: 600ms;
  --motion-duration-page: 200ms;
  --motion-ease: var(--ease-assembly, cubic-bezier(.22, 1, .36, 1));
}

/* Content is visible at rest; only finite Web Animations supply reveal frames. */
:is(.button, .text-link, .nav-cta) {
  transition:
    color var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease);
}

:is(.button, .text-link, .nav-cta) > span[aria-hidden="true"] {
  display: inline-block;
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.button:focus-visible {
  background: var(--blue-dark);
}

.nav-cta:focus-visible {
  background: var(--blue);
  color: var(--paper);
}

.text-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.button, .text-link, .nav-cta):hover > span[aria-hidden="true"] {
    transform: translate(3px, -3px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu-toggle > span {
    transition: transform var(--motion-duration-enter) var(--motion-ease);
  }

  .menu-toggle[aria-expanded="true"] > span {
    transform: rotate(45deg);
  }

  .text-link[href^="#"]:is(:hover, :focus-visible) > span[aria-hidden="true"] {
    transform: translateY(4px);
  }

  :is(.button, .text-link, .nav-cta):focus-visible > span[aria-hidden="true"] {
    transform: translate(3px, -3px);
  }

  :is(.button, .text-link, .nav-cta):active {
    transform: translateY(1px);
    transition-duration: var(--motion-duration-press);
  }

  :is(.button, .text-link, .nav-cta):active > span[aria-hidden="true"] {
    transform: translate(1px, -1px);
    transition-duration: var(--motion-duration-press);
  }
}

[data-reading-progress] {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-duration-page);
  animation-timing-function: var(--motion-ease);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  :is(.button, .text-link, .nav-cta),
  :is(.button, .text-link, .nav-cta) > span[aria-hidden="true"] {
    transition: none;
  }

  :is(.button, .text-link, .nav-cta):hover,
  :is(.button, .text-link, .nav-cta):active,
  :is(.button, .text-link, .nav-cta):focus-visible > span[aria-hidden="true"] {
    transform: none;
  }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}