@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .page,
  .card,
  .popup,
  .popup-overlay,
  .btn,
  .nav-item,
  .tab-btn,
  [class*="modal"],
  [class*="panel"],
  [class*="card"] {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity;
  }

  .page.active,
  .tab-content.active,
  .popup-overlay.visible {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .btn,
  .nav-item,
  .tab-btn {
    transition-duration: 0.24s !important;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}

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