/* Hallmark · component: category navigation · existing brand tokens retained
 * pre-emit critique: P4 H4 E4 S5 R4 V4 · scoped motion, not a page redesign
 */
.category-menu > summary > span:last-child,
.nav-category-toggle {
  transition: transform 220ms var(--ease-out);
}
.category-menu[open] > summary > span:last-child {
  transform: rotate(180deg);
}
.category-menu[data-motion-phase="closing"] > summary > span:last-child,
.nav-category-group[data-motion-phase="closing"] .nav-category-toggle {
  transform: rotate(0);
}
.category-menu > .mega-panel,
.nav-category-content {
  transform-origin: top center;
}
/* The controller owns panel motion, so docking cannot restart a second effect. */
.category-menu.is-docked > .mega-panel {
  animation: none;
}
.category-tree a,
.nav-category-all {
  transition: transform 180ms var(--ease-out);
}
.category-tree a:focus-visible,
.nav-category-all:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .category-tree a:hover,
  .nav-category-all:hover {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-tree a,
  .nav-category-all,
  .nav-category-toggle,
  .category-menu > summary > span:last-child {
    transition: none;
    transform: none;
  }
}