/* Движение не скрывает содержимое и не участвует в расчёте макета. */
@keyframes vio-public-arrive {
  from {
    opacity: 0.45;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .vio-motion-in {
    animation: vio-public-arrive 420ms cubic-bezier(0.2, 0.7, 0.3, 1)
      var(--vio-motion-delay, 0ms) backwards;
  }
  :is(
    .button,
    .tabs button,
    .tour-tabs button,
    .example-chips button,
    .pricing-billing button
  ) {
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease,
      transform 140ms ease;
  }
  :is(.button, .tabs button, .tour-tabs button, .example-chips button):active {
    transform: scale(0.985);
  }
  :is(.nav a, .public-nav a, .text-link, .footer a) {
    transition: color 160ms ease;
  }
  details[open] > :not(summary) {
    animation: vio-public-arrive 200ms ease-out;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover {
    transform: translateY(-1px);
  }
  .guide-card {
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease;
  }
  .guide-card:hover {
    box-shadow: 0 5px 18px #0000000b;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}