/* ============================================================================
   NAVIGATION  -  the dropdown's opening motion
   ----------------------------------------------------------------------------
   The redesign opens each group's menu with a short fade and an 8px settle
   ("menuIn" in the draft). It lives here rather than in the page kit because
   the navigation is a design-system component and must not depend on a route
   module's stylesheet.

   `:not([hidden])` is what replays it: the panel is hidden with the `hidden`
   attribute, so the animation runs each time the group opens instead of once
   per mount. app.css collapses it to 0.01ms under prefers-reduced-motion.
   ========================================================================= */

@layer theme, base, components, utilities;

@layer components {
  .sh-nav-menu:not([hidden]) {
    animation: sh-nav-menu-in var(--motion-duration-base)
      var(--motion-ease-entrance) both;
  }
}

@keyframes sh-nav-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}