:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-gold: #45459a;
}

.motion-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: var(--motion-gold);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.motion-enabled .site-header,
.motion-enabled .region-header {
  transition:
    background-color 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease,
    backdrop-filter 420ms ease;
}

.motion-enabled .site-header.is-scrolled,
.motion-enabled .region-header.is-scrolled {
  border-bottom-color: rgba(69, 69, 154, 0.26);
  box-shadow: 0 14px 36px rgba(10, 16, 15, 0.1);
  backdrop-filter: blur(18px) saturate(1.12);
}

.motion-enabled .editorial-hero,
.motion-enabled .seo-editorial-hero {
  position: relative;
  overflow: hidden;
}

.motion-enabled .editorial-hero::after,
.motion-enabled .seo-editorial-hero::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--motion-gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
}

.motion-enabled.motion-loaded .editorial-hero::after,
.motion-enabled.motion-loaded .seo-editorial-hero::after {
  animation: motion-line-in 1400ms var(--motion-ease) 260ms both;
}

.motion-enabled .editorial-hero-art img,
.motion-enabled .seo-editorial-art img {
  opacity: 0;
  filter: saturate(0.88) brightness(0.94);
  transform: scale(1.022);
  transform-origin: center center;
  transition:
    opacity 1150ms ease,
    filter 1600ms var(--motion-ease),
    transform 1800ms var(--motion-ease);
}

.motion-enabled.motion-loaded .editorial-hero-art img,
.motion-enabled.motion-loaded .seo-editorial-art img {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

.motion-enabled .region-hero::before,
.motion-enabled .complex-hero::before,
.motion-enabled .complex-hub-hero::before {
  transform: translate3d(0, var(--motion-depth, 0), 0) scale(1.055);
  transform-origin: center center;
  transition: transform 120ms linear;
  will-change: transform;
}

.motion-enabled .region-hero::after,
.motion-enabled .complex-hero::after,
.motion-enabled .complex-hub-hero::after {
  animation: motion-veil-in 1100ms ease both;
}

.motion-enabled [data-motion-reveal] {
  opacity: 0;
  filter: none;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 760ms var(--motion-ease) var(--motion-delay, 0ms),
    transform 900ms var(--motion-ease) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-enabled [data-motion-reveal].is-visible {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
}

.motion-enabled :is(
  .button,
  .header-cta,
  .region-button,
  .region-header-cta,
  .text-link,
  .complex-card-link
) {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--motion-ease);
}

.motion-enabled :is(
  .scope-grid article,
  .service-detail-grid article,
  .complex-photo-grid figure,
  .complex-directory article
) {
  overflow: hidden;
}

.motion-enabled :is(
  .scope-grid article,
  .service-detail-grid article,
  .complex-photo-grid figure,
  .complex-directory article
) img {
  transition: filter 700ms ease, transform 1100ms var(--motion-ease);
}

.motion-enabled details > *:not(summary) {
  animation: motion-details-in 360ms var(--motion-ease) both;
}

@media (hover: hover) and (pointer: fine) {
  .motion-enabled :is(
    .seo-card,
    .seo-faq-item,
    .seo-districts a,
    .info-grid article,
    .related-links a,
    .area-directory a,
    .district-link-grid a,
    .quality-checklist li,
    .province-block,
    .featured-complex-grid a
  ) {
    transition:
      border-color 260ms ease,
      box-shadow 360ms ease,
      transform 420ms var(--motion-ease);
  }

  .motion-enabled :is(
    .seo-card,
    .seo-faq-item,
    .seo-districts a,
    .info-grid article,
    .related-links a,
    .area-directory a,
    .district-link-grid a,
    .quality-checklist li,
    .province-block,
    .featured-complex-grid a
  ):hover {
    z-index: 2;
    border-color: rgba(69, 69, 154, 0.7);
    box-shadow: 0 18px 38px rgba(14, 24, 21, 0.1);
    transform: translate3d(0, -5px, 0);
  }

  .motion-enabled :is(
    .scope-grid article,
    .service-detail-grid article,
    .complex-photo-grid figure,
    .complex-directory article
  ):hover img {
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.028);
  }

  .motion-enabled :is(
    .button,
    .header-cta,
    .region-button,
    .region-header-cta
  ):hover {
    box-shadow: 0 12px 26px rgba(10, 16, 15, 0.15);
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes motion-line-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes motion-veil-in {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

@keyframes motion-details-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
  .motion-enabled [data-motion-reveal] {
    filter: none;
    transform: translate3d(0, 18px, 0);
  }

  .motion-enabled .region-hero::before,
  .motion-enabled .complex-hero::before,
  .motion-enabled .complex-hub-hero::before {
    transform: scale(1.035);
    transition: none;
  }
}

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

  .motion-progress {
    display: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}