/* Shared interaction layer. Load after page, content-system and lead-form CSS. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --motion-feedback: 160ms;
  --motion-menu: 180ms;
}

html :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]) {
  transform: none;
  transition: transform var(--motion-feedback) var(--ease-out);
}

html :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]):hover {
  transform: none;
  box-shadow: none;
}

html :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]) > [aria-hidden="true"]:last-child {
  display: inline-block;
  transform: none;
  transition: transform var(--motion-feedback) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-input-mode="pointer"] :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]):active:not(:disabled) {
    transform: scale(.97);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-input-mode="pointer"] :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]):hover:not(:disabled) > [aria-hidden="true"]:last-child {
    transform: translateX(2px);
  }
}

/* Once enhanced, CSS hover/focus-within cannot contradict aria-expanded. */
.main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown] > .nav-dropdown__menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transform-origin: left top;
  transition: opacity var(--motion-menu) var(--ease-out),
    transform var(--motion-menu) var(--ease-out), visibility 0s linear var(--motion-menu);
}

.main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown].is-open > .nav-dropdown__menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown] > .nav-dropdown__menu[data-services-menu] {
  transform: translate(-50%, -6px) scale(.97);
}

.main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown].is-open > .nav-dropdown__menu[data-services-menu] {
  transform: translate(-50%, 0) scale(1);
}

.main-nav[data-motion-nav] .nav-dropdown__toggle > span:last-child,
.nav-toggle i,
.nav-toggle i::before,
.nav-toggle i::after {
  transition: transform var(--motion-menu) var(--ease-out);
}

.main-nav[data-motion-nav][data-motion-instant],
.main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown] > .nav-dropdown__menu[data-motion-instant] {
  transition: none;
}

@media (max-width: 1020px) {
  .site-header .main-nav { position: absolute; top: calc(100% + 8px); max-height: calc(100dvh - 110px); }

  .main-nav[data-motion-nav] {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.97);
    transform-origin: left top;
    transition: opacity var(--motion-menu) var(--ease-out),
      transform var(--motion-menu) var(--ease-out), visibility 0s linear var(--motion-menu);
  }

  .main-nav[data-motion-nav].is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  .main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown] > .nav-dropdown__menu,
  .main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown] > .nav-dropdown__menu[data-services-menu] {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    transform: none;
  }

  .main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown].is-open > .nav-dropdown__menu,
  .main-nav[data-motion-nav] .nav-dropdown[data-motion-dropdown].is-open > .nav-dropdown__menu[data-services-menu] {
    max-height: none;
    overflow: visible;
    padding: 8px 10px;
    transform: none;
  }

  .main-nav[data-motion-nav][data-motion-instant] {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .main-nav[data-motion-nav] > a:hover::after,
  .main-nav[data-motion-nav] .nav-dropdown:not(.is-open) > .nav-dropdown__toggle:hover::after {
    transform: scaleX(0);
  }
}

/* Visible defaults. Only decorative SVG connections receive a finite accent. */
[data-explain-flow].is-explaining .service-flow__line {
  transform-box: fill-box;
  transform-origin: left center;
  animation: service-flow-accent 220ms var(--ease-out) both;
}

@keyframes service-flow-accent {
  from { opacity: .35; transform: scaleX(.97); }
  to { opacity: 1; transform: scaleX(1); }
}

[data-explain-flow][data-flow-instant] .service-flow__line {
  animation: none;
  transform: none;
}

html[data-input-mode="keyboard"] {
  scroll-behavior: auto !important;
}

html[data-input-mode="keyboard"] :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]),
html[data-input-mode="keyboard"] :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]) > [aria-hidden="true"]:last-child {
  transform: none;
  transition: none;
}

html[data-input-mode="keyboard"] .main-nav[data-motion-nav],
html[data-input-mode="keyboard"] .main-nav[data-motion-nav] *,
html[data-input-mode="keyboard"] .main-nav[data-motion-nav] *::after,
html[data-input-mode="keyboard"] .nav-toggle,
html[data-input-mode="keyboard"] .nav-toggle i,
html[data-input-mode="keyboard"] .nav-toggle i::before,
html[data-input-mode="keyboard"] .nav-toggle i::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]),
  html :is(.site-frame, .lead-modal) :is(.button, .content-button, .lead-form__submit, [data-lead-form-open], [data-motion-button]) > [aria-hidden="true"]:last-child {
    transform: none;
    transition: none !important;
  }

  .main-nav[data-motion-nav],
  .main-nav[data-motion-nav] *,
  .main-nav[data-motion-nav] *::after,
  .nav-toggle i,
  .nav-toggle i::before,
  .nav-toggle i::after {
    transition: none !important;
  }

  [data-explain-flow].is-explaining .service-flow__line {
    animation: none !important;
    transform: none;
  }
}