/* Digitalia – movimento, fase 1.
 * Miglioramento progressivo: senza JS, con browser vecchi o con "riduci movimento" il sito è identico, solo fermo.
 * Si animano solo transform/translate/scale e opacity (nessuno spostamento dell'impaginazione). */

/* ---------- Comparsa allo scroll (classi aggiunte da movimento.js solo sotto la piega) ---------- */
.dg-rivela { transition: opacity .5s cubic-bezier(.2, .7, .2, 1) var(--dg-rit, 0ms), translate .5s cubic-bezier(.2, .7, .2, 1) var(--dg-rit, 0ms); }
.dg-rivela:not(.is-in) { opacity: 0; translate: 0 16px; }

/* ---------- Card: bordo nel colore della linea, freccia che scorre, stesso effetto al focus ---------- */
.dg-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.dg-card.dg-rivela { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, opacity .5s cubic-bezier(.2, .7, .2, 1) var(--dg-rit, 0ms), translate .5s cubic-bezier(.2, .7, .2, 1) var(--dg-rit, 0ms); }
.dg-card:has(h3 a):hover, .dg-card:has(a:focus-visible) { border-color: var(--dg-acc, #2D4A6E); box-shadow: 0 14px 34px rgba(27, 46, 71, .12); transform: translateY(-2px); }
.dg-fr { display: inline-block; transition: transform .2s ease; }
.dg-card:has(h3 a):hover .dg-fr, .dg-card:has(a:focus-visible) .dg-fr, .dg-vai a:hover .dg-fr, .dg-vai a:focus-visible .dg-fr { transform: translateX(5px); }
.dg-elenco-frecce a strong::after { display: inline-block; transition: transform .2s ease; }
.dg-elenco-frecce a:hover strong::after, .dg-elenco-frecce a:focus-visible strong::after { transform: translateX(5px); }

/* ---------- Bande delle linee: lo sfondo sta in ::before, così può stendersi da sinistra ---------- */
.dg-apertura, .dg-fascia { position: relative; isolation: isolate; background: transparent; }
.dg-apertura::before, .dg-fascia::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dg-acc, #2D4A6E); transform-origin: 0 50%; }

/* ---------- Barra di sezione delle pagine linea (creata da movimento.js) ---------- */
.dg-sezbar { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--dg-testata-h, 72px)); z-index: 50; margin-block: 0 !important; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--dg-fascia, #DDEEF8); box-shadow: 0 6px 18px rgba(27, 46, 71, 0); transition: box-shadow .25s ease; font-family: var(--wp--preset--font-family--barlow); }
.dg-sezbar.is-fissa { box-shadow: 0 6px 18px rgba(27, 46, 71, .10); }
.dg-sezbar__in { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; gap: 0 28px; min-height: 54px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.dg-sezbar__in::-webkit-scrollbar { display: none; }
.dg-sezbar__k { align-self: center; margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--dg-acc); }
.dg-sezbar a { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--dg-acc) !important; text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s ease, border-color .2s ease; }
.dg-sezbar a:hover, .dg-sezbar a:focus-visible { color: var(--dg-acc-scuro) !important; }
.dg-sezbar a.is-attiva { color: var(--dg-acc-scuro) !important; border-bottom-color: var(--dg-dot); }
.dg-sezbar__n { font-size: 13px; font-weight: 600; color: var(--dg-dot); }
.dg-pagina [id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--dg-testata-h, 72px) + 62px); }
@media (max-width: 600px) { .dg-sezbar__k { display: none; } .dg-sezbar__in { gap: 0 22px; min-height: 48px; } .dg-sezbar a { font-size: 15px; } }

/* ---------- Solo con movimento consentito ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Apertura della pagina linea: la banda si stende all'arrivo, poi compare l'indice */
	.dg-apertura::before { animation: dg-banda .65s cubic-bezier(.3, .6, .2, 1) .05s both; }
	.dg-apertura .dg-indice { animation: dg-sale .5s cubic-bezier(.2, .7, .2, 1) .5s both; }
	/* Fasce della home: si stendono quando entrano in vista, poi sale il numero */
	.dg-fascia.dg-attesa::before { transform: scaleX(0); transition: transform .65s cubic-bezier(.3, .6, .2, 1); }
	.dg-fascia.dg-attesa.is-in::before { transform: none; }
	.dg-fascia.dg-attesa .dg-numero { opacity: 0; translate: 0 24px; transition: opacity .45s ease .45s, translate .5s cubic-bezier(.2, .7, .2, 1) .45s; }
	.dg-fascia.dg-attesa.is-in .dg-numero { opacity: 1; translate: 0 0; }
	/* Slider delle tavole: zoom lentissimo della tavola attiva, fermo con la pausa */
	.dg-slide img { scale: 1.03; }
	.dg-slide.is-attiva img { animation: dg-zoom 6s linear both; }
	.dg-slider:has([data-dg-pausa].is-ferma) .dg-slide.is-attiva img { animation-play-state: paused; }
}
@keyframes dg-banda { from { transform: scaleX(0); } }
@keyframes dg-sale { from { opacity: 0; translate: 0 16px; } }
@keyframes dg-zoom { from { scale: 1; } to { scale: 1.03; } }

/* ---------- Transizioni tra pagine (Chrome, Edge, Safari; gli altri navigano normalmente) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
::view-transition-group(dg-tavola) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
header.wp-block-template-part:has(.dg-testata) { view-transition-name: dg-testata; }
.dg-sez--apre .dg-tavola img, .dg-sez--apre .dg-tv { view-transition-name: dg-tavola; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.dg-rivela, .dg-card, .dg-fr, .dg-sezbar, .dg-elenco-frecce a strong::after { transition: none !important; }
	.dg-rivela:not(.is-in) { opacity: 1; translate: none; }
}