/* Navex icons — alignment, sizes, states and micro-animations (vanilla CSS, no build).
   Pair with icons.js. All motion respects prefers-reduced-motion and html[data-motion="off"]. */

:root {
  --nx-ease: cubic-bezier(.22, 1, .36, 1);        /* easeOutQuint — settle */
  --nx-spring: cubic-bezier(.34, 1.56, .64, 1);   /* back-out — small overshoot */
  --nx-inout: cubic-bezier(.65, 0, .35, 1);
  --nx-dot: #FF6D1F;                               /* Electric Tangerine */
  --nx-dot-ring: #FAF3E1;                          /* cut-out ring = page background */
}

/* ---------- box & alignment ---------- */
.nx-icon {
  --nx-size: 1em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--nx-size);
  height: var(--nx-size);
  line-height: 0;                 /* never stretches the line box */
  vertical-align: -0.14em;        /* optical baseline for 1em icons next to text (cap-height centred) */
  color: inherit;
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
}
.nx-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;              /* bounce/ring never clip */
  transform-origin: 50% 50%;
  transition: stroke-width .25s var(--nx-ease), opacity .25s var(--nx-ease), scale .35s var(--nx-spring);
}
/* inside flex rows (buttons, nav items, inputs) the baseline shift is not wanted */
:is(button, a, label, [role="button"], .nx-row, .nx-btn) > .nx-icon,
.nx-icon.nx-block { vertical-align: middle; }

/* fixed sizes: class or data-size="20" (icons.js sets --nx-size) */
.nx-12 { --nx-size: 12px; } .nx-14 { --nx-size: 14px; } .nx-16 { --nx-size: 16px; }
.nx-18 { --nx-size: 18px; } .nx-20 { --nx-size: 20px; } .nx-24 { --nx-size: 24px; }
.nx-28 { --nx-size: 28px; } .nx-32 { --nx-size: 32px; } .nx-40 { --nx-size: 40px; } .nx-48 { --nx-size: 48px; }

/* optical stroke: thin lines stay crisp when small, stay elegant when large.
   Root svg uses stroke-width: var(--nx-sw, 1.5) → 24px = 1.5px, 16px = 1.17px at 1.75 */
.nx-12, .nx-14, .nx-16, .nx-icon[data-size="12"], .nx-icon[data-size="14"], .nx-icon[data-size="16"] { --nx-sw: 1.75; }
.nx-32, .nx-40, .nx-48, .nx-icon[data-size="32"], .nx-icon[data-size="40"], .nx-icon[data-size="48"] { --nx-sw: 1.3; }

/* duotone second layer (Solar Bold Duotone / custom .5 parts): colour + opacity are tokens */
.nx-icon [opacity=".5"] { color: var(--nx-c2, currentColor); opacity: var(--nx-o2, .5); transition: opacity .3s var(--nx-ease); }
@media (hover: hover) {
  :where(a, button, [role="button"], [role="tab"], .nx-hover):hover .nx-icon[data-kind="duo"] [opacity=".5"],
  .nx-icon[data-kind="duo"]:hover [opacity=".5"] { opacity: var(--nx-o2-hover, .75); }
}

/* missing / borrowed markers are invisible in product; preview.html styles them */
.nx-icon[data-nx-missing] { color: #D33; }

/* ---------- active state ---------- */
/* 1) swap linear → solid twin (data-nx-swap): crossfade + spring scale */
.nx-icon--swap > .nx-alt { position: absolute; inset: 0; opacity: 0; scale: .6; }
:is(.is-active, .nx-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]) .nx-icon--swap > svg:not(.nx-alt),
.nx-icon--swap.is-active > svg:not(.nx-alt) { opacity: 0; scale: .7; }
:is(.is-active, .nx-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]) .nx-icon--swap > .nx-alt,
.nx-icon--swap.is-active > .nx-alt { opacity: 1; scale: 1; }
/* 2) no twin (hugeicons, lucide, iconly-curved): the line gets bolder */
:is(.is-active, .nx-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]) .nx-icon[data-kind="stroke"]:not(.nx-icon--swap) { --nx-sw: 2.1; }

/* ---------- notification dot / counter ---------- */
.nx-dot {
  position: absolute;
  top: -.06em; right: -.06em;
  width: max(6px, .32em); height: max(6px, .32em);
  border-radius: 50%;
  background: var(--nx-dot);
  box-shadow: 0 0 0 max(1.5px, .08em) var(--nx-dot-ring);
  pointer-events: none;
}
.nx-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: inherit; opacity: .55;
  animation: nx-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.nx-dot--count {
  width: auto; height: auto; min-width: max(14px, .66em);
  top: -.32em; right: -.42em;
  padding: 0 .22em;
  border-radius: 999px;
  font: 600 max(9px, .42em)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff; text-align: center; line-height: max(14px, .66em);
}
.nx-dot--count::after { display: none; }
@keyframes nx-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- animation registry: each icon gets data-anim from icons.js ---------- */
.nx-icon[data-anim="ring"]      { --nx-anim: nx-ring .8s var(--nx-inout); --nx-anim-loop: nx-ring-loop 3.2s var(--nx-inout); }
.nx-icon[data-anim="ring"] > svg { transform-origin: 50% 14%; }
.nx-icon[data-anim="shake"]     { --nx-anim: nx-shake .45s var(--nx-inout); }
.nx-icon[data-anim="spin"]      { --nx-anim: nx-spin .9s var(--nx-spring); }
.nx-icon[data-anim="spin-full"] { --nx-anim: nx-spin-full .8s var(--nx-ease); --nx-anim-loop: nx-spin-full 1s linear; }
.nx-icon[data-anim="beat"]      { --nx-anim: nx-beat 1s ease-in-out; --nx-anim-loop: nx-beat 1.6s ease-in-out; }
.nx-icon[data-anim="star"]      { --nx-anim: nx-star .7s var(--nx-spring); }
.nx-icon[data-anim="fly"]       { --nx-anim: nx-fly .75s var(--nx-ease); }
.nx-icon[data-anim="nudge-r"]   { --nx-anim: nx-nudge-r .55s var(--nx-ease); }
.nx-icon[data-anim="nudge-l"]   { --nx-anim: nx-nudge-l .55s var(--nx-ease); }
.nx-icon[data-anim="nudge-d"]   { --nx-anim: nx-nudge-d .55s var(--nx-ease); }
.nx-icon[data-anim="nudge-u"]   { --nx-anim: nx-nudge-u .55s var(--nx-ease); }
.nx-icon[data-anim="nudge-ur"]  { --nx-anim: nx-nudge-ur .55s var(--nx-ease); }
.nx-icon[data-anim="bob"]       { --nx-anim: nx-bob .9s ease-in-out; --nx-anim-loop: nx-bob 2.4s ease-in-out; }
.nx-icon[data-anim="bounce"]    { --nx-anim: nx-bounce .6s var(--nx-ease); }
.nx-icon[data-anim="bounce"] > svg { transform-origin: 50% 100%; }
.nx-icon[data-anim="flash"]     { --nx-anim: nx-flash .6s linear; }
.nx-icon[data-anim="tilt"]      { --nx-anim: nx-tilt .7s var(--nx-inout); }
.nx-icon[data-anim="zoom"]      { --nx-anim: nx-zoom .55s var(--nx-spring); }
.nx-icon[data-anim="shrink"]    { --nx-anim: nx-shrink .5s var(--nx-spring); }
.nx-icon[data-anim="blink"]     { --nx-anim: nx-blink .5s var(--nx-inout); }
.nx-icon[data-anim="rot90"]     { --nx-anim: nx-rot90 .5s var(--nx-spring); }
.nx-icon[data-anim="tick"]      { --nx-anim: nx-tick .8s var(--nx-inout); }
.nx-icon[data-anim="flip"]      { --nx-anim: nx-flip .8s var(--nx-ease); }
.nx-icon[data-anim="turn"]      { --nx-anim: nx-turn .6s var(--nx-spring); }
.nx-icon[data-anim="drive"]     { --nx-anim: nx-drive .8s var(--nx-ease); }
.nx-icon[data-anim="wobble"]    { --nx-anim: nx-wobble .8s var(--nx-inout); }
.nx-icon[data-anim="sun"]       { --nx-anim: nx-sun 1s var(--nx-ease); --nx-anim-loop: nx-sun 6s linear; }
.nx-icon[data-anim="press"]     { --nx-anim: nx-press .4s var(--nx-spring); }
.nx-icon[data-anim="pop"]       { --nx-anim: nx-pop .5s var(--nx-spring); }
/* per-part animations (icons.js marks leaves with .nx-c and --i) */
.nx-icon[data-anim="draw"]      { --nx-child: nx-draw .7s var(--nx-ease) both; --nx-stagger: 90ms; }
.nx-icon[data-anim="twinkle"]   { --nx-child: nx-twinkle .9s ease-in-out both; --nx-stagger: 110ms; }
.nx-icon[data-anim="grow"]      { --nx-child: nx-grow .6s var(--nx-spring) both; --nx-stagger: 60ms; }
.nx-icon .nx-c { transform-box: fill-box; transform-origin: 50% 50%; }
.nx-icon[data-anim="grow"] .nx-c { transform-origin: 50% 100%; }

/* ---------- triggers ---------- */
@media (hover: hover) {
  :where(a, button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], label, summary, .nx-hover):hover .nx-icon:not([data-nx-trigger="none"]) > svg,
  .nx-icon:not([data-nx-trigger="none"]):hover > svg { animation: var(--nx-anim, none); }
  :where(a, button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], label, summary, .nx-hover):hover .nx-icon:not([data-nx-trigger="none"]) .nx-c,
  .nx-icon:not([data-nx-trigger="none"]):hover .nx-c { animation: var(--nx-child, none); animation-delay: calc(var(--i, 0) * var(--nx-stagger, 80ms)); }
}
:where(a, button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, .nx-hover):focus-visible .nx-icon > svg,
.nx-icon.nx-play > svg { animation: var(--nx-anim, none); }
:where(a, button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, .nx-hover):focus-visible .nx-icon .nx-c,
.nx-icon.nx-play .nx-c { animation: var(--nx-child, none); animation-delay: calc(var(--i, 0) * var(--nx-stagger, 80ms)); }
.nx-icon[data-nx-trigger="loop"] > svg { animation: var(--nx-anim-loop, var(--nx-anim, none)); animation-iteration-count: infinite; }
.nx-icon[data-nx-trigger="loop"] .nx-c { animation: var(--nx-child, none); animation-delay: calc(var(--i, 0) * var(--nx-stagger, 80ms)); animation-iteration-count: infinite; animation-duration: 1.8s; }

/* ---------- keyframes (individual transform properties → never fight SVG transform attributes) ---------- */
@keyframes nx-ring { 0% { rotate: 0deg; } 15% { rotate: 14deg; } 30% { rotate: -12deg; } 45% { rotate: 9deg; } 60% { rotate: -6deg; } 75% { rotate: 3deg; } 100% { rotate: 0deg; } }
@keyframes nx-ring-loop { 0% { rotate: 0deg; } 4% { rotate: 14deg; } 8% { rotate: -12deg; } 12% { rotate: 9deg; } 16% { rotate: -6deg; } 20% { rotate: 3deg; } 24%, 100% { rotate: 0deg; } }
@keyframes nx-shake { 0%, 100% { translate: 0; } 20% { translate: -1.5px 0; } 40% { translate: 1.5px 0; } 60% { translate: -1px 0; } 80% { translate: 1px 0; } }
@keyframes nx-spin { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes nx-spin-full { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes nx-beat { 0% { scale: 1; } 14% { scale: 1.18; } 28% { scale: 1; } 42% { scale: 1.12; } 70%, 100% { scale: 1; } }
@keyframes nx-star { 0% { rotate: 0deg; scale: 1; } 50% { rotate: 36deg; scale: 1.18; } 100% { rotate: 72deg; scale: 1; } }
@keyframes nx-fly { 0% { translate: 0 0; scale: 1; opacity: 1; } 40% { translate: 5px -5px; scale: .7; opacity: 0; } 41% { translate: -5px 5px; scale: .7; opacity: 0; } 100% { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes nx-nudge-r { 0%, 100% { translate: 0; } 40% { translate: 3px 0; } 70% { translate: -1px 0; } }
@keyframes nx-nudge-l { 0%, 100% { translate: 0; } 40% { translate: -3px 0; } 70% { translate: 1px 0; } }
@keyframes nx-nudge-d { 0%, 100% { translate: 0; } 40% { translate: 0 3px; } 70% { translate: 0 -1px; } }
@keyframes nx-nudge-u { 0%, 100% { translate: 0; } 40% { translate: 0 -3px; } 70% { translate: 0 1px; } }
@keyframes nx-nudge-ur { 0%, 100% { translate: 0; } 40% { translate: 2.5px -2.5px; } 70% { translate: -.75px .75px; } }
@keyframes nx-bob { 0%, 100% { translate: 0; rotate: 0deg; } 30% { translate: 0 -2.5px; rotate: -5deg; } 65% { translate: 0 1px; rotate: 3deg; } }
@keyframes nx-bounce { 0% { translate: 0; scale: 1; } 25% { translate: 0 -3.5px; scale: .96 1.05; } 50% { translate: 0; scale: 1.08 .9; } 72% { translate: 0 -1px; scale: .98 1.02; } 100% { translate: 0; scale: 1; } }
@keyframes nx-flash { 0%, 100% { opacity: 1; scale: 1; } 20% { opacity: .25; } 40% { opacity: 1; scale: 1.14; } 60% { opacity: .5; } 80% { opacity: 1; } }
@keyframes nx-tilt { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 55% { rotate: 10deg; } 80% { rotate: -4deg; } }
@keyframes nx-zoom { 0%, 100% { scale: 1; rotate: 0deg; } 45% { scale: 1.16; rotate: -8deg; } }
@keyframes nx-shrink { 0%, 100% { scale: 1; } 45% { scale: .78; } }
@keyframes nx-blink { 0%, 100% { scale: 1 1; } 35% { scale: 1 .08; } 60% { scale: 1 1; } }
@keyframes nx-rot90 { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes nx-tick { 0% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 11deg; } 60% { rotate: -6deg; } 80% { rotate: 3deg; } 100% { rotate: 0deg; } }
@keyframes nx-flip { 0% { transform: perspective(120px) rotateY(0deg); } 100% { transform: perspective(120px) rotateY(360deg); } }
@keyframes nx-turn { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes nx-drive { 0% { translate: 0; opacity: 1; } 38% { translate: 6px 0; opacity: 0; } 39% { translate: -6px 0; opacity: 0; } 100% { translate: 0; opacity: 1; } }
@keyframes nx-wobble { 0%, 100% { rotate: 0deg; } 30% { rotate: -22deg; } 60% { rotate: 9deg; } 80% { rotate: -3deg; } }
@keyframes nx-sun { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes nx-press { 0%, 100% { scale: 1; } 40% { scale: .8; } }
@keyframes nx-pop { 0% { scale: 1; } 35% { scale: .84; } 70% { scale: 1.08; } 100% { scale: 1; } }
@keyframes nx-draw { 0% { stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } 99.9% { stroke-dasharray: 1 2; stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; } }
@keyframes nx-twinkle { 0%, 100% { scale: 1; opacity: 1; } 40% { scale: .35; opacity: .35; } 70% { scale: 1.15; opacity: 1; } }
@keyframes nx-grow { 0% { scale: 1 .25; opacity: .5; } 60% { scale: 1 1.08; opacity: 1; } 100% { scale: 1 1; opacity: 1; } }

/* ---------- reduced motion: keep state changes, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .nx-icon > svg, .nx-icon .nx-c, .nx-icon [opacity=".5"] { animation: none !important; transition: opacity .15s linear !important; }
  .nx-icon--swap > svg { scale: 1 !important; }
  .nx-dot::after { animation: none; display: none; }
}
html[data-motion="off"] .nx-icon > svg, html[data-motion="off"] .nx-icon .nx-c { animation: none !important; transition: none !important; }
html[data-motion="off"] .nx-dot::after { display: none; }