/* ============================================================
   JakeART — style.css
   Sito JakeART. Mobile-first: tipografia e ritmo sono FLUIDI
   (scala clamp() in :root, niente salti di breakpoint); i
   breakpoint 768 / 1024 / 1440 restano solo per i cambi di
   layout (navbar, colonne delle griglie).
   Palette scura con accento viola→turchese, variabili CSS per
   personalizzare tutto da un unico punto.
   ============================================================ */

/* ---------- 1. Variabili e temi ---------- */

:root {
  /* Palette tema scuro (default) */
  --bg: #0b0d14;
  --bg-alt: #10131d;
  --surface: #171b28;
  --bordo: #2a3044;
  --testo: #e8eaf2;
  --testo-mite: #a6adc2;

  /* Accenti */
  --viola: #9d6bff;
  --turchese: #30e0c8;
  --stella: #ffc94d;
  --gradiente: linear-gradient(120deg, var(--viola), var(--turchese));

  /* Tipografia: font di sistema (zero richieste esterne) + mono di servizio */
  --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;

  /* Scala tipografica fluida: rem + vw così scala col viewport
     ma resta ingrandibile con lo zoom testo (mai vw puro) */
  --testo-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --testo-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --font-titolo-hero: clamp(2.2rem, 1.5rem + 3vw, 4.2rem);
  --font-titolo-sezione: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  --font-cifra-stat: clamp(2rem, 1.65rem + 1.5vw, 3rem);
  --font-cifra-totale: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem);

  /* Ritmo fluido: gutter, gap delle griglie e respiro tra sezioni
     interpolano da mobile a desktop senza scatti ai breakpoint */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
  /* Larghezza della colonna di contenuto: la ridefiniscono le sezioni
     strette (.sezione--stretto), non serve un wrapper diverso */
  --larghezza-contenuto: 72rem;
  --spazio-griglia: clamp(1rem, 0.85rem + 1vw, 1.75rem);
  --spazio-sezione: clamp(4.5rem, 2.5rem + 5.5vw, 7.5rem);
  --raggio: 14px;
  --ombra: 0 10px 40px rgba(0, 0, 0, 0.35);

  /* Il colore usato dal browser per i controlli nativi (range, checkbox…) */
  accent-color: var(--viola);
  color-scheme: dark;
}

/* Tema chiaro: accenti scuriti per mantenere il contrasto AA su fondo chiaro */
:root[data-theme="light"] {
  --bg: #f6f6fa;
  --bg-alt: #ececf3;
  --surface: #ffffff;
  --bordo: #d7dae6;
  --testo: #1a1d29;
  --testo-mite: #4c5266;
  --viola: #6430d6;
  --turchese: #0b7d71;
  --stella: #9a6a00; /* l'oro chiaro non regge il contrasto su fondo bianco */
  --ombra: 0 10px 30px rgba(26, 29, 41, 0.10);
  color-scheme: light;
}

/* ---------- 2. Reset minimo e base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--testo-base);
  line-height: 1.6;
  color: var(--testo);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img,
canvas {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--turchese);
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

address {
  font-style: normal; /* niente corsivo di default sui recapiti */
}

button {
  font: inherit;
  cursor: pointer;
}

/* Focus visibile ovunque, anche col cursore custom attivo (requisito AA) */
:focus-visible {
  outline: 3px solid var(--turchese);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Link "salta al contenuto": invisibile finché non riceve focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--surface);
  color: var(--testo);
  border-radius: 8px;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- 3. Impaginazione: la colonna di contenuto ---------- */

/* Ogni regione di primo livello (sezione, hero, CTA, footer) è essa stessa
   la griglia che centra il contenuto: tre colonne nominate — margine,
   `content`, margine. Così non serve nessun <div class="container">
   annidato: un livello di DOM in meno per ogni sezione della pagina. */
.hero,
.sezione,
.cta-finale,
.footer {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(var(--larghezza-contenuto), 100% - var(--gutter) * 2) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}

.hero > *,
.sezione > *,
.cta-finale > *,
.footer > * {
  grid-column: content;
}

/* Le regioni al vivo (canvas delle particelle, sfondi) occupano tutta la riga */
.a-tutta-larghezza {
  grid-column: full;
}

/* Colonne di lettura strette: testi lunghi e form (misura ~46rem) */
.sezione--stretto {
  --larghezza-contenuto: 46rem;
}

/* Etichetta "da terminale" sopra i titoli di sezione: la firma tipografica del sito */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--turchese);
  margin-bottom: 0.75rem;
}

/* Il prompt "~/" è decorativo: testo alternativo vuoto perché gli
   screen reader non leggano "tilde barra" prima di ogni titolo.
   La prima dichiarazione è il fallback per i browser che non
   riconoscono la sintassi `content: … / "alt"`: lì resta il simbolo. */
.eyebrow::before {
  content: "~/";
  content: "~/" / "";
  opacity: 0.6;
}

.sezione {
  padding-block: var(--spazio-sezione);
  /* Il browser salta layout e paint delle sezioni fuori viewport;
     l'altezza stimata evita salti della scrollbar */
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

.sezione--alt {
  background: var(--bg-alt);
}

.sezione__titolo {
  font-size: var(--font-titolo-sezione);
  font-weight: 900;
}

.sezione__sottotitolo {
  color: var(--testo-mite);
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

/* Testata delle pagine interne: la prima sezione deve stare sotto la
   navbar fissa, come fa l'hero della home col suo padding-top */
.pagina-intro {
  padding-block-start: calc(var(--spazio-sezione) + 3.5rem);
}

/* Invito a cambiare pagina in coda a una sezione */
.sezione__seguito {
  margin: 2.5rem 0 0;
}

/* ---------- 4. Bottoni ---------- */

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.btn--primario {
  background: var(--gradiente);
  color: #0b0d14; /* testo scuro su gradiente chiaro: contrasto garantito in entrambi i temi */
  border: 0;
}

:root[data-theme="light"] .btn--primario {
  color: #ffffff; /* nel tema chiaro il gradiente è scuro, quindi testo bianco */
}

.btn--fantasma {
  border-color: var(--bordo);
  color: var(--testo);
}

.btn--invertito {
  background: var(--bg);
  color: var(--testo);
}

.btn--invertito-fantasma {
  border-color: currentColor;
  color: var(--bg);
}

/* ---------- 5. Navbar ---------- */

.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  gap: 1rem;
  /* La navbar è fissa e fuori dal flusso: si centra da sola, senza griglia */
  width: min(100% - var(--gutter) * 2, var(--larghezza-contenuto));
  margin-inline: auto;
}

.navbar__logo {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--testo);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Logo animato (assets/logo.gif): altezza vincolata alla navbar */
.navbar__logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
}

/* Testo presente solo per screen reader e motori di ricerca */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hamburger: visibile solo sotto i 768px.
   Una sola barra nel markup: le altre due sono pseudo-elementi. */
.navbar__hamburger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
}

.navbar__hamburger span,
.navbar__hamburger span::before,
.navbar__hamburger span::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--testo);
}

.navbar__hamburger span {
  position: relative;
}

.navbar__hamburger span::before,
.navbar__hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
}

.navbar__hamburger span::before { top: -7px; }
.navbar__hamburger span::after  { top: 7px; }

/* Le voci di menu SONO il pannello a comparsa: nessun contenitore
   intermedio tra <nav> e la lista dei link. */
.navbar__links {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--bg);
  border-bottom: 1px solid var(--bordo);
}

.navbar__links.is-aperto {
  display: flex;
}

.navbar__links a {
  color: var(--testo);
  text-decoration: none;
  font-weight: 500;
  padding: 0.25rem 0;
}

.navbar__links a:hover {
  color: var(--turchese);
}

/* Pagina corrente: sottolineatura col gradiente, non solo il colore */
.navbar__links a[aria-current="page"] {
  color: var(--turchese);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Toggle tema: track + pallino, disegnato interamente in CSS.
   Sta fuori dal pannello a comparsa, così resta raggiungibile
   anche su mobile senza aprire il menu. */
.theme-toggle {
  background: none;
  border: 0;
  padding: 6px;
  margin-inline-start: auto;
  align-self: center;
}

.theme-toggle__track {
  display: block;
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--bordo);
}

.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gradiente);
}

/* Nel tema chiaro il pallino scivola a destra (transizione aggiunta in fase animazioni) */
:root[data-theme="light"] .theme-toggle__thumb {
  transform: translateX(24px);
}

/* Icone sole/luna nel track */
.theme-toggle__track::before,
.theme-toggle__track::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
}

.theme-toggle__track::before {
  content: "☾";
  left: 7px;
  color: var(--testo-mite);
}

.theme-toggle__track::after {
  content: "☀";
  right: 6px;
  color: var(--testo-mite);
}

/* ---------- 6. Hero ---------- */

.hero {
  position: relative;
  align-content: center; /* il contenuto resta centrato in verticale */
  min-height: 100svh;
  padding-block: 7rem 4rem;
  overflow: hidden;
}

/* Gli elementi in posizione assoluta dell'hero prendono come riferimento
   tutta la sua area, non la sola colonna di contenuto */
.hero__particles,
.hero__scroll-cue,
.hero-card {
  grid-column: full;
}

/* z-index negativo: il canvas resta sotto al testo dell'hero senza
   bisogno di un wrapper posizionato che faccia da strato superiore */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.hero__title {
  font-size: var(--font-titolo-hero);
  font-weight: 900;
  max-width: 16em;
}

/* La frase "digitata": mono + gradiente, il momento firma della pagina */
.hero__typing-wrap {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.hero__typing {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__caret {
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.08em;
  vertical-align: text-bottom;
  background: var(--turchese);
}

.hero__subtitle {
  color: var(--testo-mite);
  font-size: var(--testo-lg);
  max-width: 36rem;
  margin-block: 1.25rem 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
}

/* Punti di valore chiave: ALL-CAPS via CSS (il testo resta normale
   nell'HTML per gli screen reader), leggibili al primo colpo d'occhio */
.hero__punti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: 1.75rem;
}

.hero__punti li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--testo);
}

.hero__punti li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradiente);
}

/* Card fluttuanti: pura decorazione (aria-hidden), nascoste su mobile e
   visibili da 1024px. Etichetta e nota arrivano da attributi data-*
   tramite attr(): una card = un solo elemento nel DOM, non tre. */
.hero-card {
  display: none;
  position: absolute;
  padding: 0.9rem 1.2rem;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
}

.hero-card::before {
  content: "$ " attr(data-label);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--testo-mite);
}

.hero-card::after {
  content: attr(data-nota);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--testo-mite);
}

.hero-card--1 { top: 22%; right: 4%; }
.hero-card--2 { top: 48%; right: 14%; }
.hero-card--3 { top: 70%; right: 6%; }

/* Scroll cue: "mouse" disegnato in CSS, rotellina compresa (pseudo-elemento) */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 28px;
  height: 46px;
  border: 2px solid var(--testo-mite);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.hero__scroll-cue::before {
  content: "";
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: var(--turchese);
}

/* ---------- 7. Servizi ---------- */

.servizi__griglia {
  display: grid;
  gap: var(--spazio-griglia);
  grid-template-columns: 1fr;
}

.servizio-card {
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.servizio-card h3 {
  font-size: 1.15rem;
}

/* Icona della card: sta in data-icona e la stampa il CSS.
   La sintassi `content: … / ""` le dà testo alternativo vuoto, quindi
   resta decorativa e muta per gli screen reader. */
.servizio-card h3[data-icona]::before {
  content: attr(data-icona);
  content: attr(data-icona) / "";
  display: block;
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.servizio-card p {
  color: var(--testo-mite);
  font-size: 0.95rem;
}

/* Kicker: beneficio chiave in ALL-CAPS, primo elemento letto della card */
.servizio-card__kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--turchese);
  margin: 0 0 0.75rem;
}

/* Footer della card: prezzo ben visibile + passo successivo esplicito */
.servizio-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--bordo);
}

.servizio-card__cta {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.servizio-card__cta:hover {
  text-decoration: underline;
}

/* ---------- 8. Statistiche ---------- */

.stats__griglia {
  display: grid;
  gap: var(--spazio-griglia);
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.stat {
  padding: 1.5rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  text-align: center;
}

.stat dt {
  order: 2;
  font-size: 0.85rem;
  color: var(--testo-mite);
}

.stat dd {
  margin: 0 0 0.35rem;
}

.stat__numero {
  font-family: var(--font-mono);
  font-size: var(--font-cifra-stat);
  font-weight: 700;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__suffisso {
  font-family: var(--font-mono);
  color: var(--testo-mite);
  font-size: 1rem;
}

/* ---------- 9. Configuratore ---------- */

/* Avviso "dati fittizi": deve leggersi prima del configuratore, non dopo */
.demo__avviso {
  max-width: 46rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.2rem;
  border: 1px dashed var(--bordo);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--testo-mite);
}

.configuratore {
  max-width: 46rem;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.configuratore legend {
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding: 0;
}

.configuratore__tipi,
.configuratore__opzioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Chip selezionabili: l'input resta accessibile, lo stile va sulla label */
.chip {
  position: relative;
  display: inline-flex;
}

.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 0.9rem;
  background: var(--bg);
}

.chip small {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--testo-mite);
}

.chip input:checked + span {
  border-color: var(--viola);
  background: color-mix(in srgb, var(--viola) 18%, var(--bg));
}

.chip input:focus-visible + span {
  outline: 3px solid var(--turchese);
  outline-offset: 3px;
}

.configuratore__slider-riga {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.configuratore__slider-riga input[type="range"] {
  flex: 1;
}

.configuratore__slider-riga output {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: nowrap;
  min-width: 6.5em;
  text-align: right;
}

.configuratore__totale {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--bordo);
}

.configuratore__totale-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--testo-mite);
}

.configuratore__totale-cifra {
  font-family: var(--font-mono);
  font-size: var(--font-cifra-totale);
  font-weight: 700;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.configuratore__totale-nota {
  font-size: 0.8rem;
  color: var(--testo-mite);
}

/* ---------- 10. Portfolio ---------- */

.portfolio__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.filtro {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: var(--bg);
  color: var(--testo);
  font-size: 0.9rem;
}

.filtro.is-attivo {
  background: var(--gradiente);
  border-color: transparent;
  color: #0b0d14;
  font-weight: 600;
}

:root[data-theme="light"] .filtro.is-attivo {
  color: #ffffff;
}

.portfolio__griglia {
  display: grid;
  gap: var(--spazio-griglia);
  grid-template-columns: 1fr;
}

/* La card è essa stessa la colonna: il testo non ha bisogno di un
   contenitore, basta rientrarlo rispetto al media a tutta larghezza */
.progetto {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

.progetto.is-nascosto {
  display: none;
}

/* Cover dei progetti reali: gradiente e iniziali sono uno pseudo-elemento
   della card stessa — decorazione a costo zero di DOM, niente immagini */
.progetto[data-iniziali]::before {
  content: attr(data-iniziali);
  content: attr(data-iniziali) / "";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--cover, var(--gradiente));
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.progetto--cover-1 { --cover: linear-gradient(135deg, #4c2ba0, #8e5bd9); }
.progetto--cover-2 { --cover: linear-gradient(135deg, #0e6f63, #2cc8b2); }
.progetto--cover-3 { --cover: linear-gradient(135deg, #303a8f, #5a6bdc); }
.progetto--cover-4 { --cover: linear-gradient(135deg, #8a2f6b, #d05aa8); }

/* Video di esempio: stessa area 16:9 delle cover */
.progetto__media {
  margin: 0;
}

.progetto__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.progetto__titolo,
.progetto__descrizione,
.progetto__categoria {
  padding-inline: 1.4rem;
}

.progetto__titolo {
  padding-top: 1.25rem;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.progetto__descrizione {
  color: var(--testo-mite);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.progetto__categoria {
  padding-bottom: 1.4rem;
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--turchese);
}

.progetto__categoria::before {
  content: "# ";
  content: "# " / "";
  opacity: 0.6;
}

/* --- Esempi animati: bottone "guarda in grande" sopra il video --- */

.progetto__media {
  position: relative;
}

/* Il bottone esiste solo se il JS può davvero aprire l'anteprima:
   senza JavaScript resta il video in loop, senza affordance bugiarde */
.progetto__zoom {
  display: none;
}

:root.js-attivo .progetto__zoom {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--testo);
}

/* Velo scuro su tutto il video: compare solo al passaggio del mouse */
.progetto__zoom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.progetto__zoom:hover::before,
.progetto__zoom:focus-visible::before {
  opacity: 1;
}

/* L'icona resta sempre visibile: su touch non esiste l'hover,
   e senza un segno fisso nessuno saprebbe che il video si apre */
.progetto__zoom-icona {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.95rem;
  line-height: 1;
}

.progetto__zoom-testo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  scale: 0.94;
  transition: opacity 0.25s ease, scale 0.25s ease;
}

.progetto__zoom:hover .progetto__zoom-testo,
.progetto__zoom:focus-visible .progetto__zoom-testo {
  opacity: 1;
  scale: 1;
}

/* ---------- 10-bis. Anteprima ingrandita degli esempi (<dialog>) ---------- */

.lightbox {
  width: min(96vw, 68rem);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--surface);
  color: var(--testo);
  box-shadow: var(--ombra);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Lo sfondo del dialogo nativo: un pseudo-elemento, non un div in più */
.lightbox::backdrop {
  background: rgba(3, 5, 12, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Un solo <figure>: il video è il contenuto, <figcaption> la descrizione.
   Nessun div di impaginazione dentro al dialogo. */
.lightbox__figura {
  margin: 0;
  position: relative;
}

.lightbox__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Le bande del letterbox sono nere quanto il video: lo sfondo sta
     sull'elemento stesso, non su un contenitore */
  background: #000;
  /* contain e non cover: ingrandito il video va visto tutto, non ritagliato */
  object-fit: contain;
}

.lightbox__chiudi {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--testo);
  font-size: 1.05rem;
  line-height: 1;
}

.lightbox__chiudi:hover {
  border-color: var(--viola);
}

.lightbox__testo {
  padding: 1.4rem var(--gutter) 1.6rem;
}

.lightbox__titolo {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

.lightbox__descrizione {
  color: var(--testo-mite);
  max-width: 46rem;
  margin-bottom: 0.6rem;
}

.lightbox__categoria {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--turchese);
}

.lightbox__categoria::before {
  content: "# ";
  content: "# " / "";
  opacity: 0.6;
}

/* ---------- 11. Carousel testimonianze ---------- */

/* Stato "in attesa delle prime recensioni": visibile finché
   l'array RECENSIONI in script.js resta vuoto */
.testimonianze__vuoto {
  max-width: 46rem;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.testimonianze__vuoto-nota {
  color: var(--testo-mite);
  font-style: italic;
}

.carousel {
  max-width: 46rem;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--raggio);
}

.carousel__track {
  display: flex;
  /* Lo scorrimento è un translateX scritto da script.js: solo transform */
  transition: transform 0.5s ease;
}

.carousel__slide {
  flex: 0 0 100%;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.carousel__slide blockquote {
  margin: 0;
}

.carousel__slide p {
  font-size: 1.05rem;
}

.carousel__slide footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.carousel__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}

.carousel__avatar--1 { background: linear-gradient(135deg, #6d3ee0, #9d6bff); }
.carousel__avatar--2 { background: linear-gradient(135deg, #0e6f63, #30e0c8); }
.carousel__avatar--3 { background: linear-gradient(135deg, #8a2f6b, #d05aa8); }

.carousel__slide cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--testo-mite);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--testo-mite);
  background: transparent;
}

.carousel__dot.is-attivo {
  background: var(--gradiente);
  border-color: transparent;
}

/* ---------- 11-bis. Recensioni: bottone, form e stelle ---------- */

.recensione {
  max-width: 46rem;
  margin-top: 2rem;
}

.recensione__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.recensione__garanzia {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--testo-mite);
}

.campo small {
  font-weight: 400;
  color: var(--testo-mite);
}

/* Il reset dà ai fieldset un margine in basso: qui lo gestisce il gap */
.stelle {
  margin: 0;
}

.stelle legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.stelle__gruppo {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.stelle__voce {
  position: relative;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--bordo);
  cursor: pointer;
}

/* Il radio copre la stella ma resta invisibile: il click è suo */
.stelle__voce input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Si accendono la stella scelta e tutte quelle che la precedono */
.stelle__voce:has(input:checked),
.stelle__voce:has(~ .stelle__voce input:checked) {
  color: var(--stella);
}

/* Anteprima col mouse: spegne la selezione e illumina fino a dove punti */
.stelle__gruppo:hover .stelle__voce {
  color: var(--bordo);
}

.stelle__gruppo .stelle__voce:hover,
.stelle__gruppo .stelle__voce:has(~ .stelle__voce:hover) {
  color: var(--stella);
}

/* L'input è trasparente: il focus da tastiera va disegnato sulla label */
.stelle__voce:has(input:focus-visible) {
  outline: 3px solid var(--turchese);
  outline-offset: 2px;
  border-radius: 4px;
}

.stelle.is-errore .stelle__voce {
  color: #ff7d94;
}

/* Voto mostrato dentro la slide del carosello */
.carousel__voto {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--stella);
}

/* ---------- 12. Form contatti ---------- */

.form-contatti {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Una riga di form è un <p>: elemento di flusso, non un div generico
   (è la struttura che usa la stessa specifica HTML per i moduli) */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.campo label {
  font-weight: 600;
  font-size: 0.95rem;
}

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  color: var(--testo);
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 10px;
}

.campo textarea {
  resize: vertical;
}

/* Stati di validazione applicati da script.js */
.campo.is-errore input,
.campo.is-errore select,
.campo.is-errore textarea {
  border-color: #ff7d94;
}

.campo.is-valido input,
.campo.is-valido select,
.campo.is-valido textarea {
  border-color: var(--turchese);
}

.campo__errore {
  display: block;
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: #ff9dae; /* contrasto AA su fondo scuro */
}

:root[data-theme="light"] .campo__errore {
  color: #b3123a; /* variante scura per il tema chiaro */
}

.form-contatti__invia {
  align-self: flex-start;
}

.form-contatti__successo {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--turchese);
  background: color-mix(in srgb, var(--turchese) 12%, var(--bg));
  color: var(--testo);
}

.form-contatti__privacy {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--testo-mite);
}

/* Consenso alla pubblicazione della recensione: due colonne (casella,
   testo) e l'errore che le attraversa entrambe. Griglia sulla riga
   stessa: nessun contenitore in più per allineare la spunta. */
.campo--consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.35rem 0.6rem;
}

.campo--consenso input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--viola);
}

.campo--consenso label {
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--testo-mite);
}

.campo--consenso .campo__errore {
  grid-column: 1 / -1;
  min-height: 0;
}

.campo--consenso.is-errore input {
  outline: 2px solid #ff9dae;
  outline-offset: 2px;
}

:root[data-theme="light"] .campo--consenso.is-errore input {
  outline-color: #b3123a;
}

/* Errore di invio: stessa forma del successo, colore del set di errore */
.form-contatti__errore-invio {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid #ff7d94;
  background: color-mix(in srgb, #ff7d94 12%, var(--bg));
  color: var(--testo);
}

/* ---------- 13. CTA finale ---------- */

.cta-finale {
  padding-block: var(--spazio-sezione);
  background: var(--gradiente);
  color: #0b0d14;
  text-align: center;
}

:root[data-theme="light"] .cta-finale {
  color: #ffffff;
}

.cta-finale h2 {
  font-size: var(--font-titolo-sezione);
  font-weight: 800;
}

.cta-finale p {
  max-width: 34rem;
  margin-inline: auto;
}

.cta-finale__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-block: 1.5rem 1rem;
}

.cta-finale__nota {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0;
}

/* ---------- 14. Footer ---------- */

.footer {
  padding: 3rem 0 1.5rem;
  background: var(--bg);
  border-top: 1px solid var(--bordo);
}

.footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}

.footer__logo {
  font-weight: 800;
  font-size: 1.3rem;
}

.footer__logo span {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--testo-mite);
}

.footer__col h3::before {
  content: "~/";
  content: "~/" / "";
  opacity: 0.6;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer__col a {
  color: var(--testo);
  text-decoration: none;
}

.footer__col a:hover {
  color: var(--turchese);
}

.footer__col p,
.footer__col li {
  color: var(--testo-mite);
  font-size: 0.95rem;
}

.footer__copyright {
  text-align: center;
  font-size: 0.85rem;
  color: var(--testo-mite);
  border-top: 1px solid var(--bordo);
  padding-top: 1.5rem;
  margin: 0;
}

.footer__legale {
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--testo-mite);
  max-width: 52rem;
  margin: 0.9rem auto 0;
}

/* ---------- 15. Cursore personalizzato (attivato via JS solo su desktop) ---------- */

.cursore {
  display: none; /* script.js lo attiva solo con hover reale + puntatore fine */
}

/* Con la classe sul root (messa da script.js) il cursore custom appare
   e quello nativo sparisce. Mai attivo su touch o con animazioni ridotte. */
:root.cursore-attivo body {
  cursor: none;
}

:root.cursore-attivo a,
:root.cursore-attivo button,
:root.cursore-attivo input,
:root.cursore-attivo select,
:root.cursore-attivo textarea,
:root.cursore-attivo label {
  cursor: none;
}

:root.cursore-attivo .cursore {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none; /* mai intercettare i click */
}

/* Puntino e anello sono pseudo-elementi: un solo nodo nel DOM per tutto
   il cursore. script.js aggiorna quattro variabili CSS (--x/--y per il
   puntino, --rx/--ry per l'anello) e il compositor fa il resto. */
.cursore::before,
.cursore::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
}

.cursore::before {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--turchese);
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0);
}

.cursore::after {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--viola);
  opacity: 0.7;
  transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0);
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease, opacity 0.2s ease;
}

/* Sopra un elemento interattivo l'anello si allarga e si accende */
.cursore.is-su-interattivo::after {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  opacity: 1;
}

/* ---------- 16. Pagine legali (privacy) ---------- */

.pagina-legale h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
}

/* Il reset toglie i punti elenco a tutte le ul: in un testo lungo servono */
.pagina-legale ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 1em;
}

.pagina-legale li {
  margin-bottom: 0.5rem;
}

.pagina-legale code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.pagina-legale__ritorno {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
}

/* ============================================================
   ANIMAZIONI
   Solo transform e opacity (mai proprietà che causano reflow).
   Tutte disattivate o ridotte con prefers-reduced-motion in coda.
   ============================================================ */

/* --- Typing: caret che lampeggia --- */
@keyframes lampeggio-caret {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
}

.hero__caret {
  animation: lampeggio-caret 1.1s steps(1) infinite;
}

/* --- Card fluttuanti in hero: oscillazione lenta, solo transform --- */
@keyframes fluttua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero-card {
  animation: fluttua 6s ease-in-out infinite;
}

.hero-card--2 { animation-delay: -2s; animation-duration: 7s; }
.hero-card--3 { animation-delay: -4s; animation-duration: 8s; }

/* --- Scroll cue: la "rotellina" scende e svanisce --- */
@keyframes scorri-giu {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

.hero__scroll-cue::before {
  animation: scorri-giu 1.8s ease-in-out infinite;
}

/* --- Reveal on-scroll: gli elementi [data-reveal] partono nascosti
       SOLO se il JS è attivo (classe js-attivo sul root), così senza
       JavaScript la pagina resta completamente leggibile --- */
/* Nota: usiamo la proprietà individuale `translate` (non `transform`)
   così il reveal non entra in conflitto col tilt 3D, che usa `transform`
   sulla stessa card con specificità più bassa. */
:root.js-attivo [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.6s ease, translate 0.6s ease;
}

:root.js-attivo [data-reveal].is-visibile {
  opacity: 1;
  translate: 0 0;
}

/* Reveal a cascata: piccolo ritardo crescente tra card sorelle */
:root.js-attivo [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
:root.js-attivo [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
:root.js-attivo [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* --- Tilt 3D sulle card servizi ---
       La rotazione la calcola script.js scrivendo le variabili --tilt-x/--tilt-y;
       qui definiamo solo prospettiva e transizione di rientro. */
@media (hover: hover) and (pointer: fine) {
  .servizi__griglia {
    perspective: 900px;
  }

  .servizio-card {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.18s ease, border-color 0.18s ease;
    will-change: transform;
  }

  .servizio-card:hover {
    border-color: var(--viola);
  }
}

/* Su touch: micro-feedback al tap al posto del tilt */
@media (hover: none) {
  .servizio-card {
    transition: transform 0.15s ease;
  }

  .servizio-card:active {
    transform: scale(0.98);
  }
}

/* --- Transizioni leggere su elementi interattivi --- */
.btn,
.filtro,
.chip span,
.navbar__links a,
.theme-toggle__thumb,
.carousel__dot {
  transition: transform 0.2s ease, opacity 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primario:hover {
  opacity: 0.9;
}

/* --- Filtro portfolio: comparsa morbida dei progetti filtrati --- */
@keyframes progetto-appare {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.progetto.is-appena-mostrato {
  animation: progetto-appare 0.35s ease both;
}

/* --- Anteprima esempi: il riquadro entra in scala, lo sfondo sfuma --- */
@keyframes lightbox-entra {
  from { opacity: 0; scale: 0.97; }
  to   { opacity: 1; scale: 1; }
}

@keyframes lightbox-sfondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox[open] {
  animation: lightbox-entra 0.25s ease both;
}

.lightbox[open]::backdrop {
  animation: lightbox-sfondo 0.25s ease both;
}

/* --- Form: il messaggio d'errore scivola dentro con una piccola scossa --- */
@keyframes errore-entra {
  0%   { opacity: 0; transform: translateX(-6px); }
  40%  { opacity: 1; transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}

.campo.is-errore .campo__errore,
.stelle.is-errore .campo__errore {
  animation: errore-entra 0.3s ease both;
}

/* --- Form: comparsa del messaggio di successo --- */
@keyframes successo-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-contatti__successo:not([hidden]),
.form-contatti__errore-invio:not([hidden]) {
  animation: successo-entra 0.4s ease both;
}

/* ============================================================
   BREAKPOINT — mobile-first
   ============================================================ */

/* Gutter e respiro tra sezioni sono fluidi (clamp in :root):
   qui restano solo i cambi di layout veri e propri. */

/* ≥ 768px: tablet — navbar orizzontale, griglie a 2 colonne */
@media (min-width: 768px) {
  .navbar__hamburger {
    display: none;
  }

  .navbar__links {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-inline-start: auto;
    padding: 0;
    background: none;
    border: 0;
  }

  .theme-toggle {
    margin-inline-start: 1.5rem;
  }

  .servizi__griglia {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio__griglia {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__griglia {
    grid-template-columns: repeat(4, 1fr);
  }

  .configuratore {
    padding: 2.5rem;
  }
}

/* ≥ 1024px: desktop — card hero visibili, portfolio a 3 colonne */
@media (min-width: 1024px) {
  .hero-card {
    display: block;
  }

  .hero__title {
    max-width: 13em;
  }

  /* 4 card: a 3 colonne resterebbe una card orfana, meglio 2×2 */
  .portfolio__griglia {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ≥ 1440px: schermi larghi — servizi e portfolio su 4 colonne */
@media (min-width: 1440px) {
  .servizi__griglia {
    grid-template-columns: repeat(4, 1fr);
  }

  .portfolio__griglia {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   In coda al foglio così vince su tutte le regole precedenti:
   niente animazioni infinite, transizioni praticamente istantanee.
   Le parti gestite in JS (particelle, tilt, typing, carousel,
   cursore) controllano la stessa preferenza per conto proprio.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Gli elementi reveal restano sempre visibili */
  :root.js-attivo [data-reveal] {
    opacity: 1;
    translate: none;
  }
}

/* Scorrimento morbido sugli anchor link solo per chi non riduce le animazioni */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}