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

  [data-motion] {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, 24px, 0);
    transition:
      opacity 760ms cubic-bezier(.2, .7, .2, 1),
      filter 760ms cubic-bezier(.2, .7, .2, 1),
      transform 760ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, filter, transform;
  }

  [data-motion="left"] {
    transform: translate3d(-22px, 0, 0);
  }

  [data-motion="right"] {
    transform: translate3d(22px, 0, 0);
  }

  [data-motion].motion-visible {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .motion-float-img {
    animation: motion-float 8s ease-in-out infinite;
    will-change: transform;
  }

  .motion-sheen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .motion-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-120%) skewX(-12deg);
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(255, 255, 255, .12) 38%,
      rgba(255, 255, 255, .45) 50%,
      rgba(255, 255, 255, .12) 62%,
      transparent 100%
    );
  }

  .motion-sheen.motion-visible::after,
  .motion-sheen.in::after {
    animation: motion-sheen 1200ms 260ms ease-out both;
  }

  :where(.btn, .cta-btn, .nav-cta, .primary, .secondary) {
    transition:
      transform 220ms ease,
      box-shadow 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      color 220ms ease;
  }

  :where(.btn, .cta-btn, .nav-cta, .primary, .secondary):hover {
    transform: translateY(-2px);
  }

  :where(
    .card,
    .reason-card,
    .pillar-card,
    .proof-card,
    .price-card,
    .flow-step,
    .staff-card,
    .staff-team-card,
    .news-card,
    .plan,
    .step,
    .merit-card,
    .job-card,
    .profile-card,
    .person,
    .value-card
  ) {
    transition:
      transform 260ms ease,
      box-shadow 260ms ease,
      border-color 260ms ease;
  }

  :where(
    .card,
    .reason-card,
    .pillar-card,
    .proof-card,
    .price-card,
    .flow-step,
    .staff-card,
    .staff-team-card,
    .news-card,
    .plan,
    .step,
    .merit-card,
    .job-card,
    .profile-card,
    .person,
    .value-card
  ):hover {
    transform: translateY(-4px);
  }

  details {
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  }

  details:hover {
    transform: translateY(-2px);
  }

  @keyframes motion-float {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, -6px, 0);
    }
  }

  @keyframes motion-sheen {
    0% {
      opacity: 0;
      transform: translateX(-120%) skewX(-12deg);
    }
    18% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateX(120%) skewX(-12deg);
    }
  }
}

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

  [data-motion] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-float-img {
    animation: none !important;
  }

  .motion-sheen::after {
    display: none !important;
  }
}