/* Small navigation feedback; page entrances are managed and cancelled in JS. */
@media (prefers-reduced-motion: no-preference) {
  .information-page { animation: information-enter 220ms ease-out; }
  .site-header nav > a {
    transition: color 160ms ease;
  }

  .site-header nav > a::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
  }

  .site-header nav > a[aria-current]::after {
    transform: scaleX(1);
  }

  :is(.test-back, .toolbar-button, .carousel-controls button, .recommend-card) {
    transition: color 160ms ease, background-color 160ms ease,
      border-color 160ms ease, box-shadow 160ms ease;
  }
}

@keyframes information-enter {
  from { opacity: .7; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The timing signal and aim target must appear at their final state instantly. */
.test-page .reaction-pad,
.test-page .aim-target {
  transition: none;
  animation: none;
}