/* ============ H2 · Fațete cu progres pe secțiuni ============ */
/* Replaces the round "back to top" button: one facet per [data-section] on the page.
   Colours, easing and the burst come from the shared --hx-* variables in css/buttons.css. */
.hexnav {
  --glow: var(--hx-glow);
  --ease: var(--hx-ease);
  --spring: var(--hx-spring);
  position: fixed; z-index: 90;
  right: calc(max(16px, env(safe-area-inset-right, 0px)) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; align-items: center; gap: 12px;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
/* Hidden over the first screen, like the old button, so it never covers the hero controls. */
.hexnav.is-hidden { opacity: 0; visibility: hidden; transform: translateY(10px); }
.hexnav:not(.is-hidden) { transition-delay: 0s; }
.hexnav .tip {
  font: 500 11px/1.4 var(--_font-default, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #eafdff;
  background: rgba(8, 16, 30, .88); border: 1px solid rgba(0, 229, 255, .35); border-radius: 3px 9px 3px 9px; padding: 6px 10px; white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s var(--ease); pointer-events: none;
}
.hexnav .tip b { color: var(--glow); font-weight: 500; }
.hexnav.show-tip .tip, .hexnav:hover .tip, .hexnav:focus-within .tip { opacity: 1; transform: none; }
.hx {
  position: relative; width: 64px; height: 72px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.hx:focus-visible { outline: 2px solid var(--glow); outline-offset: 6px; border-radius: 10px; }
.hx svg.facets { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx .w { transition: transform .3s; }
.hx .base { fill: var(--c); stroke: var(--hx-glow); stroke-opacity: .28; stroke-width: .6; }
.hx .lit { fill: var(--cl); fill-opacity: var(--o, 0); transition: fill-opacity .35s linear; }
.hx .w.done .base { stroke-opacity: .8; }
.hx .w.now .base { stroke-opacity: .9; }
.hx .w.pop { animation: hx-burst .55s var(--spring); }
.hx.clicked .w { animation: hx-burst var(--hx-burst) var(--spring); animation-delay: calc(var(--i) * 40ms); }
.hx .chev { position: relative; width: 22px; height: 22px; transform: rotate(-90deg); transition: transform .35s var(--ease); z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.hx .chev path { fill: #eafdff; }
.hx:hover .chev { transform: translateY(-3px) rotate(-90deg); }
.hx:hover .base { stroke-opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hexnav, .hexnav .tip, .hx .w, .hx .lit, .hx .chev { transition-duration: .01ms !important; }
  .hx .w, .hx .w.pop, .hx.clicked .w { animation: none !important; }
}