:root {
  --motion-duration-instant: 120ms;
  --motion-duration-fast: 180ms;
  --motion-duration-standard: 320ms;
  --motion-duration-slow: 450ms;
  --motion-duration-page: 250ms;
  --motion-distance-mobile: 8px;
  --motion-distance-standard: 12px;
  --motion-distance-large: 20px;
  --motion-stagger-mobile: 50ms;
  --motion-stagger-desktop: 60ms;
  --motion-ease-standard: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
}

/* Content remains visible until JavaScript explicitly enables motion. */
.motion-enabled [data-motion]:not([data-motion="none"]):not([data-motion="hero"]):not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-mobile), 0);
}

.motion-enabled [data-motion]:not([data-motion="none"]) {
  transition: opacity var(--motion-duration-standard) var(--motion-ease-enter),
    transform var(--motion-duration-standard) var(--motion-ease-enter) !important;
  will-change: opacity, transform;
}

.motion-enabled [data-motion].is-motion-visible,
.motion-enabled [data-motion="hero"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-enabled [data-motion="group"] > .container > *,
.motion-enabled [data-motion="group"] > * {
  transition-delay: var(--motion-delay, 0ms) !important;
}

.motion-enabled [data-motion="card"] {
  transition-delay: var(--motion-delay, 0ms) !important;
}

.hero-split .hero-motion-item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--motion-duration-standard) var(--motion-ease-enter),
    transform var(--motion-duration-standard) var(--motion-ease-enter);
  transition-delay: var(--hero-motion-delay, 0ms);
}

.hero-split.is-hero-ready .hero-motion-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.site-header {
  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.site-header.is-scrolled {
  box-shadow: 0 7px 22px rgba(5, 38, 77, .08);
}

.mobile-panel,
.mobile-filter-panel > summary::after,
.nav-chevron,
.menu-toggle span {
  transition: opacity var(--motion-duration-fast) var(--motion-ease-enter),
    transform var(--motion-duration-fast) var(--motion-ease-enter),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.questionnaire-form input,
.questionnaire-form select,
.questionnaire-form textarea,
.choice-grid label {
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.lightbox__image {
  opacity: 1;
  transition: opacity 180ms var(--motion-ease-standard);
}

.lightbox__image.is-changing {
  opacity: .35;
}

.motion-enabled .button:active,
.motion-enabled .icon-button:active {
  transform: translateY(1px) scale(.99) !important;
}

@media (min-width: 681px) {
  .motion-enabled [data-motion]:not([data-motion="none"]):not([data-motion="hero"]):not(.is-motion-visible) {
    transform: translate3d(0, var(--motion-distance-standard), 0);
  }
}

@media (hover: hover) and (pointer: fine) {
  .motion-enabled .listing-card,
  .motion-enabled .project-card,
  .motion-enabled .blog-card,
  .motion-enabled .area-discovery__grid > a {
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard) !important;
  }

  .motion-enabled .listing-card img,
  .motion-enabled .project-card img,
  .motion-enabled .blog-card img {
    transition: transform var(--motion-duration-slow) var(--motion-ease-standard) !important;
  }

  .motion-enabled .listing-card:hover,
  .motion-enabled .project-card:hover,
  .motion-enabled .blog-card:hover,
  .motion-enabled .area-discovery__grid > a:hover {
    transform: translateY(-3px) !important;
    border-color: #aebac2;
    box-shadow: 0 12px 28px rgba(5, 38, 77, .08);
  }

  .motion-enabled .listing-card:hover img,
  .motion-enabled .project-card:hover img,
  .motion-enabled .blog-card:hover img {
    transform: scale(1.025);
  }

  .motion-enabled .button,
  .motion-enabled .text-link,
  .motion-enabled .icon-button {
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
      color var(--motion-duration-fast) var(--motion-ease-standard),
      background-color var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard) !important;
  }

  .motion-enabled .button:hover,
  .motion-enabled .icon-button:hover {
    transform: translateY(-2px) !important;
  }
}

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

  .motion-enabled [data-motion],
  .motion-enabled .button,
  .motion-enabled .text-link,
  .motion-enabled .icon-button,
  .motion-enabled .listing-card,
  .motion-enabled .project-card,
  .motion-enabled .blog-card,
  .motion-enabled .area-discovery__grid > a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .hero-split .hero-motion-item,
  .mobile-panel,
  .lightbox__image,
  .questionnaire-form input,
  .questionnaire-form select,
  .questionnaire-form textarea,
  .choice-grid label {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}