/* ==========================================================================
   Italia Softair — scene animate (illustrazioni "guarda come si fa")

   Usate dalla guida del portale (templates/tesseramenti/guide/index) e dalla
   pagina "Gestionale Club" del sito (templates/site/club_manager): il markup
   sta in templates/tesseramenti/guide/_demo.html.twig. Solo token di
   tokens.css, quindi valgono in entrambe le grafiche (sito e portale).
   ========================================================================== */

/* ── Guida: scene animate ───────────────────────────────────────────────
   templates/tesseramenti/guide/_demo.html.twig. Un riquadro che somiglia
   alla pagina vera, un puntatore che clicca dove si clicca e il risultato,
   in loop da 8 secondi. Tutto in percentuale del riquadro (16:8.5) e in
   unità del contenitore, così puntatore e pulsanti restano allineati a
   ogni larghezza. Le posizioni di partenza (senza animazione) sono la scena
   "ferma" per chi ha chiesto meno animazioni: puntatore sul pulsante da
   premere. 1% del ciclo = 0,08 s: i ritardi dei clic sono quei tempi. */
.gd { margin: var(--space-3) 0 var(--space-4); max-width: 560px; container-type: inline-size; }
.gd__frame { position: relative; aspect-ratio: 16 / 8.5; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; font-size: clamp(8px, 2.45cqw, 14px); line-height: 1.2; color: var(--color-ink); user-select: none; }
.gd__frame *, .gd__frame *::after { box-sizing: border-box; }
.gd__frame > * { position: absolute; }
.gd__caption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.gd__bar { top: 0; left: 0; right: 0; height: 11%; display: flex; align-items: center; gap: 1.2%; padding-left: 2.5%; background: var(--color-surface-2); border-bottom: 1px solid var(--color-line); }
.gd__bar span { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--color-line-strong); }
.gd__bar b { margin-left: 2%; font-size: .82em; font-weight: 700; color: var(--color-ink-muted); }
.gd__title { font-size: 1.2em; font-weight: 900; }
.gd__label { font-size: .8em; font-weight: 700; color: var(--color-ink-muted); }
.gd__muted { font-size: .8em; color: var(--color-ink-muted); }
.gd__btn { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-size: .9em; font-weight: 800; white-space: nowrap; }
.gd__btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.gd__btn--ok { background: var(--tone-ok-ink); color: var(--color-surface); }
.gd__btn--outline { border: 1.5px solid var(--color-primary); color: var(--color-primary); background: var(--color-surface); }
.gd__field { display: flex; align-items: center; padding: 0 3%; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); font-size: .9em; white-space: nowrap; overflow: hidden; }
.gd__select::after { content: "▾"; margin-left: auto; padding-left: 4%; color: var(--color-ink-muted); }
.gd__panel, .gd__modal { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-2); }
.gd__panel > *, .gd__modal > * { position: absolute; }
.gd__modal { background: var(--color-surface); box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .25); }
.gd__row { display: flex; align-items: center; gap: 2%; padding: 0 3%; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: .9em; }
.gd__badge { display: inline-flex; align-items: center; padding: .15em .65em; border-radius: var(--radius-pill); font-size: .78em; font-weight: 800; white-space: nowrap; }
.gd__badge--ok { background: var(--tone-ok-bg); color: var(--tone-ok-ink); }
.gd__badge--info { background: var(--tone-info-bg); color: var(--tone-info-ink); }
.gd__toast { padding: .45em 1em; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-surface); font-size: .82em; font-weight: 700; white-space: nowrap; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25); }
.gd__cursor { width: 4.4cqw; height: 4.4cqw; fill: var(--color-ink); stroke: var(--color-surface); stroke-width: 1.4; translate: -17% -10%; filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .3)); z-index: 5; }
.gd__ring { width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border: 2px solid var(--color-signal); border-radius: 50%; opacity: 0; z-index: 4; }
@keyframes gd-ring { 0% { opacity: .9; transform: scale(.2); } 7% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes gd-press { 0% { transform: scale(1); } 2% { transform: scale(.9); } 5%, 100% { transform: scale(1); } }

/* 1. Stagioni: "Nuova stagione", poi "Crea stagione". */
.gd--stagioni .gd__t1 { left: 5%; top: 17%; }
.gd--stagioni .gd__a { left: 62%; top: 15%; width: 33%; height: 12%; animation: gd-press 8s 1.76s infinite; }
.gd--stagioni .gd__p { left: 5%; top: 32%; width: 90%; height: 30%; animation: gd-s1-show 8s infinite; }
.gd--stagioni .gd__l1 { left: 4%; top: 10%; }
.gd--stagioni .gd__f1 { left: 4%; top: 30%; width: 34%; height: 30%; }
.gd--stagioni .gd__q { left: 4%; top: 72%; }
.gd--stagioni .gd__b { left: 67%; top: 66%; width: 28%; height: 12%; animation: gd-s1-show 8s infinite, gd-press 8s 3.76s infinite; }
.gd--stagioni .gd__r { left: 5%; top: 83%; width: 90%; height: 12%; opacity: 0; animation: gd-s1-row 8s infinite; }
.gd--stagioni .gd__ring1 { left: 78.5%; top: 21%; animation: gd-ring 8s 1.76s infinite; }
.gd--stagioni .gd__ring2 { left: 81%; top: 72%; animation: gd-ring 8s 3.76s infinite; }
.gd--stagioni .gd__cursor { left: 81%; top: 72%; animation: gd-s1-cur 8s infinite; }
@keyframes gd-s1-cur { 0%, 6% { left: 52%; top: 90%; } 20%, 25% { left: 78.5%; top: 21%; } 44%, 50% { left: 81%; top: 72%; } 68%, 90% { left: 40%; top: 58%; } 100% { left: 52%; top: 90%; } }
@keyframes gd-s1-show { 0%, 23% { opacity: 0; translate: 0 6%; } 27%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes gd-s1-row { 0%, 48% { opacity: 0; } 52%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* 2. Iscrizione: scegli il tipo, poi "Iscrivi". */
.gd--iscrizione .gd__t1 { left: 5%; top: 17%; }
.gd--iscrizione .gd__f1 { left: 5%; top: 28%; width: 42%; height: 12%; }
.gd--iscrizione .gd__f2 { left: 51%; top: 28%; width: 44%; height: 12%; }
.gd--iscrizione .gd__f2 > span { position: absolute; left: 7%; }
.gd--iscrizione .gd__v1 { opacity: 0; animation: gd-s2-v1 8s infinite; }
.gd--iscrizione .gd__v2 { animation: gd-s2-v2 8s infinite; }
.gd--iscrizione .gd__b { left: 5%; top: 45%; width: 22%; height: 12%; animation: gd-press 8s 3.44s infinite; }
.gd--iscrizione .gd__r { left: 5%; top: 63%; width: 90%; height: 12%; opacity: 0; animation: gd-s2-row 8s infinite; }
.gd--iscrizione .gd__n { left: 5%; top: 81%; opacity: 0; animation: gd-s2-note 8s infinite; }
.gd--iscrizione .gd__ring1 { left: 73%; top: 34%; animation: gd-ring 8s 1.76s infinite; }
.gd--iscrizione .gd__ring2 { left: 16%; top: 51%; animation: gd-ring 8s 3.44s infinite; }
.gd--iscrizione .gd__cursor { left: 16%; top: 51%; animation: gd-s2-cur 8s infinite; }
@keyframes gd-s2-cur { 0%, 6% { left: 62%; top: 90%; } 20%, 24% { left: 73%; top: 34%; } 40%, 46% { left: 16%; top: 51%; } 66%, 90% { left: 48%; top: 56%; } 100% { left: 62%; top: 90%; } }
@keyframes gd-s2-v1 { 0%, 22% { opacity: 1; } 24%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes gd-s2-v2 { 0%, 22% { opacity: 0; } 24%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes gd-s2-row { 0%, 45% { opacity: 0; translate: 0 8%; } 49%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes gd-s2-note { 0%, 52% { opacity: 0; } 56%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* 3. Tessera: l'icona della tessera, la grafica, "Invia tessera". */
.gd--tessera .gd__r0 { left: 5%; top: 17%; width: 90%; height: 13%; }
.gd--tessera .gd__sent { opacity: 0; animation: gd-s3-sent 8s infinite; }
.gd--tessera .gd__a { left: 85%; top: 19%; width: 8%; height: 9%; padding: 0; animation: gd-press 8s 1.6s infinite; }
.gd__a svg { width: 55%; height: 70%; fill: none; stroke: currentColor; stroke-width: 2; }
.gd--tessera .gd__m { left: 10%; top: 35%; width: 80%; height: 50%; animation: gd-s3-modal 8s infinite; }
.gd--tessera .gd__mt { left: 5%; top: 9%; }
.gd--tessera .gd__card { top: 30%; width: 16%; height: 34%; border-radius: var(--radius-sm); }
.gd--tessera .gd__c1 { left: 5%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.gd--tessera .gd__c2 { left: 24%; background: linear-gradient(135deg, var(--color-military), var(--color-ink-dark)); }
.gd--tessera .gd__c3 { left: 43%; background: linear-gradient(135deg, var(--color-gold), var(--color-ink-dark)); }
.gd--tessera .gd__sel { top: 30%; left: 24%; width: 16%; height: 34%; margin: -.6cqw; padding: .6cqw; box-sizing: content-box; border: 2px solid var(--color-signal); border-radius: var(--radius-md); animation: gd-s3-sel 8s infinite; }
.gd--tessera .gd__num { left: 64%; top: 30%; width: 31%; height: 20%; padding: 0 3%; }
.gd--tessera .gd__b { left: 62%; top: 72%; width: 24%; height: 10%; z-index: 2; animation: gd-s3-modal 8s infinite, gd-press 8s 4.32s infinite; }
.gd--tessera .gd__ring1 { left: 89%; top: 23.5%; animation: gd-ring 8s 1.6s infinite; }
.gd--tessera .gd__ring2 { left: 35.6%; top: 58.5%; animation: gd-ring 8s 2.88s infinite; }
.gd--tessera .gd__ring3 { left: 74%; top: 77%; animation: gd-ring 8s 4.32s infinite; }
.gd--tessera .gd__cursor { left: 74%; top: 77%; animation: gd-s3-cur 8s infinite; }
@keyframes gd-s3-cur { 0%, 5% { left: 50%; top: 92%; } 18%, 22% { left: 89%; top: 23.5%; } 34%, 38% { left: 35.6%; top: 58.5%; } 52%, 57% { left: 74%; top: 77%; } 72%, 90% { left: 60%; top: 32%; } 100% { left: 50%; top: 92%; } }
@keyframes gd-s3-modal { 0%, 21% { opacity: 0; translate: 0 5%; } 24%, 56% { opacity: 1; translate: 0 0; } 60%, 100% { opacity: 0; translate: 0 0; } }
@keyframes gd-s3-sel { 0%, 35% { left: 5%; } 38%, 100% { left: 24%; } }
@keyframes gd-s3-sent { 0%, 58% { opacity: 0; } 62%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* 4. Iscrizione massiva: spunta i soci, poi "Iscrivi selezionati". */
.gd--massiva .gd__f1 { left: 5%; top: 16%; width: 42%; height: 11%; }
.gd--massiva .gd__f2 { left: 50%; top: 16%; width: 22%; height: 11%; }
.gd--massiva .gd__list { left: 5%; width: 90%; height: 10%; }
.gd--massiva .gd__li1 { top: 31%; }
.gd--massiva .gd__li2 { top: 43%; }
.gd--massiva .gd__li3 { top: 55%; }
.gd--massiva .gd__li4 { top: 67%; }
.gd--massiva .is-off { color: var(--color-ink-faint); }
.gd--massiva .gd__already { margin-left: auto; }
.gd__check { position: relative; flex-shrink: 0; width: 2.9cqw; height: 2.9cqw; border: 2px solid var(--color-line-strong); border-radius: 3px; background: var(--color-surface); color: transparent; }
.gd__check::after { content: ""; position: absolute; left: 28%; top: 6%; width: 32%; height: 58%; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gd--massiva .is-off .gd__check { opacity: .4; }
.gd--massiva .gd__ck1, .gd--massiva .gd__ck3, .gd--massiva .gd__ck4 { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.gd--massiva .gd__ck1 { animation: gd-s4-ck1 8s infinite; }
.gd--massiva .gd__ck3 { animation: gd-s4-ck3 8s infinite; }
.gd--massiva .gd__ck4 { animation: gd-s4-ck4 8s infinite; }
.gd--massiva .gd__b { left: 60%; top: 83%; width: 35%; height: 11%; animation: gd-press 8s 4.56s infinite; }
.gd--massiva .gd__t { left: 5%; top: 84.5%; opacity: 0; animation: gd-s4-toast 8s infinite; }
.gd--massiva .gd__ring1 { left: 9%; top: 36%; animation: gd-ring 8s 1.28s infinite; }
.gd--massiva .gd__ring2 { left: 9%; top: 60%; animation: gd-ring 8s 2.16s infinite; }
.gd--massiva .gd__ring3 { left: 9%; top: 72%; animation: gd-ring 8s 2.96s infinite; }
.gd--massiva .gd__ring4 { left: 77.5%; top: 88.5%; animation: gd-ring 8s 4.56s infinite; }
.gd--massiva .gd__cursor { left: 77.5%; top: 88.5%; animation: gd-s4-cur 8s infinite; }
@keyframes gd-s4-cur { 0%, 5% { left: 45%; top: 95%; } 14%, 17% { left: 9%; top: 36%; } 25%, 28% { left: 9%; top: 60%; } 35%, 38% { left: 9%; top: 72%; } 54%, 58% { left: 77.5%; top: 88.5%; } 74%, 90% { left: 52%; top: 24%; } 100% { left: 45%; top: 95%; } }
@keyframes gd-s4-ck1 { 0%, 15% { background: var(--color-surface); border-color: var(--color-line-strong); color: transparent; } 17%, 92% { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } 97%, 100% { background: var(--color-surface); border-color: var(--color-line-strong); color: transparent; } }
@keyframes gd-s4-ck3 { 0%, 26% { background: var(--color-surface); border-color: var(--color-line-strong); color: transparent; } 28%, 92% { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } 97%, 100% { background: var(--color-surface); border-color: var(--color-line-strong); color: transparent; } }
@keyframes gd-s4-ck4 { 0%, 36% { background: var(--color-surface); border-color: var(--color-line-strong); color: transparent; } 38%, 92% { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } 97%, 100% { background: var(--color-surface); border-color: var(--color-line-strong); color: transparent; } }
@keyframes gd-s4-toast { 0%, 59% { opacity: 0; translate: 0 10%; } 63%, 90% { opacity: 1; translate: 0 0; } 95%, 100% { opacity: 0; } }

/* 5. Preregistrazione: "Form attivo", "Salva", "Scarica QR". */
.gd--prereg .gd__l1 { left: 5%; top: 19%; }
.gd__switch { border-radius: var(--radius-pill); background: var(--color-primary); }
.gd__switch i { position: absolute; top: 12%; left: 52%; width: 38%; height: 76%; border-radius: 50%; background: var(--color-surface); }
.gd--prereg .gd__s { left: 26%; top: 17%; width: 9%; height: 9%; animation: gd-s5-track 8s infinite; }
.gd--prereg .gd__s i { animation: gd-s5-knob 8s infinite; }
.gd--prereg .gd__b { left: 5%; top: 32%; width: 15%; height: 11%; animation: gd-press 8s 2.64s infinite; }
.gd--prereg .gd__link { left: 5%; top: 52%; width: 52%; height: 11%; animation: gd-s5-show 8s infinite; }
.gd--prereg .gd__qr { left: 66%; top: 16%; width: 22%; height: 41%; padding: 1cqw; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #fff; animation: gd-s5-show 8s infinite; }
.gd__qr svg { display: block; width: 100%; height: 100%; }
.gd--prereg .gd__d { left: 64%; top: 63%; width: 26%; height: 11%; animation: gd-s5-show 8s infinite, gd-press 8s 4.4s infinite; }
.gd--prereg .gd__file { left: 62%; top: 80%; opacity: 0; animation: gd-s5-file 8s infinite; }
.gd--prereg .gd__ring1 { left: 30.5%; top: 21.5%; animation: gd-ring 8s 1.44s infinite; }
.gd--prereg .gd__ring2 { left: 12.5%; top: 37.5%; animation: gd-ring 8s 2.64s infinite; }
.gd--prereg .gd__ring3 { left: 77%; top: 68.5%; animation: gd-ring 8s 4.4s infinite; }
.gd--prereg .gd__cursor { left: 77%; top: 68.5%; animation: gd-s5-cur 8s infinite; }
@keyframes gd-s5-cur { 0%, 5% { left: 50%; top: 92%; } 16%, 19% { left: 30.5%; top: 21.5%; } 31%, 34% { left: 12.5%; top: 37.5%; } 53%, 56% { left: 77%; top: 68.5%; } 72%, 90% { left: 45%; top: 86%; } 100% { left: 50%; top: 92%; } }
@keyframes gd-s5-track { 0%, 17% { background: var(--color-line-strong); } 19%, 92% { background: var(--color-primary); } 97%, 100% { background: var(--color-line-strong); } }
@keyframes gd-s5-knob { 0%, 17% { left: 10%; } 19%, 92% { left: 52%; } 97%, 100% { left: 10%; } }
@keyframes gd-s5-show { 0%, 35% { opacity: 0; translate: 0 5%; } 39%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes gd-s5-file { 0%, 57% { opacity: 0; } 61%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* Larga quanto la colonna (pagina "Gestionale Club" del sito). */
.gd--wide { max-width: none; margin: 0; }
.gd__badge--warn { background: var(--tone-warn-bg); color: var(--tone-warn-ink); }

/* 6. Bacheca: "Nuovo avviso", titolo e destinatari, "Pubblica", la notifica. */
.gd--bacheca .gd__t1 { left: 5%; top: 17%; }
.gd--bacheca .gd__a { left: 62%; top: 15%; width: 33%; height: 12%; animation: gd-press 8s 1.76s infinite; }
.gd--bacheca .gd__p { left: 5%; top: 31%; width: 90%; height: 36%; animation: gd-s1-show 8s infinite; }
.gd--bacheca .gd__l1 { left: 4%; top: 9%; }
.gd--bacheca .gd__f1 { left: 4%; top: 26%; width: 58%; height: 24%; }
.gd--bacheca .gd__pr { left: 66%; top: 31%; }
.gd--bacheca .gd__l2 { left: 4%; top: 62%; }
.gd--bacheca .gd__f2 { left: 26%; top: 57%; width: 36%; height: 24%; }
.gd--bacheca .gd__b { left: 67%; top: 71%; width: 28%; height: 11%; animation: gd-s1-show 8s infinite, gd-press 8s 3.76s infinite; }
.gd--bacheca .gd__n { left: 5%; top: 86%; opacity: 0; animation: gd-s6-note 8s infinite; }
.gd--bacheca .gd__ring1 { left: 78.5%; top: 21%; animation: gd-ring 8s 1.76s infinite; }
.gd--bacheca .gd__ring2 { left: 81%; top: 76.5%; animation: gd-ring 8s 3.76s infinite; }
.gd--bacheca .gd__cursor { left: 78.5%; top: 21%; animation: gd-s6-cur 8s infinite; }
@keyframes gd-s6-cur { 0%, 6% { left: 52%; top: 92%; } 20%, 25% { left: 78.5%; top: 21%; } 44%, 50% { left: 81%; top: 76.5%; } 68%, 90% { left: 40%; top: 60%; } 100% { left: 52%; top: 92%; } }
@keyframes gd-s6-note { 0%, 52% { opacity: 0; translate: 0 10%; } 56%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }

/* 7. Quote: "Registra" accanto a chi deve pagare, importo e conto, la
   quota diventa pagata e la ricevuta parte. */
.gd--quote .gd__t1 { left: 5%; top: 16%; }
.gd--quote .gd__r1 { left: 5%; top: 28%; width: 90%; height: 12%; }
.gd--quote .gd__r2 { left: 5%; top: 43%; width: 90%; height: 12%; }
.gd--quote .gd__r3 { left: 5%; top: 58%; width: 90%; height: 12%; }
.gd--quote .gd__k1 { left: 46%; top: 31%; }
.gd--quote .gd__due { left: 46%; top: 46%; animation: gd-s7-due 8s infinite; }
.gd--quote .gd__paid { left: 46%; top: 46%; opacity: 0; animation: gd-s7-paid 8s infinite; }
.gd--quote .gd__k3 { left: 46%; top: 61%; }
.gd--quote .gd__a { left: 74%; top: 44.5%; width: 18%; height: 9%; animation: gd-s7-due 8s infinite, gd-press 8s 1.76s infinite; }
.gd--quote .gd__m { left: 6%; top: 24%; width: 89%; height: 54%; z-index: 2; animation: gd-s7-modal 8s infinite; }
.gd--quote .gd__mt { left: 5%; top: 10%; }
.gd--quote .gd__f1 { left: 5%; top: 32%; width: 34%; height: 18%; }
.gd--quote .gd__f2 { left: 43%; top: 32%; width: 34%; height: 18%; }
.gd--quote .gd__mk { left: 5%; top: 66%; }
.gd--quote .gd__b { left: 56%; top: 64%; width: 24%; height: 9%; z-index: 3; animation: gd-s7-modal 8s infinite, gd-press 8s 3.84s infinite; }
.gd--quote .gd__n { left: 5%; top: 82%; opacity: 0; animation: gd-s7-note 8s infinite; }
.gd--quote .gd__ring1 { left: 83%; top: 49%; animation: gd-ring 8s 1.76s infinite; }
.gd--quote .gd__ring2 { left: 68%; top: 68.5%; animation: gd-ring 8s 3.84s infinite; }
.gd--quote .gd__cursor { left: 83%; top: 49%; animation: gd-s7-cur 8s infinite; }
@keyframes gd-s7-cur { 0%, 6% { left: 50%; top: 92%; } 20%, 24% { left: 83%; top: 49%; } 44%, 50% { left: 68%; top: 68.5%; } 68%, 90% { left: 40%; top: 76%; } 100% { left: 50%; top: 92%; } }
@keyframes gd-s7-modal { 0%, 22% { opacity: 0; translate: 0 5%; } 25%, 50% { opacity: 1; translate: 0 0; } 54%, 100% { opacity: 0; translate: 0 0; } }
@keyframes gd-s7-due { 0%, 52% { opacity: 1; } 54%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes gd-s7-paid { 0%, 52% { opacity: 0; } 54%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes gd-s7-note { 0%, 56% { opacity: 0; translate: 0 10%; } 60%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }

/* Meno animazioni: la scena resta ferma sul passo da fare. */
@media (prefers-reduced-motion: reduce) {
    .gd *, .gd *::after { animation: none !important; }
}