/* ================================================================
   PayStubCheck — nav-motion.css
   SecurePayStubs-inspired mega-menu motion refinement.
   Motion/typography only: no palette, sizing, content, or layout colors.
   ================================================================ */

@media (min-width: 1024px) {
  /*
   * The panel begins just below its resting position and rises into place.
   * Visibility is delayed on exit so the opacity/transform can finish cleanly.
   */
  #main-nav .ps-mega-menu {
    transform: translate3d(-50%, 9px, 0) !important;
    transform-origin: top center;
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition:
      opacity 170ms cubic-bezier(.4, 0, 1, 1),
      transform 190ms cubic-bezier(.4, 0, 1, 1),
      visibility 0s linear 190ms !important;
  }

  #main-nav .nav-dd-wrap:hover > .ps-mega-menu,
  #main-nav .nav-dd-wrap:focus-within > .ps-mega-menu,
  #main-nav .nav-dd-wrap.dd-open > .ps-mega-menu {
    transform: translate3d(-50%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transition:
      opacity 190ms cubic-bezier(0, 0, .2, 1),
      transform 220ms cubic-bezier(0, 0, .2, 1),
      visibility 0s linear 0s !important;
  }

  /* Smooth down-caret -> up-caret flip, including pure hover before JS settles. */
  #main-nav .nav-dd-caret {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 210ms cubic-bezier(.2, .7, .2, 1) !important;
    backface-visibility: hidden;
  }

  #main-nav .nav-dd-wrap:hover > .nav-dd-trigger .nav-dd-caret,
  #main-nav .nav-dd-wrap:focus-within > .nav-dd-trigger .nav-dd-caret,
  #main-nav .nav-dd-wrap.dd-open > .nav-dd-trigger .nav-dd-caret {
    transform: rotate(180deg) !important;
  }

  /* State names should read with the same stronger weight as the reference. */
  #main-nav .ps-state-grid a {
    font-weight: 600 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-nav .ps-mega-menu,
  #main-nav .nav-dd-caret {
    transition: none !important;
  }

  #main-nav .ps-mega-menu {
    transform: translate3d(-50%, 0, 0) !important;
  }
}