/* =============================================================================
   Nymölla Skog – button hover effects (step 7b, PM selection 21 Sep 2026)
     Hero secondary "Läs mer om oss"          data-ns-fx="trail"
     Hero primary "Hitta din lokala kontakt"  data-ns-arrow="loop" + the plain PSD colour change
     Header "Kontakta oss"                    the plain PSD colour change only
     Header "Mätningsbestämmelser"            data-ns-fx="trail" (same as "Läs mer om oss")
   No magnetic pull, no spotlight, no other effects. Pure CSS – no JavaScript.
   Link after components.css. Colours and easing come from tokens.css.
   ============================================================================= */

/* label and icons stay above the effect layers */
.ns-btn > *{ position: relative; z-index: 2; }

/* -------------------------------------------------------------------- trail
   The border draws itself around the pill like a trail being walked, plus a
   faint wash (the derived hover state in psd-spec.md). It never fills the
   button, so the label and the focus ring stay light.
   If the button's 20 % border is a real `border: 2px solid`, set
   --ns-btn-border: 2px on the button so the trail draws exactly on top of it.
   If the border is an inset box-shadow, leave it at 0. */
@property --ns-trail{ syntax: "<angle>"; inherits: false; initial-value: 0turn; }
/* .ns-btn has overflow: hidden (components.css) to keep other buttons'
   content clipped to the pill; the trail draws right on top of the
   existing border so it needs to bleed past the padding edge instead. */
[data-ns-fx="trail"]{ position: relative; isolation: isolate; overflow: visible; }
[data-ns-fx="trail"]::before{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: calc(var(--ns-btn-border, 0px) * -1);
  border-radius: inherit; padding: 2px; --ns-trail: 0turn;
  background: conic-gradient(from -90deg, var(--ns-beige-light) var(--ns-trail), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: --ns-trail 620ms var(--ease-out);
}
[data-ns-fx="trail"]::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: calc(var(--ns-btn-border, 0px) * -1);
  border-radius: inherit; background: rgb(248 246 238 / .08); opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
[data-ns-fx="trail"]:is(:hover, :focus-visible)::before{ --ns-trail: 1turn; }
[data-ns-fx="trail"]:is(:hover, :focus-visible)::after{ opacity: 1; }
[data-ns-fx="trail"]:is(:hover, :focus-visible){ color: var(--ns-beige-light); }
[data-ns-fx="trail"]:focus-visible{ outline-color: var(--ns-beige-light); }

/* ---------------------------------------------------------------- arrow loop
   The arrow leaves to the right while an identical one enters from the left.
   Markup: <span class="ns-btn__ico" aria-hidden="true">{arrow svg}{same arrow svg}</span>
   The arrows use currentColor, so they follow the button's colour change. */
[data-ns-arrow="loop"] .ns-btn__ico{ position: relative; width: 11px; height: 10px; overflow: hidden; display: block; flex: none; }
[data-ns-arrow="loop"] .ns-btn__ico svg{ position: absolute; inset: 0; transition: transform 380ms var(--ease-out); }
[data-ns-arrow="loop"] .ns-btn__ico svg:nth-child(2){ transform: translateX(-160%); }
[data-ns-arrow="loop"]:is(:hover, :focus-visible) .ns-btn__ico svg:nth-child(1){ transform: translateX(160%); }
[data-ns-arrow="loop"]:is(:hover, :focus-visible) .ns-btn__ico svg:nth-child(2){ transform: translateX(0); }

/* ----------------------------------------------------------- reduced motion
   The colour still changes; nothing travels. */
@media (prefers-reduced-motion: reduce){
  [data-ns-fx="trail"]::before, [data-ns-fx="trail"]::after,
  [data-ns-arrow="loop"] .ns-btn__ico svg{ transition-duration: 1ms !important; }
  [data-ns-arrow="loop"]:is(:hover, :focus-visible) .ns-btn__ico svg:nth-child(1){ transform: none; }
  [data-ns-arrow="loop"]:is(:hover, :focus-visible) .ns-btn__ico svg:nth-child(2){ transform: translateX(-160%); }
}