/* The small menu pieces follow the game's quarter-turn and cell-step motion.
   Movement stays inside the icon; the labels and tap targets stay still. */
.site-nav .nav-piece { --drop: 6px; transform-origin: center; }
@media (max-width: 899px) { .site-nav .nav-piece { --drop: 8px; } }

@media (prefers-reduced-motion: no-preference) {
  @keyframes nav-piece-turn-lock {
    0% { transform: translateY(calc(-1 * var(--drop))) rotate(-90deg); }
    75% { transform: translateY(1px) rotate(0); }
    100% { transform: none; }
  }
  @keyframes nav-piece-open-lock {
    0% { transform: translateY(calc(-1 * var(--drop))) rotate(90deg); }
    75% { transform: translateY(1px) rotate(180deg); }
    100% { transform: rotate(180deg); }
  }
  @media (hover: hover) {
    .site-nav :is(.nav-link, .nav-toggle, .nav-hub-row, .route-block):hover .nav-piece {
      animation: nav-piece-turn-lock var(--m-lock, 240ms) steps(4, end) both;
    }
  }
  .site-nav :is(.nav-link, .nav-toggle, .nav-hub-row, .route-block):focus-visible .nav-piece {
    animation: nav-piece-turn-lock var(--m-lock, 240ms) steps(4, end) both;
  }
  .js .site-nav .nav-item.is-open > .nav-toggle .nav-piece,
  .js .site-nav .nav-toggle[aria-expanded="true"] .nav-piece {
    animation: nav-piece-open-lock var(--m-lock, 240ms) steps(4, end) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-piece { animation: none !important; transition: none !important; }
}