/*
 * Final-v28 motion ownership module.
 * Short, causal feedback only: no entrance reveal, layout animation or
 * decorative loop. Loaded last so reduced-motion remains authoritative.
 */

:root {
  --motion-fast: 140ms;
  --motion-base: 190ms;
  --motion-panel: 240ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Shared controls and links */
#app > .site :is(
  .btn,
  .menu-link,
  .mega-trigger,
  .search-button,
  .burger,
  .mobile-menu-close,
  .mobile-feature-link,
  .mobile-essential-links a,
  .mobile-volume-accordions summary,
  .mobile-volume-accordions details > div a,
  .mobile-carousel-button,
  .faq-question,
  .faq-category-tab,
  .faq-open-all,
  .officials-filter-v28,
  .officials-more-filters-v28,
  .glossary-show-all,
  .before-detail-link,
  .installer-card-button,
  .installer-help-links a,
  .volume-tab-action,
  .unified-footer-contact
) {
  transition:
    color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-base) var(--motion-ease-out),
    transform var(--motion-base) var(--motion-ease-out);
}

#app > .site :is(
  input:not([type="hidden"]),
  select,
  textarea,
  .faq-search-shell,
  .officials-search-v28,
  .glossary-search
) {
  transition:
    color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard);
}

/* Interactive cards keep their geometry; transforms never affect document flow. */
#app > .site :is(
  .route-mega-card,
  .volume-card,
  .profile-card,
  .arrival-action-card,
  .installer-essential-card,
  .pva-theme-card,
  .resource-guide-card,
  .practical-tool-card,
  .pva-journey-list a) {
  transition:
    color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-base) var(--motion-ease-out),
    transform var(--motion-base) var(--motion-ease-out);
}

#app > .site :is(
  .btn,
  .arrow-link,
  .before-detail-link,
  .installer-card-button,
  .officials-guide-action-v28,
  .pva-guide-action,
  .pva-journey-more,
  .tools-guide-action,
  .unified-footer-contact,
  .volume-tab-action
) svg {
  transition:
    transform var(--motion-base) var(--motion-ease-out),
    translate var(--motion-base) var(--motion-ease-out);
}

/* Navigation and expandable surfaces */
#app > .site .mega-menu.installation-mega,
#app > .site .mobile-menu {
  transition:
    opacity var(--motion-base) var(--motion-ease-standard),
    transform var(--motion-panel) var(--motion-ease-out),
    visibility 0s linear var(--motion-panel);
}

#app > .site .has-mega.is-open .mega-menu.installation-mega,
#app > .site.menu-open .mobile-menu {
  transition-delay: 0s;
}

#app > .site.menu-open::before {
  animation: motion-overlay-in var(--motion-base) var(--motion-ease-standard) both;
}

#app > .site :is(
  .faq-question,
  .mobile-volume-accordions summary,
  .before-topic-card summary,
  .before-advice-panel summary,
  .work-essential-card summary,
  .glossary-term summary,
  .about-disclosure summary
) {
  transition:
    color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard);
}

#app > .site :is(
  .faq-question,
  .mobile-volume-accordions summary,
  .before-topic-card summary,
  .before-advice-panel summary,
  .work-essential-card summary,
  .glossary-term summary,
  .about-disclosure summary
) :is(svg, i) {
  transition: transform var(--motion-base) var(--motion-ease-out);
}

#app > .site :is(
  .mobile-volume-accordions details[open],
  .work-essential-card[open],
  .glossary-term[open]
) > summary {
  background-color: color-mix(in srgb, var(--red-soft) 44%, transparent);
}

@media (max-width: 700px) {
  #app > .site :is(
    .before-topic-card[open],
    .before-advice-panel[open],
    .about-disclosure[open]
  ) > summary {
    background-color: color-mix(in srgb, var(--red-soft) 44%, transparent);
  }
}

/* Hover is intentionally unavailable to coarse/touch-only pointers. */
@media (hover: hover) and (pointer: fine) {
  #app > .site :is(
    .btn,
    .search-button,
    .burger,
    .mobile-menu-close,
    .mobile-carousel-button:not(:disabled),
    .faq-category-tab,
    .faq-open-all,
    .officials-filter-v28,
    .officials-more-filters-v28,
    .glossary-show-all
  ):hover {
    transform: translateY(-1px);
  }

  #app > .site :is(
    .route-mega-card,
    .volume-card,
    .profile-card,
    .arrival-action-card,
    .installer-essential-card,
    .pva-theme-card,
    .resource-guide-card,
    .practical-tool-card,
    .pva-journey-list a):hover {
    transform: translateY(-2px);
  }

  #app > .site :is(
    .btn,
    .arrow-link,
    .before-detail-link,
    .installer-card-button,
    .officials-guide-action-v28,
    .pva-guide-action,
    .pva-journey-more,
    .tools-guide-action,
    .unified-footer-contact,
    .volume-tab-action
  ):hover svg {
    translate: 2px 0;
  }

  #app > .site :is(
    .faq-question,
    .mobile-volume-accordions summary,
    .before-topic-card summary,
    .before-advice-panel summary,
    .work-essential-card summary,
    .glossary-term summary,
    .about-disclosure summary
  ):hover {
    background-color: color-mix(in srgb, var(--red-soft) 34%, transparent);
  }
}

/* Cancel legacy sticky hover translations on touch and coarse pointers. */
@media (hover: none), (pointer: coarse) {
  #app > .site :is(
    .btn,
    .search-button,
    .burger,
    .mobile-menu-close,
    .mobile-carousel-button,
    .officials-filter-v28,
    .officials-more-filters-v28,
    .route-mega-card,
    .volume-card,
    .profile-card,
    .arrival-action-card,
    .installer-essential-card,
    .pva-theme-card,
    .resource-guide-card,
    .practical-tool-card,
    .pva-journey-list a):hover {
    transform: none;
  }

  #app > .site .arrival-action-card:hover .arrival-action-link svg,
  #app > .site .pva-theme-card:hover:not(:focus-visible) .pva-theme-arrow,
  #app > .site .practical-tool-card:hover .practical-tool-media img {
    transform: none;
  }

  #app > .site .pva-theme-card:hover:not(:focus-visible)::after {
    transform: scaleX(0);
  }

  #app > .site :is(
    .btn,
    .arrow-link,
    .before-detail-link,
    .installer-card-button,
    .officials-guide-action-v28,
    .pva-guide-action,
    .pva-journey-more,
    .tools-guide-action,
    .unified-footer-contact,
    .volume-tab-action
  ):hover svg {
    translate: 0 0;
  }

  #app > .site .pva-journey-list a:hover:not(:focus-visible):not([aria-current="step"]) > span {
    color: #0b214e;
    background-color: var(--surface-base);
    transform: none;
  }

}

/* Press feedback remains brief and works for mouse, keyboard activation and touch. */
#app > .site :is(
  .btn,
  .search-button,
  .burger,
  .mobile-menu-close,
  .mobile-carousel-button:not(:disabled),
  .faq-question,
  .faq-category-tab,
  .faq-open-all,
  .officials-filter-v28,
  .officials-more-filters-v28,
  .glossary-show-all
):active {
  transform: translateY(1px) scale(0.99);
  transition-duration: var(--motion-fast);
}

/* Focus remains fully visible; only its supporting halo is eased. */
#app > .site :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  transition:
    color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard),
    outline-color var(--motion-fast) var(--motion-ease-standard);
}

@keyframes motion-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  #app > .site,
  #app > .site :is(
    .mobile-card-carousel,
    .search-results,
    .mobile-menu,
    .mega-menu
  ) {
    scroll-behavior: auto !important;
  }

  #app > .site,
  #app > .site::before,
  #app > .site::after,
  #app > .site *,
  #app > .site *::before,
  #app > .site *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}