:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f4f4f4;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-border: #e4e4e4;

  --font-main: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Max-width del .container, usato ovunque nel sito. Alzato da 1100 a
     1320px: su monitor larghi lascia meno vuoto ai lati senza righe di
     testo troppo lunghe. */
  --max-width: 1320px;

  --color-accent: #c0acff;
  --color-accent-rgb: 192, 172, 255;

  --color-accent-strong: #c0acff;
  --color-accent-strong-rgb: 192, 172, 255;
  --color-accent-tint: #efe4ff;
  --color-accent-tint-rgb: 239, 228, 255;
  --color-accent-violet: #c0acff;
  --color-accent-violet-rgb: 192, 172, 255;

  --pulse-violet: #c0acff;
  --pulse-pink: #fa7fb5;

  --color-ink: #1a1a1a;
  --color-ink-rgb: 26, 26, 26;
  /* Sfondo scuro condiviso da tutte le sezioni scure del sito (Progetti,
     Chi sono, Esperienza, Competenze, footer). Il nero puro sui grandi
     sfondi e' generalmente sconsigliato anche nelle linee guida (Material
     Design consiglia ~#121212 invece di #000000, proprio perche' un nero
     totale risulta piu' duro/pesante da guardare): qui il valore e'
     alzato leggermente con un accenno caldo/violaceo che richiama
     l'accento del sito, cosi' resta scuro ma piu' "morbido". */
  --footer-bg: #17151b;
  --blob-shadow-rgb: 20, 20, 20;

  --glass-bg: rgba(255, 255, 255, 0.22);
  --glass-bg-strong: rgba(255, 255, 255, 0.5);
  /* Sfondo a gradiente (invece di un flat color) per un vetro piu' credibile:
     più luce in alto a sinistra, più trasparenza al centro, un accenno di
     luce di rimbalzo in basso a destra. Opacita' abbassate rispetto a
     prima: meno lattiginoso, piu' trasparente. */
  --glass-gradient: linear-gradient(155deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.18) 100%);
  --glass-border: rgba(255, 255, 255, 0.32);
  /* Ombra esterna piu' leggera e stretta: un vetro sottile "poggia" appena,
     invece di sembrare una lastra spessa che galleggia sopra il contenuto. */
  --glass-shadow: 0 4px 18px rgba(20, 20, 20, 0.12), 0 1px 3px rgba(20, 20, 20, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  /* Ricetta condivisa per i riflessi interni del vetro: bordo superiore
     sottile, bagliore in basso molto piu' contenuto (prima era spesso
     24px di blur — sembrava un blocco spesso, non una lastra sottile),
     filo di luce laterale appena percettibile. */
  --glass-insets: inset 0 1px 0 var(--glass-highlight), inset 0 -6px 10px -8px rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.12);
  --liquid-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Molla vera in CSS nativo (funzione linear(), niente JS) invece della
     cubic-bezier "a occhio" di prima: valori calcolati da un'equazione di
     oscillatore armonico smorzato (rigidezza 170, smorzamento 18, massa 1)
     campionata su 42 punti fino ad assestamento — non scritta a mano,
     come raccomandato per non ottenere un movimento innaturale. Ricade su
     --liquid-ease nei browser che non supportano ancora linear(). */
  --liquid-spring: var(--liquid-ease);
  --liquid-spring-time: 0.55s;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --liquid-spring: linear(0, 0.013, 0.049, 0.101, 0.166, 0.238, 0.314, 0.393, 0.47, 0.544, 0.615, 0.681, 0.741, 0.796, 0.844, 0.886, 0.922, 0.953, 0.978, 0.999, 1.015, 1.028, 1.037, 1.044, 1.048, 1.05, 1.05, 1.049, 1.047, 1.044, 1.04, 1.037, 1.033, 1.029, 1.025, 1.022, 1.018, 1.015, 1.012, 1.009, 1.007, 1);
  }
}

:root[data-mood="corallo"] {
  --color-accent: #ffb199;
  --color-accent-rgb: 255, 177, 153;
  --color-accent-strong: #ffb199;
  --color-accent-strong-rgb: 255, 177, 153;
  --color-accent-tint: #ffe8df;
  --color-accent-tint-rgb: 255, 232, 223;
  --color-accent-violet: #ffb199;
  --color-accent-violet-rgb: 255, 177, 153;
  --pulse-violet: #ffb199;
}
:root[data-mood="menta"] {
  --color-accent: #7fe3c0;
  --color-accent-rgb: 127, 227, 192;
  --color-accent-strong: #7fe3c0;
  --color-accent-strong-rgb: 127, 227, 192;
  --color-accent-tint: #dff8ee;
  --color-accent-tint-rgb: 223, 248, 238;
  --color-accent-violet: #7fe3c0;
  --color-accent-violet-rgb: 127, 227, 192;
  --pulse-violet: #7fe3c0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.filter-btn:focus-visible,
.tool-badge:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1 { font-family: var(--font-display); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
h2, h3 { font-family: var(--font-main); line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.125rem); }

.hero-title {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 6vw, 3.125rem);
  line-height: 1.1;
}

.hero-greeting {
  display: inline-block;
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.4em;
  letter-spacing: 0;
}

.hero-name {
  font-weight: 600;
  color: var(--pulse-violet);
}

h2 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}
h3 { font-size: 1.2rem; font-weight: 600; margin: 12px 0 8px; }

.section-kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.section-kicker-num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-accent-strong);
}
.section-kicker-label {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.corner-sticky {
  position: sticky;
  z-index: 40;
  pointer-events: none;
  height: 100vh;
  margin-bottom: -100vh;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.corner-sticky.is-inactive { opacity: 0; }
.corner-sticky-top { top: 0; }

#progetti .corner-label-tl,
#progetti .corner-label-tr {
  top: 32px;
}
.corner-label {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-muted);
  max-width: 220px;
}
.corner-label-tl { top: 28px; left: 24px; }
.corner-label-tr {
  top: 28px;
  right: 24px;
  text-align: right;
}
.corner-label-bl { bottom: 28px; left: 24px; }
.corner-label-br {
  bottom: 28px;
  right: 24px;
  text-align: right;
}

.hero .corner-label-tl,
.hero .corner-label-tr {
  top: calc(26px - 88px);
}
.section .corner-label-tl,
.section .corner-label-tr {
  top: 0;
}
@media (max-width: 1400px) {
  .corner-sticky, .hero .corner-label { display: none; }
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  /* Bianco puro, non var(--color-ink): con mix-blend-mode:difference il
     bianco resta sempre visibile (diventa il "negativo" di qualsiasi
     sfondo). Un grigio quasi nero come --color-ink invece spariva sugli
     sfondi scuri del sito (footer, overlay, lightbox), perche' la
     differenza tra due toni simili tende a zero. */
  border: 1.5px solid #fff;
  z-index: 999;
  pointer-events: none;
  opacity: 0;

  transform: translate(var(--cursor-x, -100px), var(--cursor-y, -100px)) translate(-50%, -50%) scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s var(--liquid-ease);
  mix-blend-mode: difference;
}
.custom-cursor.is-active {
  opacity: 1;
  transform: translate(var(--cursor-x, -100px), var(--cursor-y, -100px)) translate(-50%, -50%) scale(1);
}
@media (hover: none), (pointer: coarse) {
  .custom-cursor { display: none; }
}

a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  padding: 16px 0;
  z-index: 100;
  transition: padding 0.4s var(--liquid-ease);

}

.site-header.scrolled { padding: 8px 0; }

.glass {
  position: relative;
  background: var(--glass-gradient);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-insets);
  isolation: isolate;
  overflow: hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-strong); }
}

/* Vetro con rifrazione vera (leggera distorsione del contenuto sottostante),
   tramite il filtro SVG #glass-distortion definito inline nell'HTML.
   Solo su desktop con puntatore preciso: e' un effetto sottile ma pesante
   da calcolare, e la combinazione url()+backdrop-filter e' affidabile solo
   su Chromium (Safari non la supporta affatto, Firefox e' incoerente).
   Il rischio concreto e' che un browser che non capisce url() dentro
   backdrop-filter scarti l'INTERA dichiarazione (non solo la distorsione),
   lasciando l'elemento senza blur. Per questo il valore con url() e'
   racchiuso in @supports: se non e' valido, resta il blur semplice gia'
   definito nelle regole base (.glass, ecc.) invece di sparire del tutto. */
@supports (backdrop-filter: url(#glass-distortion)) {
  @media (pointer: fine) and (min-width: 961px) {
    .glass,
    .projects-sticky-band,
    .contact-form {
      backdrop-filter: url(#glass-distortion) blur(14px) saturate(190%);
      /* Il ricalcolo di un backdrop-filter con distorsione SVG ad ogni
         frame e' costoso: promuoviamo questi elementi a un layer di
         compositing dedicato in anticipo (invece di lasciare che il
         browser lo scopra durante lo scroll/hover), cosi' il costo
         pesante resta isolato e non forza il repaint del resto della
         pagina (ottimizzazione consigliata per backdrop-filter +
         feDisplacementMap). */
      will-change: transform, backdrop-filter;
    }
  }
}
/* Chi preferisce meno movimento puo' trovare la distorsione del vetro
   (per quanto statica) fastidiosa da guardare a lungo: qui torna al
   blur semplice, senza deformazione ne' riflesso speculare. */
@media (pointer: fine) and (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .glass,
  .projects-sticky-band,
  .contact-form {
    backdrop-filter: blur(14px) saturate(190%);
  }
}
/* Stessa rifrazione, ma con un blur molto piu' leggero: il toggle e' alto
   22px, un blur da 18px pensato per barre/card lo appiattirebbe in una
   macchia indistinta. Stesso @supports di guardia spiegato sopra. */
@supports (backdrop-filter: url(#glass-distortion)) {
  @media (pointer: fine) and (min-width: 961px) {
    .cookie-toggle { backdrop-filter: url(#glass-distortion) blur(8px) saturate(160%); }
  }
}
@media (pointer: fine) and (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .cookie-toggle { backdrop-filter: blur(8px) saturate(160%); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 14px;
  transition: border-radius 0.4s var(--liquid-ease);

  width: fit-content;
  margin: 0 auto;
}

.logo { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: -0.02em; padding-left: 6px; }

.nav-menu-wrap { position: relative; }

.nav-menu {
  display: flex;
  gap: 4px;
  list-style: none;
}

.nav-menu li { position: relative; z-index: 1; }

.nav-menu a {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  transition: color 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active { color: var(--color-accent-violet); }

.nav-highlight {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 10px rgba(20, 20, 20, 0.06);
  transition:
    transform 0.5s var(--liquid-ease),
    width 0.5s var(--liquid-ease);
  z-index: 0;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  /* Toglie l'alone/selezione blu di default del browser al tap sul
     pulsante (visibile durante il cambio hamburger -> X su mobile). */
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transform-origin: center;
  transition: transform 0.3s var(--liquid-ease), opacity 0.2s ease;
}
/* Hamburger -> X quando il menu mobile e' aperto: le due righe esterne
   ruotano e si sovrappongono al centro, quella di mezzo sparisce. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  position: sticky;
  top: 88px;
  height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 80px;
}
@media (max-width: 1400px) {
  .hero { position: relative; top: auto; }
}

.stack-wrap {
  position: relative;
  margin-bottom: -100vh;
}
.stack-spacer {
  height: 100vh;
  pointer-events: none;
}
@media (max-width: 1400px) {
  .stack-wrap { margin-bottom: 0; }
  .stack-spacer { display: none; }
}

.hero-grid {

  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 55vh;
}

.hero-content { text-align: left; position: relative; z-index: 60; pointer-events: none; }

.hero-blob {
  position: absolute;
  top: -110px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 110px);
  z-index: 50;
  pointer-events: auto;

}
.blob-zoom {
  width: 100%;
  height: 100%;
}
#blob-spline-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-blob.is-loading::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-accent-strong-rgb), 0.16), rgba(var(--color-accent-strong-rgb), 0) 70%);
  animation: blobLoadingPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes blobLoadingPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.8; transform: scale(1); }
}

@keyframes blobSquish {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.88, 1.1); }
  60%  { transform: scale(1.06, 0.94); }
  100% { transform: scale(1); }
}
.blob-zoom.squish {
  animation: blobSquish 0.45s var(--liquid-ease, ease-out);
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  margin: 16px 0 32px;
  max-width: 440px;
}

.mood-picker {
  position: fixed;
  top: 26px;
  right: 24px;
  z-index: 150;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.mood-picker.reveal.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.mood-picker-label {

  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-muted);
  max-width: 180px;
  text-align: right;
}
@media (max-width: 1400px) {

  .mood-picker {
    position: static;

    padding: 0 24px;
    margin: 0 0 24px;
    gap: 16px;
  }
  .mood-picker-label {
    text-align: left;
    max-width: none;
  }

  .mood-picker.is-hidden {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Pallini di navigazione disposti a semicerchio, con l'anello netto sul
   pallino attivo invece del vecchio alone di vetro sfocato. */
/* Riga pulita senza sovrapposizioni, sul modello del selettore colore
   accento di macOS (System Settings): pallini allineati con spaziatura
   regolare, nessun semicerchio/overlap. L'attivo si segnala solo con un
   lieve ingrandimento + un anello sottile — niente bagliore o anelli
   concentrici, per restare il piu' minimal possibile. */
.mood-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mood-dot {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--dot-color);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.16);
  transition: transform 0.2s var(--liquid-ease), box-shadow 0.2s ease;
}
.mood-dot:hover {
  transform: scale(1.12);
}
.mood-dot.is-active {
  transform: scale(1.12);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    0 0 0 2px var(--color-bg),
    0 0 0 3.5px var(--color-accent-strong);
}

.btn,
.btn-primary,
.btn-primary.glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-accent-strong);
  cursor: pointer;
  transition: opacity 0.2s ease, gap 0.25s var(--liquid-ease);
  /* Questi bottoni prendono la classe .glass solo per coerenza col resto
     del sito ma non usano l'effetto vetro vero e proprio (background,
     bordo e blur sono azzerati sopra): l'overflow:hidden ereditato da
     .glass pero' tagliava la freccina "->" ogni volta che si spostava
     verso destra in hover. Qui viene disattivato. */
  overflow: visible;
  isolation: auto;
}
.btn::after,
.btn-primary::after,
.btn-primary.glass::after {
  content: "\2192";
  transition: transform 0.25s var(--liquid-ease);
}

.btn[download]::after { content: none; }
.btn:hover,
.btn-primary:hover,
.btn-primary.glass:hover {
  color: var(--color-accent-strong);
  opacity: 0.7;
  background: none;
}
.btn:hover::after,
.btn-primary:hover::after,
.btn-primary.glass:hover::after {
  transform: translateX(4px);
}

.section, .hero { scroll-margin-top: 88px; }

.section {
  position: relative;
  padding: clamp(80px, 9vw, 132px) 0;
  background: var(--glass-gradient);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background-repeat: no-repeat;
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .section { background: var(--glass-bg-strong); }
}

.section-alt { background-image: linear-gradient(rgba(10, 10, 15, 0.04), rgba(10, 10, 15, 0.04)); }

#progetti.section {
  z-index: 2;
  overflow: visible;

  padding-top: 0;

  background: var(--footer-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #f2f2f2;
}

#progetti .section-kicker,
#progetti .corner-label,
#progetti .section-intro,
#progetti .filter-btn {
  color: rgba(255, 255, 255, 0.62);
}
#progetti h2,
#progetti .filter-btn:hover {
  color: #f5f5f5;
}
#progetti .filter-btn.active {
  color: var(--color-accent-strong);
}
#progetti .filter-bar {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* La grana+luci decorativa crea "macchie" visibili attraverso il vetro
   (backdrop-filter) delle card, e uno sfondo diverso sezione per sezione
   non legge come "un unico sfondo" ma come pezzi distinti. La texture
   resta solo su Progetti (#progetti.section::before); Chi
   sono/Esperienza/Competenze/footer restano scuri ma piatti (solo
   var(--footer-bg), senza pseudo-elemento), stesso colore esatto,
   nessuna cucitura visibile tra le sezioni. */
#progetti.section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    radial-gradient(ellipse 65% 40% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 85%, rgba(192, 172, 255, 0.09), transparent 65%),
    radial-gradient(ellipse 45% 35% at 92% 45%, rgba(255, 255, 255, 0.06), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, 180px 180px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  mix-blend-mode: screen;
}

#progetti > .container,
#about > .container,
#esperienza > .container,
#competenze > .container {
  position: relative;
  z-index: 1;
}

/* Sfondo scuro per Esperienza e Competenze (Chi sono resta su sfondo
   bianco, senza l'effetto texture condiviso). */
#esperienza.section,
#competenze.section {
  background: var(--footer-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #f2f2f2;
}
#esperienza .section-kicker,
#esperienza .corner-label,
#esperienza .section-intro,
#competenze .section-kicker,
#competenze .corner-label,
#competenze .section-intro {
  color: rgba(255, 255, 255, 0.62);
}
#esperienza h2,
#competenze h2 {
  color: #f5f5f5;
}
#esperienza .exp-num,
#esperienza .exp-company,
#esperienza .exp-place {
  color: rgba(255, 255, 255, 0.55);
}
#esperienza .exp-item h4 {
  color: #f5f5f5;
}
#esperienza .exp-item {
  border-left-color: rgba(255, 255, 255, 0.16);
}
#competenze .skills-list li {
  color: rgba(255, 255, 255, 0.85);
}
/* Stesso bug di specificita' gia' visto sui pallini degli strumenti:
   questa regola (ID + classe) batteva ".skills-list li:hover" (due
   classi) e spegneva il cambio colore all'hover. Va ripristinato
   esplicitamente qui. */
#competenze .skills-list li:hover {
  color: var(--color-accent);
}
/* I "puntini" del carosello strumenti erano pensati per uno sfondo
   chiaro (scuro trasparente al 22%): su sfondo scuro sparivano quasi
   del tutto. */
#competenze .tools-dot {
  background: rgba(255, 255, 255, 0.22);
}
#competenze .tools-dot:hover { background: rgba(255, 255, 255, 0.4); }
/* L'override sopra (per selettore #id) batteva in specificita' anche
   .tools-dot.is-active (due classi), che percio' perdeva il suo colore
   d'accento e diventava grigio come gli altri. Va ripristinato
   esplicitamente qui. */
#competenze .tools-dot.is-active {
  background: var(--color-accent);
}
/* Le icone strumenti sono quadratini quasi neri (var(--color-ink)) con
   il glifo bianco dentro: da soli restano leggibili ovunque, ma il loro
   bordo si perdeva contro uno sfondo di sezione altrettanto scuro. Un
   filo di contorno chiaro basta a ridare loro un margine definito.
   L'icona WordPress usa lo stesso identico markup <rect>+stroke delle
   altre (prima era un'immagine raster col logo ufficiale a cerchio,
   strutturalmente diversa dalle altre icone — sostituita con un semplice
   glifo "W" vettoriale coerente con lo stile delle altre). */
#competenze .tool-icon svg rect {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
}

#about .btn {
  margin-top: 28px;
}

.about-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-top: 32px;
}
.about-photo {
  flex: 0 0 clamp(200px, 30vw, 320px);
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  filter: grayscale(1);
}
.about-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 6px;
}
@media (min-width: 701px) {
  .about-layout { align-items: center; }
  .about-text { padding-top: 0; }
}
@media (max-width: 700px) {
  .about-layout {
    flex-direction: column;
    gap: 28px;
  }
  .about-photo {
    flex: none;
    width: clamp(160px, 45vw, 220px);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(56px) scale(0.9);
  filter: blur(14px);
  transition: opacity 1.1s ease, transform 1.1s var(--liquid-ease), filter 1.1s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.hero-content .reveal:nth-child(1) { transition-delay: 0s; }
.hero-content .reveal:nth-child(2) { transition-delay: 0.12s; }
.hero-content .reveal:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

.section > .container > p, .section-intro {
  max-width: 460px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.section-intro { margin-bottom: 44px; margin-top: -12px; }

.about-closing { margin-top: 28px; line-height: 1.9; }

.filter-bar {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
}
.filter-highlight {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent-strong);
  transition: transform 0.35s var(--liquid-ease), width 0.35s var(--liquid-ease);
  z-index: 1;
  pointer-events: none;
}
.filter-btn {
  position: relative;
  border: none;
  background: transparent;
  font: inherit;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.25s ease;
}
.filter-btn:hover { color: var(--color-text); }
.filter-btn.active { color: var(--color-accent-strong); }

.projects-sticky-band {
  position: sticky;

  top: 0;
  z-index: 90;
  padding: 32px 0 28px;
  margin-bottom: 48px;
  box-sizing: border-box;

  background: var(--glass-gradient);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-insets);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .projects-sticky-band { background: var(--glass-bg-strong); }
}
@media (max-width: 1400px) {
  /* Su mobile la sezione Progetti non ha l'effetto di sovrapposizione con
     la Home (scroll-jacking instabile su iOS Safari, restato solo
     desktop), quindi questo blocco non e' piu' "sticky" ma un normale
     intestazione di sezione: la card di vetro fluttuante (blur, bordo,
     ombra) non avrebbe piu' senso senza contenuto che scorre sotto, quindi
     qui viene rimossa e il testo/filtri restano semplicemente sullo sfondo
     scuro della sezione, coerenti col resto. */
  .projects-sticky-band {
    position: static;
    top: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
  }
}

.projects-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.project-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.project-card.is-filtered-out {
  display: none;
}

.project-card-trigger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.project-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  transition: transform 0.4s var(--liquid-ease);
}
.project-card:hover .project-panel { transform: translateY(-4px); }

.project-panel-media {
  position: relative;
  overflow: hidden;
  flex: 1 1 62%;
  min-width: 0;
  background: #0b0b0d;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);

  cursor: none;
}
@media (hover: none), (pointer: coarse) {
  .project-panel-media { cursor: pointer; }
}
.project-panel-media img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.6s var(--liquid-ease);
  will-change: transform;
}
.project-card:hover .project-panel-media img { transform: scale(1.04); }

/* Leggero velo nero al passaggio del cursore sui progetti. */
.project-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.project-card:hover .project-panel-media::after { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .project-panel-media::after { display: none; }
  /* Su touch/trackpad ibrido il :hover puo' restare "acceso" dopo un tap
     (nessun vero mouseleave: la card sembra fare l'animazione hover da
     sola). Le altre due reazioni hover della card (sollevamento + zoom
     immagine) restano quindi disattivate qui, non solo il velo scuro. */
  .project-card:hover .project-panel { transform: none; }
  .project-card:hover .project-panel-media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-panel-media img,
  .project-card:hover .project-panel-media img { transform: none; }
}

.project-panel-info {
  flex: 1 1 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-panel-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.5);
}

.project-panel-num {
  color: var(--color-accent-strong);
}
.project-panel-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

@media (max-width: 760px) {
  .project-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .project-panel-media,
  .project-panel-info {
    flex: none;
  }
}

.exp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exp-list-single {
  max-width: 560px;
}
.exp-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
}

.exp-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding-top: 3px;
  flex-shrink: 0;
}
.exp-period {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent-violet);
  margin-bottom: 6px;
}
.exp-item h4 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.exp-company {
  font-weight: 500;
  color: var(--color-text-muted);
}
.exp-place {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.skills-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}
.skills-list li {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: transform 0.3s var(--liquid-ease), color 0.3s ease, box-shadow 0.3s ease;
}
.skills-list li:hover {
  transform: translateY(-3px) scale(1.04);
  color: var(--color-accent);
  box-shadow: 0 10px 22px rgba(var(--color-accent-rgb), 0.2), var(--glass-insets);
}

.tools-carousel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 100%;
}
.tools-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;

  max-width: 492px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  padding: 60px 4px 18px;
}

.tools-grid::-webkit-scrollbar { display: none; }
.tools-grid { scrollbar-width: none; -ms-overflow-style: none; }
.tool-badge { flex: 0 0 auto; }
.tool-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
}

.tools-dots {
  display: flex;

  justify-content: center;
  max-width: 492px;
  align-items: center;
  gap: 8px;
  min-height: 8px;
}
.tools-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--color-ink-rgb), 0.22);
  cursor: pointer;
  transition: width 0.3s var(--liquid-ease), border-radius 0.3s var(--liquid-ease), background 0.25s ease;
}
.tools-dot:hover { background: rgba(var(--color-ink-rgb), 0.4); }
.tools-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--color-accent);
}

.tool-icon {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  animation: toolFloat 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.15s);
  transition: transform 0.3s var(--liquid-ease), filter 0.3s ease;
}
.tool-badge:hover .tool-icon {
  animation-play-state: paused;
  transform: translateY(-6px) scale(1.08) rotate(-4deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.tool-icon svg { width: 72%; height: 72%; display: block; }
.tool-icon svg rect { transition: filter 0.3s ease; }
.tool-badge:hover .tool-icon svg rect { filter: brightness(1.25); }

.tool-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 8px;

  background: #16161a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.tool-badge:hover .tool-tooltip,
.tool-icon:focus-visible ~ .tool-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@keyframes toolFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .tool-icon { animation: none; }
}

.contact-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;
  padding: 28px;
  border-radius: 20px;
  background: var(--glass-gradient);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-insets);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-form { background: var(--glass-bg-strong); }
}

.contact-form label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 10px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border: 1px solid var(--color-border);
  background: rgba(var(--color-ink-rgb), 0.04);
  border-radius: 10px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent-strong);
  background: rgba(var(--color-ink-rgb), 0.07);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-strong-rgb), 0.3);
}
.contact-form .form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.contact-form .form-status.is-error { color: #e26d5c; }
.contact-form button { margin-top: 16px; align-self: flex-start; border: none; cursor: pointer; }

.site-footer {
  position: relative;

  z-index: 7;
  overflow: hidden;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.7);
  padding: 24px 0 16px;
}

/* .footer-ambient: overlay decorativo posizionato nel footer, oggi senza
   texture applicata (vedi commento sopra su #progetti.section::before) —
   il footer resta scuro ma piatto come le altre sezioni. */

.footer-name {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

/* Bottone "torna su": vive FUORI dal footer (vedi .footer-jump, un
   div a se' stante subito prima di <footer> nel markup) cosi' non
   viene tagliato dall'overflow:hidden del footer e resta visivamente
   "sospeso" appena sopra il suo bordo superiore, non incollato dentro
   la riga del nome. */
.footer-jump {
  position: relative;
  z-index: 8;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 0;
}
.footer-top-btn {
  position: absolute;
  right: 24px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-ink);
  cursor: pointer;
  transition: transform 0.3s var(--liquid-ease), background 0.25s ease;
}
.footer-top-btn:hover { transform: translateY(-4px); background: var(--glass-bg-strong); }

/* Linea separatrice sopra la barra copyright: a differenza di
   footer-columns (dentro .container, quindi con margini laterali),
   questo div e' figlio diretto di <footer> e va da un bordo all'altro
   dello schermo. */
.footer-divider {
  position: relative;
  z-index: 1;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 20px;
}

.footer-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.4fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 24px;
}

.footer-col-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

.footer-tag { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.footer-col-sitemap .footer-links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 48px;
  row-gap: 10px;
  justify-content: start;
}

.footer-links a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}
.footer-links a:hover { color: var(--color-accent-strong); }

.footer-social {
  display: flex;
  gap: 10px;
  list-style: none;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.3s var(--liquid-ease), border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.footer-social a:hover {
  color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  background: rgba(var(--color-accent-strong-rgb), 0.14);
  transform: translateY(-3px) scale(1.06);
}

.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  column-gap: 16px;
}
/* Copyright e Privacy/Cookie Policy scorrono normalmente uno dopo l'altro
   (stesso ordine del markup); la P.IVA si stacca da sola con un margine
   automatico che la spinge sempre all'estrema destra della riga in cui si
   trova — su desktop e' la stessa riga di copyright/link, su mobile (dove
   .footer-copyright va a capo su una riga propria) diventa la stessa riga
   di Privacy/Cookie Policy, sempre allineata a destra. */
.footer-piva { margin-left: auto; }

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}
/* Pagina Privacy Policy: titolo e intro piu' piccoli del solito (qui e'
   un h1 vero, non l'h2 uppercase gia' usato altrove) — la mancanza di
   margin-bottom sull'h1 faceva sovrapporre l'intro al titolo. */
.legal-page .section-kicker { margin-bottom: 28px; }
.legal-page h1 {
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.legal-page .section-intro {
  margin-top: 0;
  font-size: 0.72rem;
  margin-bottom: 24px;
}

.legal-body {
  max-width: 720px;
  margin-top: 28px;
}
.legal-body h2 {
  font-size: 0.9rem;
  margin: 28px 0 8px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin: 16px 0 5px;
}
.legal-body p {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin-bottom: 4px;
}
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--color-accent-strong); }
/* Il pulsante "Gestisci le tue preferenze cookie" e' un .btn, non un
   link di testo qualunque: niente sottolineatura, gia' ha la sua
   freccina come le altre CTA del sito. */
.legal-body .btn { text-decoration: none; margin-top: 20px; font-size: 0.78rem; }

/* Pagine di progetto dedicate (case study), sostituiscono la vecchia
   lightbox per i progetti migrati. */

.case-study .section-kicker { margin-bottom: 20px; }
/* .legal-page h1 (in comune con Privacy Policy) e' minuscolo apposta per
   quella pagina di servizio; qui serve un vero titolo di progetto, quindi
   si sovrascrive con una dimensione adeguata. */
.case-study h1 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Pulsante rotondo con freccina che si espande in pillola col testo al
   passaggio del mouse. Stesso cerchio 44px degli altri bottoni tondi del
   sito (es. footer-top-btn), qui con overflow:hidden e width che cresce
   in hover per rivelare l'etichetta. */
/* 56px come l'altezza complessiva della nav (10px padding + 9px padding
   link + riga di testo), border-radius 16px invece del cerchio/pillola
   pieni, in linea con gli altri contenitori .glass squadrati del sito
   (es. la nav stessa, 14px). */
.case-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 56px;
  width: 56px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 32px;
  transition: width 0.4s var(--liquid-ease), box-shadow 0.25s ease;
}
/* Posizionato dentro l'header, accanto alla nav, cosi' condivide la
   stessa riga invece di stare piu' in basso nel contenuto della pagina
   (che parte sotto l'header col suo padding). Ancorato a sinistra e
   centrato verticalmente sull'header; a 720px la nav si sposta a destra
   (regola gia' esistente), lasciando spazio libero a sinistra. */
.site-header .container { position: relative; }
.site-header .case-back {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  z-index: 2;
}
.case-back-icon {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-back-icon svg { transition: transform 0.3s var(--liquid-ease); }
.case-back-label {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-right: 22px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.case-back:hover,
.case-back:focus-visible {
  width: 128px;
}
.case-back:hover .case-back-label,
.case-back:focus-visible .case-back-label {
  opacity: 1;
  transition: opacity 0.25s ease 0.1s;
}
.case-back:hover .case-back-icon svg,
.case-back:focus-visible .case-back-icon svg {
  transform: translateX(-2px);
}

.case-study .section-intro {
  font-size: 1rem;
  max-width: 640px;
  margin-top: 0;
  margin-bottom: 40px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* Testo introduttivo giustificato solo per il paragrafo in cima alla
   pagina (figlio diretto di .container), non per le intro delle singole
   sezioni sotto. text-align-last:left evita che l'ultima riga (spesso
   corta) venga stirata in modo innaturale. */
.case-study > .container > .section-intro {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* Carosello a scorrimento orizzontale con freccine, come la galleria
   "L'Arte dei Dettagli" del sito Eberhard reale. Usato per i dettagli
   macro del Lancia HF: binario scrollabile con scroll-snap, due bottoni
   tondi in stile vetro per scorrere una card alla volta. */
.case-carousel {
  position: relative;
  margin: 0 0 44px;
}
.case-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.case-carousel-track::-webkit-scrollbar { display: none; }
.case-carousel-item {
  flex: 0 0 auto;
  width: min(320px, 72vw);
  height: auto;
  scroll-snap-align: start;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.case-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-gradient);
  color: var(--color-ink);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-insets);
  transition: background 0.25s ease, transform 0.25s var(--liquid-spring);
}
.case-carousel-nav:hover { background: var(--glass-bg-strong); transform: translateY(-50%) scale(1.08); }
.case-carousel-nav:disabled { opacity: 0.35; cursor: default; }
.case-carousel-nav:disabled:hover { background: var(--glass-gradient); transform: translateY(-50%); }
.case-carousel-prev { left: -14px; }
.case-carousel-next { right: -14px; }
@media (max-width: 720px) {
  .case-carousel-prev { left: 4px; }
  .case-carousel-next { right: 4px; }
}

/* Galleria con ritmo: griglia a 6 colonne (base tecnica, non visibile),
   ogni immagine occupa tutta la larghezza (span 6) a meno che non abbia
   .span-half (3/6, due per riga) o .span-third (2/6, tre per riga, es. il
   trittico Biasion). Cosi' si alternano blocchi grandi e gruppi piu'
   piccoli invece della fila uniforme di prima. */
.case-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-bottom: 44px;
}
/* width:100% forzava anche le immagini piu' piccole (banner 320x480
   ecc.) a riempire tutta la colonna, ingrandendole oltre la risoluzione
   nativa. Niente width forzata: l'immagine usa la sua dimensione
   naturale fino a un massimo del 100% della colonna (mai piu' grande
   dell'originale) e resta centrata. */
.case-gallery img {
  display: block;
  max-width: 100%;
  height: auto;
  justify-self: center;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  grid-column: span 6;
}
.case-gallery img.span-half { grid-column: span 3; }
.case-gallery img.span-third { grid-column: span 2; }
@media (max-width: 760px) {
  .case-gallery img.span-half,
  .case-gallery img.span-third { grid-column: span 6; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .case-gallery img.span-third { grid-column: span 3; }
}

/* Progetti social con un solo contenuto Instagram (embed ufficiale via
   iframe .../embed, stessa tecnica gia' usata nella lightbox per
   .lightbox-frame--ig) invece della gallery: una o piu' card affiancate,
   a capo su mobile. */
.case-instagram {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 44px;
}
.case-instagram iframe {
  display: block;
  width: min(400px, 100%);
  height: 660px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  background: #fff;
}
/* Backwall e Pubblicità seguono lo stesso schema di Sito Lancia HF:
   gallery standard (.case-gallery, span-half/span-third) invece di
   trattamenti dedicati. I blocchi .case-split e .case-tile (tutte le
   varianti) sono stati rimossi perche' non piu' usati da nessuna
   pagina. */

/* Tolto il trattino accento (.section-kicker-num), resta solo
   l'etichetta. Titoletti piccoli, in grigio chiaro, maiuscolo, col font
   del testo invece che mono, colore piu' tenue di --color-text-muted. */
.case-subtitle {
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #999999;
  margin-bottom: 16px;
}
.case-subtitle:not(:first-child) { margin-top: 40px; }

/* Immagini di formati diversi che insieme formano un rettangolo
   perfetto, senza spazi vuoti. Tecnica delle "gallery giustificate"
   (Flickr/Google Photos): riga flex ad altezza fissa, ogni immagine
   cresce in proporzione al proprio rapporto larghezza/altezza (flex-grow
   impostato inline in HTML), cosi' il bordo destro combacia sempre.
   object-position:center mantiene loghi e testo (di norma centrati nei
   banner) dentro l'inquadratura anche quando il ritaglio e' necessario. */
.case-bento {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.case-bento:last-of-type { margin-bottom: 44px; }
.case-bento-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-basis: 0;
  min-width: 64px;
}
.case-bento-item img {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
/* Su mobile le righe giustificate non hanno piu' senso (una sola
   colonna), quindi niente altezza fissa + object-fit:cover: ogni
   immagine mantiene la sua proporzione naturale (altezza automatica),
   zero ritaglio. */
@media (max-width: 640px) {
  .case-bento { flex-direction: column; height: auto !important; }
  .case-bento-item { height: auto; flex-basis: auto !important; flex-grow: 0 !important; min-width: 0; }
  .case-bento-item img { height: auto; object-fit: contain; }
}

/* Senza margine, due .case-body consecutivi (es. paragrafo + tag
   pillole, poi subito il paragrafo successivo) si toccavano perche'
   .case-tags ha solo margin-top e non spinge via il blocco dopo. */
.case-body { max-width: 720px; margin-bottom: 36px; }
.case-body p {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.case-body p strong { font-weight: 700; }
.case-body .btn { font-size: 0.78rem; }

/* Pagina progetto multi-sezione (es. Eberhard & Co.): invece di piu'
   pagine/card separate per lo stesso cliente, un'unica card nella griglia
   porta a un'unica pagina con piu' capitoli, con un piccolo indice per
   saltare da una sezione all'altra. */
.case-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  position: relative;
}
.case-toc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-border);
}
.case-toc a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.case-toc a:hover { color: var(--color-accent-strong); }

.case-section {
  margin-top: 56px;
  padding-top: 56px;
  position: relative;
  scroll-margin-top: 100px;
}
.case-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-border);
}
.case-section:first-of-type { margin-top: 0; padding-top: 0; }
.case-section:first-of-type::before { display: none; }
.case-section-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent-strong);
  margin-bottom: 8px;
}
.case-section h2 {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.case-section .section-intro { margin-bottom: 28px; }

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
/* In home i chip (.skills-list li) sono vetro (.glass) con sollevamento
   e colore accento all'hover, non un bordo piatto e statico. Stessa
   trattazione qui: .case-tag va usato insieme alla classe .glass in
   HTML. */
.case-tag {
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: transform 0.3s var(--liquid-ease), color 0.3s ease, box-shadow 0.3s ease;
}
.case-tag:hover {
  transform: translateY(-3px) scale(1.04);
  color: var(--color-accent);
  box-shadow: 0 10px 22px rgba(var(--color-accent-rgb), 0.2), var(--glass-insets);
}

.case-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
}

/* Due card cliccabili verso il progetto precedente/successivo (ordine
   ciclico, come in griglia home: dopo l'ultimo si torna al primo). */
/* Bordi squadrati (10px, come .case-tag/.btn). Una sola riga: icona
   direzionale + titolo pagina, senza etichetta testuale sopra. */
.case-project-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  max-width: 240px;
  transition: transform 0.3s var(--liquid-ease), color 0.3s ease, box-shadow 0.3s ease;
}
.case-project-nav-link:hover,
.case-project-nav-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(var(--color-accent-rgb), 0.2), var(--glass-insets);
}
.case-project-nav-next { margin-left: auto; flex-direction: row-reverse; }
.case-project-nav-link svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
}
.case-project-nav-title {
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 500;
  color: #c2c2c2;
  transition: color 0.3s ease;
}
.case-project-nav-link:hover .case-project-nav-title,
.case-project-nav-link:focus-visible .case-project-nav-title {
  color: var(--color-accent);
}
.case-project-nav-link:hover svg,
.case-project-nav-link:focus-visible svg {
  color: var(--color-accent);
}
@media (max-width: 640px) {
  .case-project-nav-link { max-width: none; }
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.footer-legal-link:hover {
  color: var(--color-accent-strong);
  text-decoration-color: currentColor;
}
#footer-privacy-link { margin-right: 5px; }
#footer-cookie-policy { margin-left: 5px; }

@media (max-width: 700px) {
  .footer-columns { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-columns { grid-template-columns: 1fr; }
  .footer-col-sitemap .footer-links { grid-template-rows: repeat(6, auto); }
  /* Il copyright va a capo da solo su tutta la riga (e' il testo piu'
     lungo); Privacy/Cookie Policy e P.IVA restano invece sulla stessa
     riga, link a sinistra e P.IVA spinta a destra dal margin-left:auto
     definito sopra. */
  .footer-copyright { flex: 1 1 100%; }
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  width: 100%;
  padding: 14px clamp(44px, 5vw, 56px) 14px clamp(20px, 4vw, 40px);
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 16, 20, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s var(--liquid-ease), visibility 0.5s;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-banner { background: rgba(10, 10, 12, 0.98); }
}
.cookie-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.cookie-banner-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.cookie-banner-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
}

.cookie-banner-main[hidden],
.cookie-banner-prefs[hidden] { display: none; }
.cookie-banner-copy {
  flex: 1 1 260px;
  max-width: 620px;
}
.cookie-banner-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.cookie-banner-lead {
  color: #fff;
  font-weight: 700;
}
.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  flex-shrink: 0;
}

.cookie-banner-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.cookie-banner-link:hover { color: #fff; }

.cookie-btn {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--liquid-ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.cookie-btn-outline:hover { border-color: rgba(255, 255, 255, 0.6); }
.cookie-btn-solid {
  background: var(--color-accent-strong);
  border: 1px solid var(--color-accent-strong);
  color: #fff;
}
.cookie-btn-solid:hover { background: var(--color-accent); border-color: var(--color-accent); }

.cookie-banner-title {
  margin: 0 0 8px;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.cookie-banner-prefs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cookie-banner-prefs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.cookie-banner-prefs-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.cookie-pref-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cookie-pref-info { display: flex; flex-direction: column; gap: 2px; }
.cookie-pref-title { font-size: 0.85rem; font-weight: 600; color: #fff; }
.cookie-pref-desc { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }

/* Toggle in stile "Apple Liquid Glass": pillola di vetro con la stessa
   ricetta --glass-gradient del resto del sito, invece del semplice
   riempimento a tinta piatta di prima. Il "pallino" resta bianco
   solido — su una pillola cosi' piccola un vetro anche li' sarebbe
   illeggibile. */
.cookie-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-gradient);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 5px -2px rgba(255, 255, 255, 0.22);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-toggle { background: var(--glass-bg-strong); }
}
.cookie-toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.4s var(--liquid-spring);
}
/* Acceso: il vetro si tinge dell'accento del mood attivo con color-mix()
   (stessa tecnica gia' usata per il mood-picker) invece di diventare un
   blocco di colore piatto — resta "vetro", solo colorato. */
.cookie-toggle[aria-checked="true"],
.cookie-toggle-locked {
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-accent-strong) 55%, white 45%) 0%, color-mix(in srgb, var(--color-accent-strong) 35%, white 65%) 100%);
  border-color: var(--color-accent-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 5px -2px rgba(255, 255, 255, 0.22), 0 0 10px rgba(var(--color-accent-rgb), 0.3);
}
.cookie-toggle[aria-checked="true"] .cookie-toggle-dot { transform: translateX(18px); }
.cookie-toggle-locked {
  opacity: 0.65;
  cursor: default;
}
.cookie-toggle-locked .cookie-toggle-dot { transform: translateX(18px); }

@media (max-width: 560px) {
  .cookie-banner { padding: 16px 40px 16px 18px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 900px) {
  .hero { padding: 0; height: auto; }
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    text-align: center;
    align-items: stretch;
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
  }
  .hero-content {
    text-align: left;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px 0 26px;
  }
  .hero-subtitle { margin: 12px 0 0; }

  .hero-blob {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    order: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    pointer-events: auto;
  }

  .mood-picker {
    position: fixed;
    top: 32px;
    left: 24px;
    right: auto;
    margin: 0;
    padding: 0;
    z-index: 150;
    gap: 0;
  }
  .mood-picker-label { display: none; }
  .mood-dots { gap: 8px; }
}

/* Soglia allineata a 1400px (non più 720px, poi non più 960px): il
   .container smette di essere "a tutta larghezza" solo quando il
   viewport supera --max-width (1320px) + il suo padding (24px x2) =
   1368px. Sotto quella soglia il container tocca i bordi del viewport,
   e con lui il menu esteso e la fascia sticky di Progetti — che finivano
   così a occupare lo stesso spazio del mood-picker (fixed, ancorato al
   viewport) e del corner-label di Progetti, invece di avere il margine
   laterale libero su cui sono pensati per stare. Un primo fix a 960px
   copriva solo gli iPad "normali" verticali (744-834px) ma non l'iPad
   Pro 12.9" verticale (1024px), ancora dentro la fascia 961-1368px:
   1400px (con un margine di sicurezza per le scrollbar) copre tutta la
   fascia a rischio, non solo la sua metà. Menu, mood-picker,
   corner-sticky e projects-sticky-band scattano tutti insieme qui. */
@media (max-width: 1400px) {
  .nav {
    margin: 0 0 0 auto;
    overflow: visible;
    position: relative;
  }
  .nav-toggle { display: flex; z-index: 2; }
  .nav-highlight { display: none; }
  .nav-menu-wrap { position: static; }
  /* Apertura del menu mobile in stile "liquid glass": invece di comparire
     di scatto con display:none -> flex, il pannello si materializza —
     scala e sfoca leggermente meno di quanto dovrebbe, poi "si addensa"
     (blur e opacita' che crescono insieme a una piccola sovra-elongazione
     data da --liquid-ease) come una goccia di vetro che prende forma.
     Uso opacity/visibility invece di display:none cosi' la transizione
     puo' essere animata; il ritardo su visibility evita che il pannello
     resti cliccabile mentre sparisce. */
  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    min-width: 210px;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 20px;
    display: flex;
    background: var(--glass-gradient);
    border: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: blur(0px) saturate(120%);
    -webkit-backdrop-filter: blur(0px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top right;
    transform: scale(0.82) translateY(-10px);
    transition:
      opacity 0.3s ease,
      transform 0.4s ease,
      backdrop-filter 0.35s ease,
      -webkit-backdrop-filter 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease,
      visibility 0s linear 0.4s;
  }
  .nav-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-insets);
    transition:
      opacity 0.4s ease,
      transform var(--liquid-spring-time) var(--liquid-spring),
      backdrop-filter 0.5s ease,
      -webkit-backdrop-filter 0.5s ease,
      border-color 0.4s ease,
      box-shadow 0.4s ease;
  }
  .nav-menu a { display: block; padding: 14px 18px; text-align: center; }
  .hero { padding: 0; }

  #progetti .corner-label { display: none; }
  .filter-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 1400px) and (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-menu.open { transition: none; transform: none; }
}