/* ======================================================================
   NOBLE FACTORY — CANONICAL MENU-STYLE DIRECTIONAL UNDERLINE

   Source: All Natural / chunk-OV5IWHZQ.mjs
   Motion is owned by window.NF_DIRECTIONAL_UNDERLINE in assets/js/site.js.

   Contract:
   - 1px track
   - resting mark: 1% width, 3px outside left edge
   - hover: spring to 102%
   - leave: same spring back to 1%, anchored 3px outside right edge
   - anchor reset: 350ms
   - spring: stiffness 500 / damping 60 / mass 1

   New markup must use:
     data-nf-underline="menu" on the interactive target
     data-nf-underline-track on the line track

   Legacy navigation/search classes remain aliased here so all existing and
   future consumers share one geometry/state contract instead of copying it.
   ====================================================================== */

[data-nf-underline-track],
.nf-menu-underline__track,
.nf-nav__underline,
.nf-search-directional-link__line{
  --nf-menu-line-width:1;
  position:relative;
  display:block;
  width:100%;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}

[data-nf-underline-track]::after,
.nf-menu-underline__track::after,
.nf-nav__underline::after,
.nf-search-directional-link__line::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-3px;
  width:calc(var(--nf-menu-line-width) * 1%);
  background:var(--nf-menu-line-color,var(--nf-gold));
  will-change:width;
}

:is(
  [data-nf-underline="menu"],
  .nf-nav__link,
  .nf-nav__action,
  .nf-mega-text-link,
  .nf-search-directional-link
).is-line-out :is(
  [data-nf-underline-track],
  .nf-menu-underline__track,
  .nf-nav__underline,
  .nf-search-directional-link__line
)::after{
  left:auto;
  right:-3px;
}

/* No-JS/current-page fallback. JS writes the same 102 value on bind. */
.nf-nav__item.is-current .nf-nav__underline{
  --nf-menu-line-width:102;
}