:root {
  --motion-duration-press: 120ms;
  --motion-duration-fast: 220ms;
  --motion-duration-reveal: 550ms;
  --motion-duration-hero: 620ms;
  --motion-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.17, 1, 0.32, 1);
}

@keyframes rep-hero-enter {
  from {
    opacity: 0.72;
    transform: translateY(10px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready [data-hero-reveal] {
    animation: rep-hero-enter var(--motion-duration-hero) var(--motion-ease-out) both;
  }

  html.js.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--motion-duration-reveal) var(--motion-ease-smooth) var(--reveal-delay, 0ms),
      transform var(--motion-duration-reveal) var(--motion-ease-smooth) var(--reveal-delay, 0ms);
  }

  html.js.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .btn,
  .textlink,
  .menu-btn,
  summary {
    transition:
      color var(--motion-duration-fast) var(--motion-ease-smooth),
      background-color var(--motion-duration-fast) var(--motion-ease-smooth),
      border-color var(--motion-duration-fast) var(--motion-ease-smooth),
      transform var(--motion-duration-press) var(--motion-ease-smooth);
  }

  .btn::after,
  .textlink::after {
    transition: transform var(--motion-duration-fast) var(--motion-ease-smooth);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(.btn, .textlink):hover {
    transform: translateY(-1px);
  }

  .textlink:hover::after {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .textlink:active,
  .menu-btn:active,
  summary:active {
    transform: scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-hero-reveal],
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}