/* Shared interaction feedback. Layout-affecting properties stay untouched. */
.motion-cta,
.motion-card,
.motion-media img,
.main-nav > a {
  transition-property: color, background-color, transform, filter, box-shadow, opacity;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-progress {
  position: fixed;
  z-index: 210;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #2e78f7, #21b7e7);
  box-shadow: 0 1px 5px rgba(46, 120, 247, 0.32);
  transition: transform 90ms linear, opacity 180ms ease-out;
}

html.motion-scroll-active .motion-progress {
  opacity: 1;
}

html.motion-enabled .motion-section {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 360ms ease-out, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-enabled .motion-section.motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-enabled .motion-section .motion-heading {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  clip-path: inset(0 0 28% 0);
  transition: opacity 280ms ease-out, transform 440ms cubic-bezier(0.16, 1, 0.3, 1), clip-path 440ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-enabled .motion-section .motion-fade {
  opacity: 0;
  transition: opacity 340ms ease-out;
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-enabled .motion-section .motion-stagger {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: 300ms, 480ms, 180ms, 180ms;
  transition-timing-function: ease-out, cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-enabled .motion-section.motion-visible .motion-heading,
html.motion-enabled .motion-section.motion-visible .motion-stagger {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-enabled .motion-section.motion-visible .motion-heading {
  clip-path: inset(0 0 0 0);
}

html.motion-enabled .motion-section.motion-visible .motion-fade {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .main-nav > a:not(.active):hover {
    transform: translate3d(0, -1px, 0);
  }

  .motion-cta:hover {
    transform: translate3d(0, -2px, 0);
    filter: brightness(1.035);
  }

  .motion-cta:active {
    transform: translate3d(0, 0, 0) scale(0.99);
    filter: brightness(0.985);
    transition-duration: 110ms;
  }

  .motion-card:hover {
    transform: translate3d(0, -3px, 0);
    filter: brightness(1.025);
  }

  .motion-media:hover img {
    transform: scale(1.025);
  }

  html.motion-enabled .motion-section .motion-cta:hover {
    transform: translate3d(0, -2px, 0);
  }

  html.motion-enabled .motion-section .motion-cta:active {
    transform: translate3d(0, 0, 0) scale(0.99);
  }

  html.motion-enabled .motion-section .motion-card:hover {
    transform: translate3d(0, -3px, 0);
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 760px) {
  .contact-page .hero-qr-button.motion-cta:hover {
    transform: translate(-50%, -2px);
  }

  .contact-page .hero-qr-button.motion-cta:active {
    transform: translate(-50%, 0) scale(0.99);
  }
}

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

  .motion-cta,
  .motion-card,
  .motion-media img,
  .main-nav > a,
  .motion-progress,
  html.motion-enabled .motion-section,
  html.motion-enabled .motion-section .motion-heading,
  html.motion-enabled .motion-section .motion-fade,
  html.motion-enabled .motion-section .motion-stagger {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}