/* ==========================================================================
   LAYER "FLOW" — grafica e animazione
   Fluido WebGL (inchiostro nei colori Wenexia), scrim radiale, vetro, pillole
   bianche, Onest 400/500, comparsa parola per parola, griglia rem adattiva.
   Caricato dopo app.css: sovrascrive solo l'aspetto, non la struttura.
   ========================================================================== */
:root {
  --hero-base: #04050c;
  --heading: #eef0f6;
  --body-muted: #b9becf;
  --on-media: #ffffff;
  --action-inverse: #ffffff;
  --action-inverse-fg: #2f2f33;
  --glass-fill: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.16);
  --scrim: rgba(4,5,12,0.46);
  --scrim-strong: rgba(4,5,12,0.68);
  --scrim-soft: rgba(4,5,12,0.12);
  --duration-fast: 150ms;
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --bg: #04050c;
  --text: var(--heading);
  --text-2: #d3d6e2;
  --muted: var(--body-muted);
  --border: rgba(255,255,255,0.10);
  --border-2: var(--glass-border);
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Onest", ui-sans-serif, system-ui, sans-serif;
}
* { margin: 0; }
body { background: var(--hero-base); color: var(--heading); font-family: var(--font); }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: .4em; }
p { margin-bottom: 1em; }
.kpi-value, .hero-stats div strong, .error-code { font-weight: 500; }

/* Griglia rem adattiva (pagine pubbliche: il layout scala con il viewport) */
html:has(body.public) { font-size: 16px; }
@media (max-width: 1920px) { html:has(body.public) { font-size: 0.833333vw; } }
@media (max-width: 1440px) { html:has(body.public) { font-size: 1.111111vw; } }
@media (max-width: 1024px) { html:has(body.public) { font-size: 1.5625vw; } }
@media (max-width: 640px)  { html:has(body.public) { font-size: 4.444444vw; } }

/* Fondale: fluido WebGL + scrim */
#fluid { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: -3; pointer-events: none; display: block; background: var(--hero-base); }
#aurora { display: none; }
html.no-webgl #aurora { display: block; }
html.no-webgl #fluid { display: none; }
.fluid-scrim { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 46%, var(--scrim-strong) 0%, var(--scrim-strong) 24%, var(--scrim) 52%, var(--scrim-soft) 100%); }
.app .fluid-scrim { background: radial-gradient(120% 100% at 55% 40%, rgba(4,5,12,.82) 0%, rgba(4,5,12,.76) 45%, rgba(4,5,12,.62) 100%); }
.cursor-glow { display: none; }
.grain { opacity: .045; }

/* Vetro */
.card, .kpi, .list-item, .shortcut, .how-step, .svc, .kan-col, .table-wrap, details.faq, .check, .radio-card .rc, .tabs, .copy-field, .chip, .sidebar-foot, .quiz-q {
  background: var(--glass-fill); border-color: var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.glass-card { background: rgba(10,12,22,.55); border-color: var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sidebar { background: rgba(4,5,12,.55); border-right-color: var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.topbar { background: rgba(4,5,12,.35); border-bottom-color: var(--glass-border); }
.hero-panel { background: radial-gradient(120% 140% at 0% 0%, rgba(0,180,217,.16), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(155,88,148,.2), transparent 55%), var(--glass-fill); border-color: var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.global-search { border-radius: 9999px; background: var(--glass-fill); border-color: var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], input[type=month], select, textarea { background: rgba(255,255,255,.06); border-color: var(--glass-border); }

/* Pillole: tutti i pulsanti sono pill; il primario è la pillola bianca */
.btn { border-radius: 9999px; font-weight: 500; background: var(--glass-fill); border-color: var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background var(--duration-fast) var(--ease-entrance), border-color var(--duration-fast) var(--ease-entrance), color var(--duration-fast) var(--ease-entrance), transform .35s var(--ease-entrance), box-shadow .35s var(--ease-entrance); }
.btn-sm, .btn-lg { border-radius: 9999px; }
.btn-primary, .btn-white { background: var(--action-inverse); color: var(--action-inverse-fg); border-color: transparent; animation: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn-primary::after { display: none; }
.btn-primary:hover, .btn-white:hover { background: rgba(255,255,255,0.85); color: var(--action-inverse-fg); box-shadow: 0 10px 40px -14px rgba(255,255,255,.55); }
.btn-primary:focus-visible, .btn-white:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.btn-primary.is-loading::before { border-color: rgba(0,0,0,.2); border-top-color: #2f2f33; }
.icon-btn { border-radius: 9999px; background: var(--glass-fill); border-color: var(--glass-border); }
.nav-item { border-radius: 9999px; }
.nav-item.is-active { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px var(--glass-border); }
.nav-item.is-active::before { display: none; }
.nav-count { background: #fff; color: #2f2f33; }
.bb-plus { background: #fff; color: #2f2f33; box-shadow: 0 10px 30px -6px rgba(255,255,255,.45), 0 0 0 5px var(--hero-base); }
.bottombar { background: rgba(4,5,12,.6); border-color: var(--glass-border); }
.sidebar-cta, .sidebar-cta:hover { color: var(--action-inverse-fg); }
.tabs a, .tabs button { border-radius: 9999px; }
.tabs { border-radius: 9999px; }

/* Comparsa parola per parola + blocchi a tempo */
.w { display: inline-block; will-change: transform, opacity; }
.js [data-words] .w { opacity: 0; transform: translateY(var(--wy, 26px));
  transition: opacity var(--wd, 720ms) var(--ease-out-cubic), transform var(--wd, 720ms) var(--ease-out-cubic); transition-delay: var(--wdelay, 0ms); }
.js [data-words].words-in .w { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(var(--ry, 1.25rem));
  transition: opacity 700ms var(--ease-entrance), transform 700ms var(--ease-entrance); transition-delay: var(--rdelay, 0ms); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-words] .w, .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- Hero immersivo (home, landing Point) ---------- */
.fs-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100lvh; width: 100%; overflow: hidden; text-align: center; padding: 0 1.25rem; }
.fs-nav { position: absolute; inset-inline: 0; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; }
.fs-brand { display: flex; align-items: center; gap: .6rem; color: var(--on-media); }
.fs-brand img { height: 1.9rem; width: auto; }
.fs-brand .brand-point { font-size: .62rem; }
.fs-links { display: none; position: absolute; left: 50%; transform: translateX(-50%); height: 3rem; align-items: center; gap: 2.25rem; border-radius: 9999px; border: 1px solid var(--glass-border); background: var(--glass-fill); padding: 0 1.75rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fs-links a { font-size: .95rem; color: var(--body-muted); white-space: nowrap; transition: color var(--duration-fast) var(--ease-entrance); }
.fs-links a:hover { color: var(--heading); }
.fs-pill { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.5rem; border-radius: 9999px; background: var(--action-inverse); padding: 0 1.125rem; font: 500 .85rem/1 var(--font); color: var(--action-inverse-fg); border: 0; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background var(--duration-fast) var(--ease-entrance); }
.fs-pill:hover { background: rgba(255,255,255,0.85); color: var(--action-inverse-fg); }
.fs-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.fs-pill .ico { width: 1rem; height: 1rem; }
.fs-pill.ghost { background: var(--glass-fill); color: var(--heading); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fs-pill.ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.fs-col { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 22rem; }
.fs-badge { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1px solid var(--glass-border); background: var(--glass-fill); padding: .4rem .875rem; font-size: .72rem; color: var(--body-muted); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: 0; }
.fs-badge .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 .6rem var(--cyan); }
.fs-badge strong { color: var(--heading); font-weight: 500; }
.fs-h1 { margin: 1.25rem 0 0; max-width: 20rem; font-size: 2rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--heading); text-align: center; }
.fs-h1 .grad-text { background-image: linear-gradient(120deg, #3fd6f2, #8c9cf0 45%, #d08acb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fs-sub { margin: 1rem 0 0; max-width: 20rem; font-size: 1rem; line-height: 1.5; color: var(--body-muted); }
.fs-form { margin-top: 1.75rem; display: flex; justify-content: center; width: 100%; }
.fs-form form { width: 37rem; max-width: 100%; }
.fs-bar { display: flex; align-items: center; height: 3.5rem; border-radius: 9999px; border: 1px solid var(--glass-border); background: var(--glass-fill); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.05); padding-left: 1.25rem; padding-right: .35rem; gap: .5rem; transition: border-color var(--duration-fast) var(--ease-entrance); }
.fs-bar input, .fs-bar input:focus, .fs-bar input:hover { flex: 1; min-width: 0; height: 100%; min-height: 0; background: transparent; border: 0; box-shadow: none; outline: none; padding: 0; color: var(--heading); font-size: .95rem; border-radius: 0; }
.fs-bar input::placeholder { color: var(--body-muted); }
.fs-bar:focus-within { border-color: rgba(255,255,255,.34); }
.fs-hint { margin: .75rem 0 0; font-size: .72rem; color: var(--body-muted); }
.fs-hint a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.fs-stats { display: flex; gap: 2.5rem; justify-content: center; margin-top: 2rem; }
.fs-stats strong { display: block; font-size: 1.6rem; font-weight: 500; color: var(--heading); letter-spacing: -.02em; }
.fs-stats span { font-size: .72rem; color: var(--body-muted); }
.fs-foot { position: absolute; inset-inline: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 1.25rem; font-size: .72rem; color: var(--body-muted); }
.fs-foot a { color: var(--body-muted); }
.fs-foot a:hover { color: var(--heading); }
@media (min-width: 640px) {
  .fs-hero { padding: 0 2.5rem; }
  .fs-nav { padding: 1.75rem 2.5rem; }
  .fs-brand img { height: 2.1rem; }
  .fs-links { display: flex; }
  .fs-pill { height: 2.75rem; padding: 0 1.375rem; font-size: .95rem; }
  .fs-col { max-width: 40rem; }
  .fs-badge, .fs-hint { font-size: .8rem; }
  .fs-h1 { margin-top: 1.75rem; max-width: 34rem; font-size: 3.5rem; }
  .fs-sub { margin-top: 1.25rem; max-width: 34rem; font-size: 1.1rem; }
  .fs-form { margin-top: 2.5rem; }
  .fs-bar { height: 4rem; padding-left: 1.5rem; padding-right: .4rem; }
  .fs-bar input, .fs-bar input:focus, .fs-bar input:hover { font-size: 1.15rem; }
  .fs-foot { padding: 1.5rem 2.5rem; font-size: .8rem; }
}
@media (min-width: 1024px) {
  .fs-col { max-width: 52rem; }
  .fs-h1 { max-width: 46rem; font-size: 5rem; }
  .fs-sub { max-width: none; font-size: 1.2rem; }
}

/* Sezioni sotto l'hero (pubbliche) */
.public .section { padding: 7rem 2.5rem; }
.public .section-head h2 { font-size: 3.4rem; font-weight: 500; }
@media (max-width: 640px) { .public .section { padding: 4.5rem 1.25rem; } .public .section-head h2 { font-size: 2rem; } }
.public .pub-foot { background: rgba(4,5,12,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top-color: var(--glass-border); }
.cta-band { background: var(--glass-fill); border-color: var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marquee { border-color: var(--glass-border); background: rgba(4,5,12,.35); }
.svc .svc-ico { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px var(--glass-border); }
.how-step::before { background: none; -webkit-text-fill-color: var(--body-muted); color: var(--body-muted); }

/* Auth: pannello sinistro trasparente sul fluido */
.auth-art { border-right-color: var(--glass-border); }
.auth-art h2 { font-weight: 500; }

/* Anteprima "Il tuo mese": completamente statica al passaggio del cursore */
.static-preview, .static-preview * { transition: none !important; }
.static-preview .kpi:hover { transform: none; box-shadow: none; border-color: var(--glass-border); }
.static-preview [data-spotlight]::before, .static-preview .kpi::before { display: none; }
.static-preview .kpi-go { display: none; }

/* Gradiente applicato parola per parola (evita doppio sfondo sul contenitore) */
.grad-host { background: none !important; -webkit-text-fill-color: initial; }
.w.grad-text { background-image: linear-gradient(120deg, #3fd6f2, #8c9cf0 45%, #d08acb); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }

.fs-brand img, .brand-logo { filter: drop-shadow(0 2px 10px rgba(4,5,12,.75)); }

/* L'apertura riserva spazio per menu e piè di pagina: il contenuto centrato non finisce mai sotto la barra */
.fs-hero { padding-top: 6rem; padding-bottom: 4.5rem; }
@media (min-width: 640px) { .fs-hero { padding-top: 7.5rem; padding-bottom: 5rem; } }
/* Su schermi bassi il blocco centrale si compatta */
@media (max-height: 760px) and (min-width: 640px) {
  .fs-h1 { margin-top: 1.25rem; }
  .fs-sub { margin-top: 1rem; }
  .fs-form { margin-top: 1.75rem; }
}

/* Pagine pubbliche: barra di scorrimento nascosta (lo scroll resta attivo con rotella, touch e tastiera) */
html:has(body.public) { scrollbar-width: none; -ms-overflow-style: none; }
html:has(body.public)::-webkit-scrollbar, body.public::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Tutto il sito: nessuna barra di scorrimento visibile (pagina, menu laterale, tabelle, pipeline, modali).
   Lo scroll resta attivo con rotella, touchpad, touch e tastiera. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar, .table-wrap, .kanban, .tabs, dialog.modal, .content { scrollbar-width: none; }

/* Lenis: evita il doppio smorzamento con scroll-behavior nativo (causa scatti) e gestisce lo stop */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent], .sidebar, .table-wrap, .kanban, dialog.modal { overscroll-behavior: contain; }
/* NIENTE overflow:hidden quando Lenis è fermo: sgancia le scene sticky (schermo nero durante la sosta). Lenis fermo blocca già rotellina e touch. */
html:has(dialog[open]) { overflow: hidden; }
html.lenis { scroll-behavior: auto !important; }

/* Backoffice: campo stellare calmo al posto del fluido */
#starfield { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -3; pointer-events: none; display: block; background: #0a0a24; }
.is-admin .fluid-scrim { background: radial-gradient(120% 100% at 55% 40%, rgba(4,5,12,.42) 0%, rgba(4,5,12,.34) 50%, rgba(4,5,12,.2) 100%); }

/* Tema sfondo del backoffice: "scuro" = nero opaco morbido (non nero assoluto) */
#starfield { transition: opacity .6s ease; }
html.bg-plain #starfield { opacity: 0; }
html.bg-plain .is-admin .fluid-scrim { opacity: 0; }
html.bg-plain body.is-admin { background: radial-gradient(130% 90% at 50% -10%, #171922 0%, #0e0f15 45%, #0a0b10 100%) fixed; }
.theme-toggle .tt-plain { display: none; }
html.bg-plain .theme-toggle .tt-space { display: none; }
html.bg-plain .theme-toggle .tt-plain { display: inline-flex; }
.theme-toggle span { display: inline-flex; }
.theme-toggle .ico { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.theme-toggle:hover .ico { transform: rotate(-18deg) scale(1.08); }

/* ---------- Sidebar: sezioni a tendina + apri/chiudi (barra compatta a icone) ---------- */
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-top .sidebar-brand { min-width: 0; }
.sb-toggle { width: 36px; height: 36px; flex: none; }
.sb-toggle .ico { width: 18px; height: 18px; }
.sb-toggle .sb-arrow { transition: transform .4s cubic-bezier(.22,1,.36,1); transform-origin: 14px 12px; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-head { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: 700 10.5px/1 inherit; font-family: inherit; text-transform: uppercase; letter-spacing: .14em; color: #6b6b82; transition: color .2s, background .2s; }
.nav-group-head:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-group.has-active .nav-group-head { color: #b9becf; }
.nav-chev { width: 14px; height: 14px; margin-left: auto; transform: rotate(-90deg); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.nav-group.is-open .nav-chev { transform: none; }
.nav-group-count { font-style: normal; font-size: 10.5px; letter-spacing: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; display: grid; place-items: center; background: #fff; color: #2f2f33; transition: opacity .2s; }
.nav-group.is-open .nav-group-count { opacity: 0; }
.nav-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.nav-group.is-open .nav-group-body { grid-template-rows: 1fr; }
.nav-group-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.nav-group-inner .nav-item { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1), background .25s, color .2s; }
.nav-group.is-open .nav-group-inner .nav-item { opacity: 1; transform: none; }
.nav-group.is-open .nav-group-inner .nav-item:hover { transform: translateX(2px); }

@media (min-width: 961px) {
  .shell { transition: grid-template-columns .45s cubic-bezier(.22,1,.36,1); }
  html.sb-rail { --sidebar-w: 84px; }
  .sb-rail .sidebar { padding: 18px 12px 12px; overflow-x: hidden; }
  .sb-rail .sidebar-top { justify-content: center; }
  .sb-rail .sidebar-brand { display: none; }
  .sb-rail .sb-toggle .sb-arrow { transform: rotate(180deg); }
  .sb-rail .nav-group-head { justify-content: center; padding: 8px 0; margin-top: 4px; pointer-events: none; }
  .sb-rail .nav-group-head span, .sb-rail .nav-group-head .nav-chev, .sb-rail .nav-group-count { display: none; }
  .sb-rail .nav-group-head::before { content: ""; width: 24px; height: 1px; background: rgba(255,255,255,.12); }
  .sb-rail .nav-group:first-child .nav-group-head { display: none; }
  .sb-rail .nav-group-body { grid-template-rows: 1fr; }
  .sb-rail .nav-group-inner .nav-item { opacity: 1; transform: none; }
  .sb-rail .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
  .sb-rail .nav-item span { display: none; }
  .sb-rail .nav-item .nav-count { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .sb-rail .sidebar-foot { flex-direction: column; padding: 8px; gap: 8px; }
  .sb-rail .sidebar-foot .me > div { display: none; }
  .sb-rail .sidebar-foot .me { justify-content: center; }
}

/* ---------- Backoffice: movimento morbido e fluido ----------
   Il vetro sfocato sopra il campo stellare animato costringe il browser a ridisegnare ogni riquadro a ogni frame:
   nel backoffice le card usano un vetro "pieno" (stesso aspetto, nessuna sfocatura), la sfocatura resta solo su sidebar, barra in alto e finestre. */
.is-admin .card, .is-admin .kpi, .is-admin .list-item, .is-admin .shortcut, .is-admin .kan-col, .is-admin .table-wrap, .is-admin details.faq,
.is-admin .check, .is-admin .radio-card .rc, .is-admin .tabs, .is-admin .copy-field, .is-admin .chip, .is-admin .sidebar-foot, .is-admin .glass-card,
.is-admin .np-search, .is-admin .np-side select, .is-admin .view-switch {
  backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(12,14,26,.72);
}
.is-admin .grain { display: none; }
.is-admin .card, .is-admin .kpi, .is-admin .list-item, .is-admin .table-wrap { contain: layout paint; }
#starfield { will-change: transform; }

/* transizioni tra pagine: dissolvenza leggera senza sfocatura (la sfocatura a tutta pagina scatta) */
::view-transition-old(root) { animation: vt-out2 .22s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vt-in2 .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes vt-out2 { to { opacity: 0; } }
@keyframes vt-in2 { from { opacity: 0; transform: translateY(8px); } }
.topbar { view-transition-name: topbar; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
#starfield { view-transition-name: starfield; }
::view-transition-old(starfield) { animation: vt-out2 .5s ease both; }
::view-transition-new(starfield) { animation: none; }

/* ingresso dei contenuti: più lungo e morbido */
.js [data-animate] { transition: opacity .8s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1) !important; }
.nav-item, .btn, .chip, .icon-btn, .card, .kpi { transition-timing-function: cubic-bezier(.22,1,.36,1); }

/* cambio pagina: sidebar e barra in alto restano ferme. Si mostra solo la versione nuova
   (prima vecchia e nuova restavano sovrapposte per mezzo secondo → effetto "glitch") */
::view-transition-old(sidebar), ::view-transition-old(topbar), ::view-transition-old(bottombar) { display: none; }
::view-transition-new(sidebar), ::view-transition-new(topbar), ::view-transition-new(bottombar) { animation: none; opacity: 1; }
::view-transition-group(sidebar), ::view-transition-group(topbar), ::view-transition-group(bottombar) { animation: none; }
::view-transition-image-pair(sidebar), ::view-transition-image-pair(topbar), ::view-transition-image-pair(bottombar) { isolation: auto; }
.nav-instant .nav-group-body, .nav-instant .nav-group-inner .nav-item, .nav-instant .nav-chev, .nav-instant .nav-group-count { transition: none !important; }