/* =========================================================
   Navbar component — compact (icon + label) / wide (label only)
   Fonte: assets/navbar.png
   Token: tokens.css
   ========================================================= */

:root {
  --navbar-duration: 200ms;
  --navbar-ease: ease;                                  /* color / background changes */
  --navbar-ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* icon hover micro-motion */
  /* Was cubic-bezier(0.34, 1.56, 0.64, 1) for an elastic overshoot, but an
     overshoot animates PAST its target before settling back — which meant it
     kept overshooting past the edge-clamped position too. The clamp only
     guards the final value, not values mid-transition, so no overshoot curve
     can be used here without the pill visibly poking out during the move. */
  --navbar-indicator-duration: 420ms;
  --navbar-indicator-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
}

.navbar-demo {
  position: relative;
  width: 100%; /* without this, overflow-x:auto below let the whole page grow
                  wider than the viewport instead of scrolling internally */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey);
  padding: var(--space-6);
  /* Safety net: generous item spacing (below) is prioritized over forcing
     an exact fit at the narrowest phones — if "Contacts" still doesn't fit
     at 320px, this scrolls instead of clipping or cramming everything. */
  overflow-x: auto;
}

@media (max-width: 399px) {
  .navbar-demo {
    padding: var(--space-4);
  }
}

/* Demo-only: colour behind the navbar so the glass blur is actually visible.
   Not part of the component itself. */
.navbar-demo__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px circle at 20% 30%, var(--color-blue) 0%, transparent 60%),
    radial-gradient(420px circle at 80% 70%, var(--color-blue-2) 0%, transparent 60%),
    radial-gradient(600px circle at 50% 100%, var(--color-grey-2) 0%, transparent 65%);
  opacity: 0.5;
}

/* ---------- Navbar shell ---------- */

.navbar {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 0.85 opacity, not the ~0.5 it was: at low opacity, white text sitting over
     a light page could drop well under WCAG AA contrast depending on what's
     behind it. This stays close to the solid --color-grey-3 in practice, with
     just enough translucency for the blur to still read as glass. */
  background: rgba(var(--color-grey-3-rgb), 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: var(--space-1);
  height: 64px;
  flex-shrink: 0; /* keep its natural width; .navbar-demo scrolls instead of squeezing it */
}

/* ---------- Apertura al caricamento (emil-design-eng) ----------
   Non nella tavola (statica): al primo paint la pillola parte chiusa
   (scala ridotta, invisibile) e si apre; solo a apertura quasi conclusa
   compare la pillola blu sull'elemento attivo, cosi si legge come due
   passi — "il menu si apre" poi "appare il selezionato in blu" — invece
   di un'unica comparsa istantanea. Sotto .js (js/navbar.js aggiunge
   is-ready/indicator-is-visible): senza JavaScript la barra e' visibile
   da subito, come ogni altro [data-reveal] del sito. */
.js .navbar {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 380ms var(--navbar-ease-out), transform 380ms var(--navbar-ease-out);
}

.js .navbar.is-ready {
  opacity: 1;
  transform: scale(1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar {
    background: var(--color-grey-3); /* opaque fallback where blur isn't supported */
  }
}

/* Single accent pill, horizontally centered on the active link by
   js/navbar.js (transform only — width/height are fixed per breakpoint
   below, not measured per-item, so the pill never stretches to match each
   label's text width or flickers from animating width alongside transform). */
.navbar__indicator {
  position: absolute;
  top: var(--space-1);
  left: 0;
  /* Set by js/navbar.js to the widest link at the current breakpoint (measured,
     not guessed) — a hand-picked px here previously ran narrower than the
     "Contacts" label, so its text stuck out past the blue pill's edges. */
  width: var(--navbar-indicator-width, 78px);
  height: 56px; /* navbar height (64px) minus 2x padding (--space-1) */
  border-radius: 999px;
  background: var(--color-blue);
  transition: transform var(--navbar-indicator-duration) var(--navbar-indicator-ease);
  will-change: transform;
}

.navbar__indicator.is-instant {
  transition: none;
}

/* Compare dopo che la pillola si e' aperta (vedi .js .navbar sopra),
   non insieme: transizione propria, non tocca .is-instant (che riguarda
   solo il transform in caso di resize/switch fra sezioni). */
.js .navbar__indicator {
  opacity: 0;
  transition: transform var(--navbar-indicator-duration) var(--navbar-indicator-ease), opacity 280ms var(--navbar-ease-out);
}

.js .navbar__indicator.is-visible {
  opacity: 1;
}

.navbar__list {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  /* var(--space-2) (8px) teneva i quattro tasti quasi a contatto — sotto
     i 600px vale solo questa regola (la variante >=600px sotto la
     sovrascrive con --space-7). 10px e non il token successivo
     (var(--space-3), 12px): a 320px (iPhone SE e simili) la barra sfora
     GIA' la safety net qualche pixel anche da ferma (293px di contenuto
     contro 288 disponibili, vedi .site-nav in page.css) — con 12px+12px
     di padding sotto lo sforo arrivava a 31px e "Contacts" si leggeva
     tagliato a meta'. 10px da' aria vera sui telefoni normali (~375px+,
     la stragrande maggioranza) restando entro uno sforo simile
     all'originale sul caso limite. */
  gap: 10px;
}

.navbar__item {
  height: 100%;
}

.navbar__link {
  position: relative;
  z-index: 2; /* stays above .navbar__indicator */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 0 10px;
  /* All items equal width (fits the widest label, "Contacts") instead of
     each hugging its own text — otherwise the fixed-width indicator (below)
     is wider than short items like "Home" and visibly spills off-center. */
  min-width: var(--navbar-indicator-width, 78px);
  border-radius: 999px;
  color: var(--color-white);
  text-decoration: none;
  background: transparent;
  transition: background-color var(--navbar-duration) var(--navbar-ease);
}

.navbar__icon {
  display: flex;
}

.navbar__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  /* nav-works.svg's rotated, thick (2.8px) strokes sit close to its viewBox
     edge and get clipped by the SVG's own default overflow otherwise —
     same issue the card sketch marks had earlier. */
  overflow: visible;
  fill: none;
  transition: fill var(--navbar-duration) var(--navbar-ease);
}

.navbar__item.is-active .navbar__icon svg {
  fill: rgba(255, 255, 255, 0.3);
}

.navbar__label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Hover / press (emil-design-eng) ---------- */

@media (hover: hover) and (pointer: fine) {
  .navbar__item:not(.is-active) .navbar__link:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.navbar__link:active {
  transform: scale(0.97);
  transition-duration: 110ms;
}

/* ---------- Icon micro-animation, one small gesture per icon ---------- */

@media (hover: hover) and (pointer: fine) {
  .icon-home,
  .icon-resume,
  .icon-works__top,
  .icon-works__bottom,
  .icon-contacts__frame,
  .icon-contacts__line-top,
  .icon-contacts__line-bottom {
    transition: transform var(--navbar-duration) var(--navbar-ease-out);
  }

  /* Home: a small settling bounce */
  .navbar__link:hover .icon-home {
    transform: translateY(-2px) scale(1.06);
  }

  /* Resumè: a slight page-corner tilt */
  .navbar__link:hover .icon-resume {
    transform: rotate(-6deg) scale(1.05);
  }

  /* Works: the two stacked cards fan apart */
  .navbar__link:hover .icon-works__top {
    transform: translate(-1px, -1px) rotate(-3deg);
  }
  .navbar__link:hover .icon-works__bottom {
    transform: translate(1px, 1px) rotate(3deg);
  }

  /* Contacts: the frame puffs up slightly and the two lines pull away from
     it, then settle back — like the card breathing. transform-box/-origin so
     the frame's scale grows from its own center, not the icon's top-left
     corner (SVG default). */
  .icon-contacts__frame,
  .icon-contacts__line-top,
  .icon-contacts__line-bottom {
    transform-box: fill-box;
    transform-origin: center;
  }
  .navbar__link:hover .icon-contacts__frame {
    transform: scale(1.06);
  }
  .navbar__link:hover .icon-contacts__line-top {
    transform: translateY(-2px);
  }
  .navbar__link:hover .icon-contacts__line-bottom {
    transform: translateY(2px);
  }
}

/* ---------- Icon micro-animation on tap (touch has no hover) ----------
   Same gestures as above, replayed as one-shot keyframes triggered by
   js/navbar.js adding .is-tapped right after a click/tap, removed on
   animationend so it can fire again next time. Each keyframe explicitly
   returns to "none" at 100% — leaving that out meant the animation held its
   peak value and then snapped back to rest the instant .is-tapped was
   removed, instead of easing back down. */

@keyframes navTapHome {
  40% { transform: translateY(-2px) scale(1.06); }
  100% { transform: none; }
}
@keyframes navTapResume {
  40% { transform: rotate(-6deg) scale(1.05); }
  100% { transform: none; }
}
@keyframes navTapWorksTop {
  40% { transform: translate(-1px, -1px) rotate(-3deg); }
  100% { transform: none; }
}
@keyframes navTapWorksBottom {
  40% { transform: translate(1px, 1px) rotate(3deg); }
  100% { transform: none; }
}
@keyframes navTapContactsFrame {
  40% { transform: scale(1.06); }
  100% { transform: none; }
}
@keyframes navTapContactsLineTop {
  40% { transform: translateY(-2px); }
  100% { transform: none; }
}
@keyframes navTapContactsLineBottom {
  40% { transform: translateY(2px); }
  100% { transform: none; }
}

/* Starts ~120ms after the tap, once the press-feedback (:active scale) has
   settled, instead of firing in the same instant as the click. */
.icon-home.is-tapped { animation: navTapHome 420ms var(--navbar-ease-out) 120ms; }
.icon-resume.is-tapped { animation: navTapResume 420ms var(--navbar-ease-out) 120ms; }
.icon-works__top.is-tapped { animation: navTapWorksTop 420ms var(--navbar-ease-out) 120ms; }
.icon-works__bottom.is-tapped { animation: navTapWorksBottom 420ms var(--navbar-ease-out) 120ms; }
.icon-contacts__frame.is-tapped {
  transform-box: fill-box;
  transform-origin: center;
  animation: navTapContactsFrame 420ms var(--navbar-ease-out) 120ms;
}
.icon-contacts__line-top.is-tapped {
  animation: navTapContactsLineTop 420ms var(--navbar-ease-out) 120ms;
}
.icon-contacts__line-bottom.is-tapped {
  animation: navTapContactsLineBottom 420ms var(--navbar-ease-out) 120ms;
}

/* ---------- Thumb breakpoint (assets/navbar.png, wide/text-only mockup) ---------- */

@media (min-width: 600px) {
  .navbar {
    height: 56px;
    padding: var(--space-2);
  }

  .navbar__list {
    gap: var(--space-7);
  }

  .navbar__link {
    flex-direction: row;
    padding: 0 var(--space-4);
    min-width: var(--navbar-indicator-width, 120px);
  }

  .navbar__icon {
    display: none;
  }

  .navbar__label {
    font-size: var(--font-size-body);
  }

  .navbar__indicator {
    top: var(--space-2);
    width: var(--navbar-indicator-width, 120px);
    height: 40px; /* navbar height (56px) minus 2x padding (--space-2) */
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .navbar,
  .js .navbar__indicator {
    transition-duration: 1ms;
  }

  .navbar__link,
  .navbar__indicator,
  .icon-home,
  .icon-resume,
  .icon-works__top,
  .icon-works__bottom,
  .icon-contacts__frame,
  .icon-contacts__line-top,
  .icon-contacts__line-bottom {
    transition-duration: 1ms;
  }

  .icon-home.is-tapped,
  .icon-resume.is-tapped,
  .icon-works__top.is-tapped,
  .icon-works__bottom.is-tapped,
  .icon-contacts__frame.is-tapped,
  .icon-contacts__line-top.is-tapped,
  .icon-contacts__line-bottom.is-tapped {
    animation: none;
  }
}