/* ============================================================
   base.css — reset, tipografia di base, chrome del sito
   (testata, indice mobile, avviso bozza, colophon).
   Le composizioni di pagina vivono nei CSS dedicati per pagina.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink);
  background-color: var(--surface-base);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Libre Caslon Display: peso unico ad alto contrasto di aste */
  line-height: 1.08;
  letter-spacing: 0.005em;
}

a {
  color: var(--ink);
  text-decoration-color: var(--gold-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--dur-veloce) var(--ease-uscita),
              color var(--dur-veloce) var(--ease-uscita);
}
a:hover { text-decoration-thickness: 2px; color: var(--gold-deep); }

::selection { background-color: var(--gold-light); color: var(--ink-deep); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* ---------- Utilità di lettura ---------- */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salta-contenuto {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 60;
  padding: 0.75rem 1.25rem;
  background-color: var(--ink);
  color: var(--surface-base);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
}
.salta-contenuto:focus-visible { top: 0.5rem; color: var(--surface-base); }

/* ---------- Testata (chrome, uguale su ogni pagina) ---------- */
.testata-protocollo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem var(--gutter);
  background-color: var(--ink);
  color: var(--surface-base);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.testata-protocollo a {
  color: var(--gold-light);
  text-decoration: none;
  /* area di tocco ampliata senza ingrossare la fascia */
  padding: 0.95rem 0.35rem;
  margin: -0.75rem -0.1rem;
}
.testata-protocollo a:hover { color: var(--surface-base); text-decoration: underline; }
.testata-protocollo .protocollo-centro { display: none; }
@media (min-width: 760px) {
  .testata-protocollo .protocollo-centro { display: inline; }
}

.testata {
  border-bottom: var(--filetto-doppio);
  background-color: var(--surface-base);
}

.testata-corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
}

.testata-logo { display: inline-flex; flex-shrink: 0; }
.testata-logo img {
  width: auto;
  height: clamp(72px, 9vw, 104px);
}

.testata-nav { display: none; }
/* Con 8 voci e due tendine (di cui una lunga, "Area commerciale e condominiale")
   la barra desktop compare a >=1300px; sotto subentra l'indice a schermo intero.
   NOTA sul dimensionamento: .testata-corpo e' limitata a --page-max (1280px), quindi
   la larghezza utile per logo+nav resta ~1170px COSTANTE da 1300px fino a 1920px.
   Per questo font/gap/tracking sono FISSI (niente clamp su vw): un valore che cresce
   col viewport andrebbe in overflow a 1920 pur stando dentro al breakpoint. I valori
   qui sotto tengono le 8 voci su una riga sola con ~60px di margine. */
@media (min-width: 1300px) {
  .testata-nav { display: block; }
  /* il marchio si rimpicciolisce (altezza fissa) per lasciare respiro alle 8 voci */
  .testata-logo img { height: 58px; }
  .testata-nav ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .testata-nav a {
    display: inline-block;
    padding: 0.9rem 0.1rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink);
    border-top: 2px solid transparent;
    transition: border-color var(--dur-veloce) var(--ease-uscita),
                color var(--dur-veloce) var(--ease-uscita);
  }
  .testata-nav a:hover { color: var(--gold-deep); border-top-color: var(--gold-light); }
  .testata-nav a[aria-current="page"] { border-top-color: var(--gold-mid); color: var(--gold-deep); }
  /* sezione corrente: la voce-tendina padre resta evidenziata quando si e' su una
     sua sotto-pagina (l'aria-current="page" vive sulla sotto-voce esatta) */
  .testata-nav .nav-sezione-corrente > a { border-top-color: var(--gold-mid); color: var(--gold-deep); }
}

/* ---------- Tendina "Aree di competenza" (nav desktop) ---------- */
@media (min-width: 1300px) {
  .testata-nav .nav-tendina { position: relative; }
  /* freccetta a discesa accanto alla voce padre */
  .testata-nav .nav-tendina > a::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--dur-veloce) var(--ease-uscita);
  }
  .testata-nav .nav-tendina:hover > a::after,
  .testata-nav .nav-tendina:focus-within > a::after {
    transform: translateY(0.05em) rotate(45deg);
  }
  .testata-nav .nav-sottomenu {
    display: block;           /* vince su .testata-nav ul { display: flex } */
    position: absolute;
    top: 100%;
    left: -0.8rem;
    z-index: 60;
    min-width: 268px;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background-color: var(--surface-base);
    border: var(--filetto);
    box-shadow: 0 22px 46px -26px rgba(16, 27, 39, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-veloce) var(--ease-uscita),
                transform var(--dur-veloce) var(--ease-uscita),
                visibility 0s linear var(--dur-veloce);
  }
  .nav-tendina:hover .nav-sottomenu,
  .nav-tendina:focus-within .nav-sottomenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-veloce) var(--ease-entrata),
                transform var(--dur-veloce) var(--ease-entrata);
  }
  .nav-sottomenu li { display: block; }
  .nav-sottomenu li + li { border-top: 1px solid var(--surface-warm); }
  .nav-sottomenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 1.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    border-top: 0;
    white-space: nowrap;
    transition: background-color var(--dur-veloce) var(--ease-uscita),
                color var(--dur-veloce) var(--ease-uscita);
  }
  .nav-sottomenu a:hover,
  .nav-sottomenu a[aria-current="page"] {
    color: var(--gold-deep);
    background-color: rgba(184, 128, 72, 0.09);
    border-top-color: transparent;
  }
}

.apri-indice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1.1rem;
  background: none;
  border: var(--filetto-navy);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-veloce) var(--ease-uscita),
              color var(--dur-veloce) var(--ease-uscita);
}
.apri-indice:hover { background-color: var(--ink); color: var(--surface-base); }
@media (min-width: 1300px) {
  .apri-indice { display: none; }
}

/* ---------- Indice a schermo intero (menu mobile) ---------- */
.indice-sito {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background-color: var(--ink-deep);
  color: var(--surface-base);
  padding: 1rem var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  /* uscita: easing diverso dall'entrata */
  transition: opacity var(--dur-base) var(--ease-entrata),
              visibility 0s linear var(--dur-base);
}
.indice-sito.aperto {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-uscita);
}

.indice-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gold-deep);
}
.indice-titolo {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.chiudi-indice {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid var(--gold-mid);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--surface-base);
  cursor: pointer;
}
.chiudi-indice:hover { background-color: var(--gold-deep); }

.indice-sito ol {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.indice-sito li + li { border-top: 1px solid rgba(184, 128, 72, 0.35); }
.indice-sito ol a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.9rem 0.25rem;
  min-height: 44px;
  color: var(--surface-base);
  text-decoration: none;
}
.indice-sito ol a:hover .indice-voce,
.indice-sito ol a[aria-current="page"] .indice-voce,
.indice-sito ol a.indice-corrente .indice-voce { color: var(--gold-light); }
/* sotto-voci Aree nell'overlay indice */
.indice-sub {
  list-style: none;
  margin: 0.3rem 0 0.7rem 3.45rem;
  padding: 0;
}
.indice-sito .indice-sub li + li { border-top: 0; }
.indice-sito .indice-sub a {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: rgba(250, 242, 234, 0.72);
}
.indice-sito .indice-sub a::before { content: "— "; color: var(--gold-mid); }
.indice-sito .indice-sub a:hover,
.indice-sito .indice-sub a[aria-current="page"],
.indice-sito .indice-sub a.indice-corrente { color: var(--gold-light); }

.indice-numero {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gold-mid);
  min-width: 2.2rem;
}
.indice-voce {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  line-height: 1.15;
  transition: color var(--dur-veloce) var(--ease-uscita);
}
.indice-recapito {
  margin-top: auto;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--gold-light);
}
.indice-recapito a { color: var(--surface-base); }
.indice-recapito a:hover { color: var(--gold-light); }

body.indice-aperto { overflow: hidden; }

/* ---------- Folio di pagina (apertura del "documento") ---------- */
.doc-folio {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.doc-folio span:last-child { display: none; text-align: right; }
@media (min-width: 700px) {
  .doc-folio span:last-child { display: inline; }
}

/* ---------- Colophon (piè di pagina) ---------- */
.colophon {
  background-color: var(--ink-deep);
  color: var(--surface-base);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
}
.colophon a { color: var(--surface-base); text-decoration-color: var(--gold-mid); }
.colophon a:hover { color: var(--gold-light); }

.colophon-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: var(--page-max);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .colophon-griglia { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 3rem; }
}

.colophon-marchio img { width: 132px; }
.colophon-motto {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.colophon-orari {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--surface-alt);
}

/* Indice delle aree nel colophon (colonna dedicata) */
.colophon-aree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.colophon-aree li { padding: 0.28rem 0; }
.colophon-aree a {
  font-size: 0.9rem;
  text-decoration-color: transparent;
}
.colophon-aree a:hover { text-decoration-color: var(--gold-mid); }

.colophon-voce {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.8rem;
}
.colophon p { font-size: 0.95rem; line-height: 1.7; }
.colophon-nota { margin-top: 1rem; color: var(--gold-light); font-size: 0.88rem; }

/* Disclaimer YMYL + nota anteprima, sopra la riga di chiusura */
.colophon-legale {
  max-width: var(--page-max);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gold-deep);
}
.colophon-professionale p {
  max-width: 78ch;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--gold-faint);
}
.colophon-professionale strong { color: var(--surface-base); font-weight: 600; }
/* Ogni professionista porta i propri estremi fiscali: P.IVA e C.F. sono
   personali, non dello Studio (che non è un soggetto fiscale autonomo). */
.colophon-prof + .colophon-prof { margin-top: 1rem; }
.da-confermare {
  font-style: italic;
  text-decoration: underline dotted var(--gold-mid);
  text-underline-offset: 2px;
}
.colophon-piva {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--gold-light);
}
.colophon-link-legali {
  margin-top: 0.6rem;
  font-size: 0.82rem;
}
.colophon-professionale + .colophon-link-legali { margin-top: 1.3rem; }
.colophon-link-legali a { text-decoration-color: var(--gold-mid); }
.colophon-link-legali span { color: var(--gold-faint); margin: 0 0.35em; }
.colophon-disclaimer {
  max-width: 78ch;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--gold-faint);
}
.colophon-credit {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-mid);
}
.colophon-credit a { text-decoration-color: var(--gold-mid); }
.colophon-credit a:hover { color: var(--gold-light); }

.colophon-fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: var(--page-max);
  margin: 1.75rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ---------- Rimando editoriale (richiamo da atto, non bottone) ---------- */
/* Doppio filetto in background: la riga sottile è sempre presente
   (affordance), quella piena si DISEGNA da sinistra all'hover. */
.rimando {
  --rimando-riga:  var(--gold-mid);
  --rimando-pieno: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background-image:
    linear-gradient(var(--rimando-pieno), var(--rimando-pieno)),
    linear-gradient(var(--rimando-riga), var(--rimando-riga));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 3px, 100% 1px;
  transition: background-size var(--dur-base) var(--ease-uscita),
              color var(--dur-veloce) var(--ease-uscita);
}
.rimando:hover {
  color: var(--gold-deep);
  background-size: 100% 3px, 100% 1px;
}
.rimando--chiaro {
  --rimando-riga:  var(--gold-light);
  --rimando-pieno: var(--gold-light);
  color: var(--surface-base);
}
.rimando--chiaro:hover { color: var(--gold-light); }
/* feedback al tocco: pressione breve, la riga oro si completa */
@media (hover: none) {
  .rimando {
    transition: background-size var(--dur-base) var(--ease-uscita),
                color var(--dur-veloce) var(--ease-uscita),
                transform 120ms var(--ease-uscita);
  }
  .rimando:active {
    color: var(--gold-deep);
    background-size: 100% 3px, 100% 1px;
    transform: translateY(1px) scale(0.985);
  }
  .rimando--chiaro:active { color: var(--gold-light); }
}
@media (prefers-reduced-motion: reduce) {
  .rimando { transition: color var(--dur-veloce) var(--ease-uscita); }
  .rimando:active { transform: none; }
}

/* ============================================================
   Sistema di motion — regia "editoriale sofisticato".
   OGNI stato nascosto è gated su `html.anima`, classe aggiunta
   solo da motion.js: senza JS nulla è mai invisibile. Il blocco
   prefers-reduced-motion in coda spegne TUTTO il sistema.
   ============================================================ */

/* ---------- Comparsa in scroll (primitiva base) ---------- */
html.anima .comparsa {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms var(--ease-editoriale),
              transform 300ms var(--ease-editoriale);
  transition-delay: calc(var(--ordine, 0) * 70ms);
}
html.anima .comparsa.in-vista {
  opacity: 1;
  transform: none;
}

/* ---------- Titoli composti parola per parola ---------- */
/* .parola = maschera (overflow clip con compenso per i discendenti),
   .parola-int = la parola che risale dentro la maschera. */
html.anima .parola {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.06em 0.16em;
  margin: -0.08em -0.06em -0.16em;
}
html.anima .parola-int {
  display: inline-block;
  transform: translateY(120%);
  transition: transform var(--dur-lenta) var(--ease-editoriale);
  transition-delay: calc(var(--p, 0) * 55ms);
}
html.anima [data-riga].in-vista .parola-int { transform: none; }

/* ---------- Svelamento fotografie (clip sull'img, MAI sul wrapper) ---------- */
html.anima .svela-foto img {
  clip-path: inset(0 0 100% 0);           /* sipario: si apre verso il basso */
  transform: scale(1.045);
  transition: clip-path var(--dur-lenta) var(--ease-editoriale),
              transform 900ms var(--ease-editoriale);
}
html.anima .svela-foto--sinistra img { clip-path: inset(0 100% 0 0); }
html.anima .svela-foto--basso img    { clip-path: inset(100% 0 0 0); }
html.anima .svela-foto.in-vista img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* variante con parallax: l'img resta leggermente sovradimensionata
   perché la corsa di ±16px del .quadro non scopra mai i bordi */
html.anima .svela-foto--parallasse img { transform: scale(1.07); }
html.anima .svela-foto--parallasse.in-vista img { transform: scale(1.07); }

/* il wrapper .quadro riceve il transform del parallax via JS */
.quadro { display: block; overflow: hidden; }

/* ---------- Tracciato dei filetti oro ---------- */
/* Il bordo statico resta nel CSS di pagina (fallback no-JS); sotto
   html.anima diventa trasparente e lo ::after lo ridisegna in scroll.
   Sempre position:absolute (le pseudo di un grid container non devono
   diventare grid item). */
.traccia, .traccia-sotto, .traccia-vert { --linea-colore: var(--gold-light); }
/* :where a specificità zero: NON deve vincere sugli elementi sticky
   (che essendo posizionati ancorano comunque lo ::after assoluto) */
:where(html.anima) :where(.traccia, .traccia-sotto, .traccia-vert) { position: relative; }

html.anima .traccia { border-top-color: transparent !important; }
html.anima .traccia::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background-color: var(--linea-colore);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-lenta) var(--ease-editoriale);
  transition-delay: calc(var(--ordine, 0) * 70ms);
}
html.anima .traccia--forte { --linea-colore: var(--gold-mid); }
html.anima .traccia--forte::after { top: -2px; height: 2px; }
html.anima .traccia.in-vista::after { transform: scaleX(1); }

html.anima .traccia-sotto { border-bottom-color: transparent !important; }
html.anima .traccia-sotto::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background-color: var(--linea-colore);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-lenta) var(--ease-editoriale);
  transition-delay: calc(var(--ordine, 0) * 70ms);
}
html.anima .traccia-sotto.in-vista::after { transform: scaleX(1); }

html.anima .traccia-vert { border-left-color: transparent !important; }
html.anima .traccia-vert::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background-color: var(--gold-mid);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-lenta) var(--ease-editoriale);
}
html.anima .traccia-vert--spessa::after { width: 3px; }
html.anima .traccia-vert.in-vista::after { transform: scaleY(1); }

/* ---------- Occhielli: wipe laterale (clip, niente reflow) ---------- */
html.anima .occhiello-anima {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-lenta) var(--ease-editoriale);
}
html.anima .occhiello-anima.in-vista { clip-path: inset(0 -2% 0 0); }

/* ---------- Stagger di elenchi ([data-fila]) ---------- */
html.anima [data-fila] > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms var(--ease-editoriale),
              transform 300ms var(--ease-editoriale);
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
html.anima [data-fila].in-vista > * {
  opacity: 1;
  transform: none;
}

/* ---------- Primitive v2 (2026-07-24) ---------- */

/* Timbro: entrata "timbrata" per filigrane e box di chiusura */
html.anima .timbro {
  opacity: 0;
  transform: scale(1.12) rotate(-1.5deg);
  transition: opacity 320ms var(--ease-editoriale),
              transform var(--dur-lenta) var(--ease-editoriale);
  transition-delay: calc(var(--ordine, 0) * 70ms);
}
html.anima .timbro.in-vista {
  opacity: 1;
  transform: none;
}

/* Numeri che si disegnano: <svg><text> creato da motion.js dentro
   [data-disegno]; il tratto oro si completa, poi affiora il pieno.
   Senza JS il numerale resta testo normale (nessuno stato nascosto). */
.numero-disegno { display: inline-block; overflow: visible; }
.numero-disegno text { fill: currentColor; }
html.anima [data-disegno] .numero-disegno text {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 0.045em;
  stroke-dasharray: var(--tratto, none);
  stroke-dashoffset: var(--tratto, 0);
  transition: stroke-dashoffset 900ms var(--ease-editoriale),
              fill 420ms var(--ease-editoriale) 640ms;
}
html.anima [data-disegno].in-vista .numero-disegno text {
  stroke-dashoffset: 0;
  fill: currentColor;
}

/* Onda di tocco (tap-ripple): creata da motion.js su pointerdown
   touch, dal punto di pressione; si dissolve e viene rimossa. */
.tap-scena { position: relative; overflow: hidden; }
html.anima .tap-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(184, 128, 72, 0.16) 0%,
    rgba(184, 128, 72, 0.10) 45%,
    rgba(184, 128, 72, 0) 72%);
  transform: scale(0);
  animation: tap-ripple 450ms var(--ease-uscita) forwards;
}
@keyframes tap-ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(1); opacity: 0; }
}

/* ---------- Interruttore generale reduced-motion ---------- */
/* motion.js non parte affatto con reduced-motion (quindi html.anima
   non c'è); questo blocco è la seconda cintura di sicurezza. */
@media (prefers-reduced-motion: reduce) {
  html.anima .comparsa,
  html.anima .parola-int,
  html.anima .svela-foto img,
  html.anima .svela-foto--parallasse img,
  html.anima .traccia::after,
  html.anima .traccia-sotto::after,
  html.anima .traccia-vert::after,
  html.anima .occhiello-anima,
  html.anima .timbro,
  html.anima [data-fila] > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  html.anima [data-disegno] .numero-disegno text {
    fill: currentColor;
    stroke-dashoffset: 0;
    transition: none;
  }
  html.anima .tap-ripple { animation: none; opacity: 0; }
}