/* =====================================================================
   Filippi Design Kit · ANIMAZIONI — i VERBI
   Ogni animazione dice cosa sta facendo il dato. Se il dato è zero,
   il verbo si ferma. Le animazioni "a colore" leggono --c (tripletta RGB).
   La corrispondenza con i nomi delle plance HA è nel README.
   ===================================================================== */

/* ---------- 1. Arrivare (una volta, al caricamento) ---------- */
@keyframes fd-arriva  { from { opacity: 0; transform: translateY(16px) } }               /* una scheda entra       */
@keyframes fd-affiora { from { opacity: 0; transform: translateY(10px) scale(.97) } }    /* un interruttore emerge */
@keyframes fd-sale    { from { opacity: 0; transform: translateY(8px) } }                /* un dato, una lettura   */
@keyframes fd-spunta  { from { opacity: 0; transform: translateY(8px) scale(.94) } }     /* una tessera del mosaico*/
@keyframes fd-sboccia { from { opacity: 0; transform: scale(.4) } }                      /* una cella di heatmap   */

/* ---------- 2. Riempire (il valore raggiunge la sua misura) ---------- */
@keyframes fd-cresce  { from { transform: scaleX(0) } }               /* barra orizzontale — transform-origin:left   */
@keyframes fd-lievita { from { transform: scaleY(0) } }               /* livello verticale — transform-origin:bottom */
@keyframes fd-riempie { from { width: 0 } }                           /* riempimento in larghezza                    */
@keyframes fd-scorre  { from { left: 0 } }                            /* cursore che raggiunge il valore             */
@keyframes fd-avvolge { from { stroke-dasharray: 0 100 } }            /* quadrante SVG (pathLength=100)              */
@keyframes fd-traccia { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }  /* linea (pathLength=1)     */
@keyframes fd-colma   { from { height: 0 } }                          /* liquido che sale al suo livello             */

/* ---------- 3. Essere vivo (acceso, attivo, presente) ---------- */
@keyframes fd-pulsa   { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--c),.6) } 60% { box-shadow: 0 0 0 8px rgba(var(--c),0) } }  /* icona accesa  */
@keyframes fd-batte   { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--c),.8) } 50% { box-shadow: 0 0 0 5px rgba(var(--c),0) } }  /* spia di stato */
@keyframes fd-luccica { 0%,100% { opacity: .75 } 50% { opacity: 1 } }                                                    /* riflesso      */
@keyframes fd-respira { 0%,100% { transform: scale(.88); opacity: .7 } 50% { transform: scale(1.08); opacity: 1 } }      /* alone         */
@keyframes fd-deriva  { 0% { transform: translate(0,0) rotate(0) } 50% { transform: translate(-7%,5%) rotate(16deg) } 100% { transform: translate(5%,-4%) rotate(-10deg) } }  /* atmosfera, 16s alternate */
@keyframes fd-brilla  { 0%,100% { filter: none } 50% { filter: drop-shadow(0 0 4px var(--fd-oro-riflesso)) } }           /* glifo acceso  */

/* ---------- 4. Girare (velocità = dato, vedi ritmo() in dati.js) ---------- */
@keyframes fd-gira { to { transform: rotate(360deg) } }

/* ---------- 5. Fenomeni ---------- */
@keyframes fd-scarica  { 0%,100% { transform: scale(1); filter: none } 50% { transform: scale(1.18); filter: drop-shadow(0 0 3px var(--fd-flusso)) } }  /* energia: più carico, più veloce */
@keyframes fd-arde     { 0%,100% { transform: scaleY(1) skewX(0) } 33% { transform: scaleY(1.08) skewX(3deg) } 66% { transform: scaleY(.95) skewX(-3deg) } }  /* calore attivo */
@keyframes fd-soffia   { 0% { stroke-dashoffset: 40; opacity: 0 } 30% { opacity: .9 } 100% { stroke-dashoffset: -40; opacity: 0 } }  /* linee d'aria   */
@keyframes fd-suona    { 0%,100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }                                         /* equalizzatore  */
@keyframes fd-irradia  { from { transform: scale(.3); opacity: .9 } to { transform: scale(2.6); opacity: 0 } }                     /* impulso, onda  */
@keyframes fd-ondeggia { from { -webkit-mask-position: 0 0; mask-position: 0 0 } to { -webkit-mask-position: -120px 0; mask-position: -120px 0 } }  /* superficie liquida */
@keyframes fd-ribolle  { 0% { transform: translateY(0) scale(.6); opacity: 0 } 20% { opacity: .9 } 100% { transform: translateY(-60px) scale(1); opacity: 0 } }  /* bollicine */
@keyframes fd-evapora  { 0% { transform: translateY(4px); opacity: 0 } 40% { opacity: .9 } 100% { transform: translateY(-10px); opacity: 0 } }  /* vapore */
@keyframes fd-vibra    { 0%,100% { transform: translate(0,0) } 25% { transform: translate(.6px,-.4px) } 75% { transform: translate(-.6px,.4px) } }  /* lavoro meccanico */

/* ---------- 6. Avvisare ---------- */
@keyframes fd-allerta { 0%,100% { background: rgba(var(--fd-allerta-rgb),.10) } 50% { background: rgba(var(--fd-allerta-rgb),.24) } }  /* situazione da correggere */
@keyframes fd-avverte { 0%,100% { box-shadow: 0 0 0 0 rgba(241,142,0,.55) } 50% { box-shadow: 0 0 0 7px rgba(241,142,0,0) } }          /* oltre la soglia */

/* ---------- 7. Rispondere al gesto ---------- */
@keyframes fd-saltella { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-4px) rotate(-6deg) } 70% { transform: translateY(0) rotate(4deg) } }  /* hover su un comando */

/* ---------- Classi d'uso ---------- */
.fd-anim-gira    { animation: fd-gira var(--fd-giro, 1s) linear infinite }
.fd-anim-scarica { animation: fd-scarica 1.2s ease-in-out infinite }
.fd-anim-arde    { animation: fd-arde .9s ease-in-out infinite; transform-origin: 50% 90% }
.fd-anim-brilla  { animation: fd-brilla 2.4s ease-in-out infinite }
.fd-anim-respira { animation: fd-respira 4s ease-in-out infinite }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}