/* PROVA (decorazione): disegno animato «economia e finanza» a destra del modulo di «Nuovo movimento», solo su schermo largo.
   Tre disegni: grafico a barre (nuovo movimento), salvadanaio (nuovo conto), registri (nuova categoria).
   Per toglierli: cancellare la riga che include templates/partials/finance_art.php nei template (movements/new.php, accounts/new.php, categories/new.php). */
.finance-art { display: none; }
@media (min-width: 56rem) {
    .tab-panel:has(> .finance-art), form:has(> .finance-art), .art-host:has(> .finance-art) { position: relative; }
    .finance-art { display: flex; align-items: center; justify-content: center; position: absolute; top: 1.5rem; bottom: 1rem; left: 30rem; right: 1.5rem; pointer-events: none; }
    .art-host > .finance-art { top: 0; bottom: 0; left: 32rem; right: 0; }   /* pagina «Elimina»: a destra della tabella */
    .art-host > p, .art-host > table { max-width: 30rem; }
    form > .finance-art { top: 0; bottom: 0; left: 29rem; right: 0; }
    form:has(> .art-tag) { min-height: 15rem; }
    form:has(> .art-lock) { min-height: 18rem; }   /* «Password dimenticata»: un solo campo, il modulo è basso e il disegno resterebbe piccolo */   /* «Rinomina categoria» ha un solo campo: senza altezza minima il disegno resterebbe piccolo */   /* nei moduli senza finestra: a destra dei campi */
    .finance-art svg { width: 100%; height: 100%; max-height: 24rem; }
}
.finance-art svg { overflow: visible; }
.fa-axis { fill: none; stroke: var(--ink); stroke-width: 3; }
.fa-grid { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; }
.fa-bar { fill: var(--ink); transform-box: fill-box; transform-origin: bottom; animation: fa-grow 7s ease-in-out infinite; }
.fa-b1 { animation-delay: 0s; } .fa-b2 { animation-delay: .25s; } .fa-b3 { animation-delay: .5s; } .fa-b4 { animation-delay: .75s; } .fa-b5 { animation-delay: 1s; fill: var(--red); }
.fa-trend { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; animation: fa-draw 7s ease-in-out infinite; }
.fa-coin circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-coin text { font: 700 34px Roboto, sans-serif; fill: var(--ink); }
.fa-coin.fa-small text { font-size: 18px; }
.fa-coin { animation: fa-float 4s ease-in-out infinite; }
.fa-c2 { animation-duration: 5s; animation-delay: -1s; } .fa-c3 { animation-duration: 4.5s; animation-delay: -2s; }
@keyframes fa-grow { 0% { transform: scaleY(0); } 20%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes fa-draw { 0%, 15% { stroke-dashoffset: 400; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 400; } }
@keyframes fa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Salvadanaio (nuovo conto): una moneta cade nella fessura e sparisce dietro al maialino */
.art-piggy .fa-pig ellipse, .art-piggy .fa-pig rect, .art-piggy .fa-ear { fill: var(--paper); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.art-piggy .fa-ear { fill: var(--red); }
.art-piggy .fa-dot { fill: var(--ink); stroke: none; }
.fa-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.fa-slot { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.fa-drop circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-drop text { font: 700 26px Roboto, sans-serif; fill: var(--ink); }
.fa-drop { animation: fa-drop 4.5s ease-in infinite; }
.fa-pig { transform-box: fill-box; transform-origin: center bottom; animation: fa-squish 4.5s ease-out infinite; }
@keyframes fa-drop { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 60%, 100% { transform: translateY(95px); opacity: 1; } }
@keyframes fa-squish { 0%, 58% { transform: scale(1, 1); } 64% { transform: scale(1.03, .96); } 74%, 100% { transform: scale(1, 1); } }

/* Registri (nuova categoria): le righe si scrivono una dopo l'altra, in nero e in rosso (uscite) */
.fa-page { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.art-ledger .fa-stack rect { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-write { fill: var(--ink); transform-box: fill-box; transform-origin: left center; animation: fa-write 8s ease-in-out infinite; }
.fa-write.fa-red { fill: var(--red); }
.fa-w1 { animation-delay: 0s; } .fa-w2 { animation-delay: .4s; } .fa-w3 { animation-delay: .8s; } .fa-w4 { animation-delay: 1.2s; } .fa-w5 { animation-delay: 1.6s; }
@keyframes fa-write { 0% { transform: scaleX(0); } 12%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* Matita (modifica movimento): una riga viene cancellata e riscritta in rosso mentre la matita passa */
.fa-keep { fill: var(--line); }
.fa-rewrite { fill: var(--ink); transform-box: fill-box; transform-origin: left center; animation: fa-rewrite 6s ease-in-out infinite; }
.fa-pencil { animation: fa-pencil 6s ease-in-out infinite; }
.fa-pencil rect, .fa-pencil polygon { fill: var(--paper); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.fa-pencil .fa-band { fill: var(--red); }
.fa-pencil .fa-lead { fill: var(--ink); }
@keyframes fa-rewrite { 0%, 15% { transform: scaleX(1); fill: var(--ink); } 35% { transform: scaleX(0); fill: var(--ink); } 70%, 90% { transform: scaleX(1); fill: var(--red); } 100% { transform: scaleX(1); fill: var(--ink); } }
@keyframes fa-pencil { 0%, 15% { transform: translate(275px, 142px); } 35% { transform: translate(95px, 146px); } 70% { transform: translate(265px, 146px); } 85%, 100% { transform: translate(300px, 120px); } }

/* Cestino (elimina movimento): il coperchio si alza, un foglietto cade dentro, il coperchio si richiude */
.fa-bin, .fa-lid rect { fill: var(--paper); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.fa-item rect:first-child { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-fill { fill: var(--ink); }
.fa-item { animation: fa-fall 5s ease-in infinite; }
.fa-lid { transform-origin: 95px 115px; animation: fa-lid 5s ease-in-out infinite; }
@keyframes fa-fall { 0%, 15% { transform: translateY(0) rotate(0); opacity: 0; } 22% { opacity: 1; } 65%, 100% { transform: translateY(150px) rotate(8deg); opacity: 1; } }
@keyframes fa-lid { 0%, 8% { transform: rotate(0); } 18%, 62% { transform: rotate(-24deg); } 76%, 100% { transform: rotate(0); } }
/* Fogli (duplica movimento): dal foglio originale ne esce una copia, che si sposta di lato e resta un attimo accanto */
.fa-copy { animation: fa-copy 6s ease-in-out infinite; }
@keyframes fa-copy { 0%, 8% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 45%, 80% { transform: translate(84px, 34px); opacity: 1; } 95%, 100% { transform: translate(84px, 34px); opacity: 0; } }
/* Etichetta (rinomina categoria): come la matita di «Modifica movimento», ma sul nome di un'etichetta */
.fa-hole { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-pencil2 { animation-name: fa-pencil2; }
@keyframes fa-pencil2 { 0%, 15% { transform: translate(315px, 162px); } 35% { transform: translate(135px, 166px); } 70% { transform: translate(305px, 166px); } 85%, 100% { transform: translate(340px, 140px); } }
/* Lucchetto (password dimenticata): la chiave entra, il lucchetto si apre, poi tutto si richiude; una busta fluttua (il link arriva per e-mail) */
.fa-lockbody { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-shackle { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; animation: fa-shackle 6s ease-in-out infinite; }
.fa-key circle, .fa-key rect { fill: var(--paper); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.fa-key circle.fa-hole { fill: var(--ink); }
.fa-key { animation: fa-key 6s ease-in-out infinite; }
.fa-env { animation: fa-float 4s ease-in-out infinite; }
@keyframes fa-key { 0%, 10% { transform: translateX(0); } 40%, 60% { transform: translateX(78px); } 90%, 100% { transform: translateX(0); } }
@keyframes fa-shackle { 0%, 40% { transform: translateY(0); } 50%, 60% { transform: translateY(-28px); } 75%, 100% { transform: translateY(0); } }

/* Tessera (registrazione): la scheda si compila e compare il segno di spunta */
.fa-check { transform-box: fill-box; transform-origin: center; animation: fa-pop 8s ease-in-out infinite; }
.fa-check circle { fill: var(--ink); }
.fa-check polyline { fill: none; stroke: var(--paper); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fa-pop { 0%, 45% { transform: scale(0); } 55%, 85% { transform: scale(1); } 100% { transform: scale(0); } }

/* Pagine centrate (accesso, registrazione, password dimenticata): il disegno sta a destra del riquadro, solo su schermo molto largo */
@media (min-width: 56rem) { main.centered .finance-art { display: none; } }
@media (min-width: 62rem) {
    main.centered .box:has(.finance-art) { position: relative; }
    main.centered form:has(> .finance-art) { position: static; }
    main.centered .box .finance-art { display: flex; top: 50%; bottom: auto; left: calc(100% + 3rem); right: auto; height: 22rem; width: min(22rem, calc((100vw - 26rem) / 2 - 4rem)); transform: translateY(-50%); }
    main.centered .box .art-lock { left: calc(100% + 2.5rem); height: 28rem; width: min(28rem, calc((100vw - 26rem) / 2 - 3.5rem)); }   /* il lucchetto un po' più grande */
}
/* Giroconto: una moneta passa da un conto all'altro; il saldo di sinistra scende, quello di destra sale */
.fa-move circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-move text { font: 700 26px Roboto, sans-serif; fill: var(--ink); }
.fa-move { animation: fa-move 6s ease-in-out infinite; }
.fa-bal { fill: var(--ink); transform-box: fill-box; transform-origin: left center; }
.fa-bal-out { animation: fa-bal-out 6s ease-in-out infinite; }
.fa-bal-in { animation: fa-bal-in 6s ease-in-out infinite; }
.fa-arrow { stroke-linejoin: round; }
@keyframes fa-move { 0%, 10% { transform: translate(0, 0); opacity: 1; } 30% { transform: translate(60px, -40px); } 50% { transform: translate(128px, -48px); } 70%, 85% { transform: translate(256px, 0); opacity: 1; } 100% { transform: translate(256px, 0); opacity: 0; } }
@keyframes fa-bal-out { 0%, 10% { transform: scaleX(1); } 70%, 90% { transform: scaleX(.3); } 100% { transform: scaleX(1); } }
@keyframes fa-bal-in { 0%, 10% { transform: scaleX(.3); } 70%, 90% { transform: scaleX(1); } 100% { transform: scaleX(.3); } }
/* Portafoglio (entrata/uscita): una moneta «+» nera entra, una moneta «−» rossa esce; le monete passano dietro al portafoglio */
.fa-in circle, .fa-out circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.fa-in text, .fa-out text { font: 700 30px Roboto, sans-serif; fill: var(--ink); }
.fa-out circle { stroke: var(--red); } .fa-out text { fill: var(--red); }
.fa-in { animation: fa-in 6s ease-in-out infinite; }
.fa-out { animation: fa-out 6s ease-in-out infinite; }
@keyframes fa-in { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 40% { transform: translate(130px, 90px); opacity: 1; } 41%, 100% { transform: translate(130px, 90px); opacity: 0; } }
@keyframes fa-out { 0%, 50% { transform: translate(0, 0); opacity: 0; } 51% { opacity: 1; } 90% { transform: translate(160px, -20px); opacity: 1; } 100% { transform: translate(160px, -20px); opacity: 0; } }
/* Chi preferisce meno movimento vede il disegno fermo */
@media (prefers-reduced-motion: reduce) { .fa-in, .fa-out, .fa-move, .fa-bal-out, .fa-bal-in, .fa-bar, .fa-trend, .fa-coin, .fa-drop, .fa-pig, .fa-write, .fa-rewrite, .fa-pencil, .fa-lid, .fa-shackle, .fa-key, .fa-env, .fa-check { animation: none; } .fa-copy { animation: none; transform: translate(84px, 34px); } .fa-item { animation: none; opacity: 0; } .fa-drop { opacity: 0; } .fa-trend { stroke-dashoffset: 0; } }