/* ==========================================================================
   footbar.css — barra di filtro expskill fissa in basso, desktop only.
   Visibile SOLO nella scena Experience (body.scene-nav[data-scene="experience"]).
   Usa gli stessi token CSS del resto del sito (tokens.css).

   z-index: 60 — sopra il contenuto (50 header) ma sotto il FAB (80) e
   l'overlay filtri (70).
   ========================================================================== */

/* ---------- contenitore barra -------------------------------------------- */

.footbar {
  /* libera la dot-nav (fixed left:24px, dot ~18px): un corridoio a SINISTRA e
     uno speculare a DESTRA, così la barra non finisce mai sopra i puntini. */
  --footbar-inset: 76px;
  /* crescita per prossimità: 0 = peek (piccola), 1 = piena. JS (footbar.js) la
     interpola in un loop rAF e la scrive qui; il CSS la mappa su `scale`. */
  --grow: 0;
  --peek-scale: 0.64;

  /* ANCORATA al bordo inferiore (parte dal fondo: cresce verso l'alto, slide
     più semplice da piccola a grande), centrata orizzontalmente. Uso le
     proprietà INDIVIDUALI translate/scale così lo slide di comparsa (su
     `translate`, con transizione) e la crescita (`scale`, guidata da JS senza
     transizione) non si pestano i piedi. */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;               /* cresce verso l'alto dal bordo */
  translate: -50% 100%;                           /* nascosta: tutta sotto il bordo */
  scale: calc(var(--peek-scale) + (1 - var(--peek-scale)) * var(--grow));
  z-index: 60;

  /* larghezza adattiva: copre il contenuto ma resta dentro i due corridoi */
  width: max-content;
  max-width: calc(100vw - var(--footbar-inset) * 2);

  /* layout interno: chip in riga, wrap se necessario, raggruppate per dominio */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 16px) var(--space-4, 24px) var(--space-3, 16px);

  /* sfondo scuro semi-trasparente + blur (coerente col FAB) */
  background: color-mix(in srgb, var(--c-surface, #1a1c26) 88%, transparent);
  border: 1px solid var(--c-border, rgba(255 255 255 / .08));
  border-bottom: none;                 /* è incollata al bordo del viewport */
  /* smusso a semi-arco SOLO in alto; in basso dritta sul bordo schermo */
  border-radius: 28px 28px 0 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 -6px 32px color-mix(in srgb, var(--c-bg, #0d0f18) 70%, transparent),
    0 0 0 1px var(--c-border, rgba(255 255 255 / .06));

  /* nascosta di default: scivolata sotto il bordo + invisibile. NB: `scale` NON
     è in transizione (lo smussa il lerp JS); transita solo `translate` (slide). */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--dur-base, .22s) var(--ease-out, ease),
    translate  var(--dur-base, .22s) var(--ease-out, ease),
    visibility 0s linear var(--dur-base, .22s);
}

/* ---------- visibile SOLO nella scena Experience (desktop, scene-nav) ----- */

body.scene-nav[data-scene="experience"] .footbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: -50% 0;
  transition:
    opacity   var(--dur-base, .22s) var(--ease-out, ease),
    translate var(--dur-base, .22s) var(--ease-out, ease),
    visibility 0s linear 0s;
}

/* ---------- nascosta su mobile (la footbar non viene nemmeno creata, ma
   aggiungiamo la guard CSS come double-safety) ----------------------------- */

@media (max-width: 767px) {
  .footbar { display: none; }
}

/* ---------- gruppo dominio ------------------------------------------------ */

.footbar__group {
  --chip-c: var(--c-accent-1, #b48ee8);
  display: contents; /* i group sono logici, le chip fluiscono nella riga */
}

/* separatore visivo sottile tra i gruppi (bordo sinistro sulla prima chip
   del gruppo non è pratico con display:contents, usiamo un divisore ::before
   sull'elemento .footbar__group ma solo quando display:flex è sul parent —
   poiché display:contents non genera box, inseriamo un div separatore). */

/* ---------- chip singola -------------------------------------------------- */

/* Shared base for the three footbar controls (chip / reset / apply). Only the
   6 declarations that were byte-identical across all three live here; each
   control keeps its own display, padding, border/background/colour, font-weight
   and transition below. */
.footbar__chip,
.footbar__reset,
.footbar__apply {
  align-items: center;
  border-radius: var(--radius-pill, 9999px);
  font-family: var(--font-heading, "Space Grotesk", sans-serif);
  font-size: var(--fs-1, .75rem);
  white-space: nowrap;
  cursor: pointer;
}

.footbar__chip {
  --chip-c: var(--c-accent-1, #b48ee8);

  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--chip-c) 40%, transparent);
  background: color-mix(in srgb, var(--chip-c) 8%, transparent);
  color: var(--c-text, #e8eaf6);
  font-weight: 500;

  /* transizione hover e attivo */
  transition:
    background   var(--dur-fast, .12s) var(--ease-out, ease),
    border-color var(--dur-fast, .12s) var(--ease-out, ease),
    box-shadow   var(--dur-base, .22s) var(--ease-out, ease),
    transform    var(--dur-fast, .12s) var(--ease-out, ease),
    color        var(--dur-fast, .12s) var(--ease-out, ease);
}

.footbar__chip:focus-visible {
  outline: 2px solid var(--c-focus-ring, var(--chip-c));
  outline-offset: 2px;
}

/* hover: lieve lift + colore dominio in evidenza */
.footbar__chip:hover {
  transform: translateY(-1px) scale(1.04);
  background: color-mix(in srgb, var(--chip-c) 20%, transparent);
  border-color: color-mix(in srgb, var(--chip-c) 70%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--chip-c) 35%, transparent);
}

/* stato attivo (filtro acceso): chip illuminata nel colore dominio */
.footbar__chip.is-active,
.footbar__chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--chip-c) 28%, transparent);
  border-color: var(--chip-c);
  color: var(--c-text, #e8eaf6);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--chip-c) 50%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--chip-c) 18%, transparent);
}

.footbar__chip.is-active:hover,
.footbar__chip[aria-pressed="true"]:hover {
  background: color-mix(in srgb, var(--chip-c) 38%, transparent);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--chip-c) 65%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--chip-c) 24%, transparent);
}

/* ---------- pulsante Reset (appare solo con un filtro attivo) ------------- */

.footbar__reset {
  display: none;              /* off: niente bottone e niente gap nel flex */
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--c-text, #e8eaf6) 26%, transparent);
  background: color-mix(in srgb, var(--c-text, #e8eaf6) 6%, transparent);
  color: var(--c-text-dim, #aab);
  font-weight: 500;
  transition:
    background   var(--dur-fast, .12s) var(--ease-out, ease),
    border-color var(--dur-fast, .12s) var(--ease-out, ease),
    color        var(--dur-fast, .12s) var(--ease-out, ease),
    transform    var(--dur-fast, .12s) var(--ease-out, ease);
}

/* visibile quando c'è almeno una expskill attiva (toggle da syncPressed) */
.footbar__reset.is-on {
  display: inline-flex;
  animation: footbar-reset-in .18s var(--ease-out, ease) both;
}

.footbar__reset:hover {
  transform: translateY(-1px) scale(1.04);
  background: color-mix(in srgb, var(--c-text, #e8eaf6) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-text, #e8eaf6) 45%, transparent);
  color: var(--c-text, #e8eaf6);
}

.footbar__reset:focus-visible {
  outline: 2px solid var(--c-focus-ring, var(--c-accent-1, #b48ee8));
  outline-offset: 2px;
}

.footbar__reset-glyph { font-size: 1.05em; line-height: 1; }

/* ---------- pulsante Applica (solo a L0, con un filtro attivo) ------------ */
/* È la call-to-action accesa nell'accento: trasforma l'anteprima attenuata in
   risultato (esce da L0 → le card non-corrispondenti vengono rimosse → L1). */
.footbar__apply {
  display: none;              /* visibile solo a L0 + is-on, vedi sotto */
  padding: 6px 16px;
  border: 1px solid color-mix(in srgb, var(--c-accent-1, #b48ee8) 70%, transparent);
  background: color-mix(in srgb, var(--c-accent-1, #b48ee8) 30%, transparent);
  color: var(--c-text, #e8eaf6);
  font-weight: 600;
  letter-spacing: .01em;
  transition:
    background   var(--dur-fast, .12s) var(--ease-out, ease),
    border-color var(--dur-fast, .12s) var(--ease-out, ease),
    box-shadow   var(--dur-base, .22s) var(--ease-out, ease),
    transform    var(--dur-fast, .12s) var(--ease-out, ease);
}
/* mostrato SOLO in modalità selezione L0 (e quando c'è un filtro da applicare) */
body.exp-l0 .footbar__apply.is-on {
  display: inline-flex;
  animation: footbar-reset-in .18s var(--ease-out, ease) both;
}
.footbar__apply:hover {
  transform: translateY(-1px) scale(1.04);
  background: color-mix(in srgb, var(--c-accent-1, #b48ee8) 45%, transparent);
  border-color: var(--c-accent-1, #b48ee8);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-accent-1, #b48ee8) 45%, transparent);
}
.footbar__apply:focus-visible {
  outline: 2px solid var(--c-focus-ring, var(--c-accent-1, #b48ee8));
  outline-offset: 2px;
}

@keyframes footbar-reset-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- illuminazione incrociata skill ↔ experience ------------------ */
/* hover su una chip → le experience con quella skill si ACCENDONO (glow nel
   colore del dominio, --lit-c) e le altre si ATTENUANO; hover su una card → le
   chip "sorelle" si accendono. Tutto transitorio (classi temporanee da JS).
   La transizione morbida è sulle .exp-card (vedi main.css). */
/* NB: il prefisso #experience serve a battere `#experience.exp-glass-on
   .exp-card { box-shadow:none; border-color:transparent }` (vetro WebGL attivo),
   che altrimenti azzererebbe il glow. */
#experience .exp-card.exp-skill-lit {
  --lit-c: var(--c-accent-1, #b48ee8);
  position: relative;
  z-index: 2;
  border-color: color-mix(in srgb, var(--lit-c) 80%, transparent);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--lit-c) 88%, transparent),
    0 0 24px 2px color-mix(in srgb, var(--lit-c) 58%, transparent),
    0 14px 52px -10px color-mix(in srgb, var(--lit-c) 62%, transparent);
}
#experience .exp-card.exp-skill-dim {
  opacity: .38;
  filter: saturate(.6);
}

/* chip "sorella" accesa quando il cursore è su una experience che la contiene */
.footbar__chip.is-sibling {
  background: color-mix(in srgb, var(--chip-c) 22%, transparent);
  border-color: color-mix(in srgb, var(--chip-c) 78%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--chip-c) 48%, transparent);
}

/* ---------- reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .footbar,
  .footbar__chip,
  .footbar__reset {
    transition: none;
  }
  .footbar__reset.is-on { animation: none; }
  /* la barra rimane visibile senza slide (opacity gestita dal selettore sopra) */
  body.scene-nav[data-scene="experience"] .footbar {
    /* lasciamo l'opacity ma azzeriamo il transform-based slide */
    transition: opacity var(--dur-fast, .12s) linear;
  }
}