/* ---------- Effetti identitari (18 ottobre 2026), uguali in italiano e in inglese. Colori e caratteri: solo le variabili del sito;
   curva standard cubic-bezier(0.65, 0, 0.35, 1); solo transform, opacity, clip-path e stroke-dashoffset. ---------- */

/* ---------- 1. Transizione "piano di sezione" tra le pagine: View Transitions tra documenti (il sito è a pagine statiche).
   La pagina nuova entra tagliata da sinistra a destra, la vecchia resta e si scurisce appena; sul bordo del taglio corre una linea
   azzurra con il titolo della pagina d'arrivo (lo scrive lo script in testa alla pagina, da document.title: già nella lingua giusta).
   L'header, il pulsante e il simbolo non partecipano al taglio. Senza supporto la navigazione resta normale. ---------- */
@view-transition { navigation: auto; }
header.nav { view-transition-name: site-header; }
.xb-btn.xb-on { view-transition-name: site-header-btn; }   /* only when they show: hidden, they would be captured with their blur */
.xb-sym.xb-pieno { view-transition-name: site-header-sym; }
.vt-linea { position: fixed; z-index: 70; top: 0; left: 0; width: 2px; height: 100vh; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none; visibility: hidden; view-transition-name: section-line; }
html.vt-taglio .vt-linea { visibility: visible; }   /* only in the page that arrives, while the transition runs */
.vt-linea::after { content: var(--vt-titolo, ''); position: absolute; right: 12px; bottom: 28px; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; font-variant-caps: all-small-caps; color: var(--accent); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: 700ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-fill-mode: both; }
::view-transition-old(root) { animation-name: vt-scurisci; }
::view-transition-new(root) { animation-name: vt-taglio; }
@keyframes vt-scurisci { from { opacity: 1; } to { opacity: 0.85; } }
@keyframes vt-taglio { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-group(section-line) { animation: vt-linea 700ms cubic-bezier(0.65, 0, 0.35, 1) both; }
::view-transition-old(section-line) { display: none; }
::view-transition-new(section-line) { animation: none; }
/* stroke-dashoffset has no effect on the line: it keeps its animation on the main thread, like the clip of the page, so that the
   line stays on the edge of the cut (with the transform alone the line runs on the compositor, one frame ahead of the cut) */
@keyframes vt-linea { from { transform: translateX(0); stroke-dashoffset: 0; } to { transform: translateX(100vw); stroke-dashoffset: 1; } }
/* the header stands still, in the state of the page that arrives */
::view-transition-group(site-header), ::view-transition-group(site-header-btn), ::view-transition-group(site-header-sym) { animation: none; }
::view-transition-old(site-header), ::view-transition-old(site-header-btn), ::view-transition-old(site-header-sym) { display: none; }
::view-transition-new(site-header), ::view-transition-new(site-header-btn), ::view-transition-new(site-header-sym) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-fuori 150ms linear both; }
  ::view-transition-new(root) { animation: vt-dentro 150ms linear both; }
  .vt-linea { display: none; }
}
@keyframes vt-fuori { to { opacity: 0; } }
@keyframes vt-dentro { from { opacity: 0; } }
@media print { .vt-linea { display: none; } }

/* ---------- 2. Numeri quotati: sotto la cifra una linea di quota da 1 px azzurra, larga quanto la cifra più 16 px per lato, con
   richiami verticali di 10 px e tratti a 45 gradi di 8 px alle estremità; l'etichetta della cifra sotto la linea, al centro.
   Nell'HTML la quota è già disegnata; effetti.js la anima una volta, quando la cifra è visibile al 40 %, e fa contare la cifra in
   un elemento sovrapposto (aria-hidden) mentre il numero vero resta nel testo, visivamente nascosto. ---------- */
.quota { align-items: center; }
.quota-n { position: relative; display: inline-block; margin-bottom: 24px; }
.quota-l { position: absolute; left: -16px; right: -16px; top: calc(100% + 6px); height: 16px; pointer-events: none; }
.quota-h { position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: var(--accent); }
.quota-e { position: absolute; top: 0; left: -8px; width: 16px; height: 16px; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 1; }
.quota-e2 { left: auto; right: -8px; }
.quota-e path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.quota-c { display: inline-block; text-align: right; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* waiting to be seen (only with the script): line closed in its centre, extension lines and ticks not drawn */
.quota-js .quota-h { transform: scaleX(0); }
.quota-js .quota-e path { stroke-dashoffset: 1; }
.quota-js.quota-via .quota-h { transform: scaleX(1); transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1); }
.quota-js.quota-via .quota-e path { stroke-dashoffset: 0; transition: stroke-dashoffset 250ms cubic-bezier(0.65, 0, 0.35, 1) 600ms; }
/* reduced motion: no counting, the dimension already drawn, a fade of 150 ms */
.quota-rm .quota-l { opacity: 0; }
.quota-rm.quota-via .quota-l { opacity: 1; transition: opacity 150ms linear; }
/* the counter under the globe of Settori: label centred under the line, the line inside the page */
.globo-hud dl div.quota { display: inline-flex; justify-self: start; padding-left: 24px; }