:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-press: cubic-bezier(0.25, 1, 0.5, 1);
}

html {
  scroll-behavior: smooth;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 420ms var(--motion-ease),
    transform 420ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-ready .motion-reveal.motion-done {
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  :where(.btn, .stage-btn, .card, .stage, .step, .authority-item, .case-card, .program-card, .path-step, .director-card, .faq-card, .buying-card, .proof-card, .panel, .scorecard-panel) {
    transition:
      transform 180ms var(--motion-press),
      border-color 180ms ease,
      background-color 180ms ease,
      color 180ms ease,
      box-shadow 220ms var(--motion-ease);
  }

  :where(.btn, .stage-btn):hover {
    transform: translateY(-1px);
  }

  :where(.card, .stage, .step, .authority-item, .case-card, .program-card, .path-step, .director-card, .faq-card, .buying-card, .proof-card):hover {
    transform: translateY(-2px);
  }

  :where(.panel, .scorecard-panel):hover {
    transform: translateY(-1px);
  }
}

:where(.btn, .stage-btn):active {
  transform: translateY(0) scale(0.98);
}

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid rgba(217, 37, 33, 0.42);
  outline-offset: 3px;
}

.links.open {
  animation: nav-drop 190ms var(--motion-ease) both;
}

.prepared.active {
  animation: panel-in 240ms var(--motion-ease) both;
}

@keyframes nav-drop {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready .motion-reveal {
    opacity: 1;
    transform: none;
  }
}