/* ITALMEDIA — logo animato (footer). Richiamato da assets/js/logo-anim.js
   Colori: --la-ink = scritta e guide, --la-bg = fondo dietro i nodi della griglia. */
.la{ --la-ink:#f2f0ea; --la-bg:rgb(33,29,29); --la-back:cubic-bezier(.34,1.56,.64,1);
  display:block; width:100%; height:auto; overflow:visible }
.logo-anim{ contain:layout paint;   /* niente livello forzato: con will-change il browser ridisegnava il livello migliaia di volte e la pagina si bloccava */
  display:block; width:min(100%, 32rem); margin:0 0 .6rem }
.logo-anim > img{ height:4rem; width:auto; display:block; margin:1rem 0 0 .9rem }   /* logo statico, finche' il JS non lo sostituisce */

/* ---------- 0. il foglio di progetto: le guide si stendono, poi su di esse nasce la scritta ---------- */
.la .gd{ stroke:var(--la-ink); stroke-width:1px; vector-effect:non-scaling-stroke; opacity:.3; transform-box:fill-box }
/* le guide si tracciano (non si scalano da zero: Chrome ingrandiva il livello a dismisura e la pagina si bloccava) */
.la .gh, .la .gv{ stroke-dasharray:1 1; stroke-dashoffset:1 }
.la .nd{ fill:var(--la-bg); stroke:var(--la-ink); stroke-opacity:.45; stroke-width:1px; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:50% 50%; transform:scale(.02); opacity:0 }
.la .guides{ opacity:1 }
.la .xh{ transform-box:fill-box; transform-origin:50% 50%; transform:scale(.02) rotate(-90deg); opacity:0 }
.la .xc{ fill:none; stroke-dasharray:1.2 1.6; opacity:.4 }
.la .xl{ opacity:.5 }
.la.go .xh{ animation:la-xin .8s cubic-bezier(.3,.9,.3,1) var(--d) forwards, la-on 0s linear var(--d) forwards }
@keyframes la-xin{ to{ transform:scale(1) rotate(0deg) } }
@keyframes la-xout{ from{ transform:scale(1) rotate(0deg) } to{ transform:scale(0) rotate(90deg) } }
.la.go .gh{ animation:la-gx .9s cubic-bezier(.6,0,.2,1) var(--d) forwards }
.la.go .gv{ animation:la-gy .9s cubic-bezier(.6,0,.2,1) var(--d) forwards }
.la.go .nd{ animation:la-pop .35s var(--la-back) var(--d) forwards, la-on 0s linear var(--d) forwards }
@keyframes la-on{ to{ opacity:1 } }
.la.go .guides{ animation:la-gOut .9s ease 5.3s forwards }        /* a logo finito il progetto si ritira */
@keyframes la-gx{ to{ stroke-dashoffset:0 } }
@keyframes la-gy{ to{ stroke-dashoffset:0 } }
@keyframes la-gOut{ to{ opacity:0 } }
/* in uscita la griglia non c'e': torna solo all'inizio del giro successivo */
.la.out .guides, .la.rest .guides{ opacity:0 }
@keyframes la-gIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes la-gxo{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }
@keyframes la-gyo{ from{ transform:scaleY(1) } to{ transform:scaleY(0) } }

/* ---------- 1. la scritta si forma: prima il contorno, tracciato come a mano, poi si riempie da sinistra ---------- */
.la .word-line{ fill:none; stroke:var(--la-ink); stroke-width:1.3px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:1 }
.la .word-fill{ fill:var(--la-ink) }
.la .wf{ opacity:0; transform-box:fill-box; transform-origin:50% 60%; transform:scale(.985) }   /* riempimento: solo opacita' e scala, leggerissimo da disegnare */
.la.go .word-line{ animation:la-draw 2.2s cubic-bezier(.45,0,.25,1) 1.40s forwards, la-lineOut .6s ease 4.00s forwards }
.la.go .wf{ animation:la-fillIn .9s cubic-bezier(.3,.9,.3,1) 3.40s forwards }
@keyframes la-draw{ to{ stroke-dashoffset:0 } }
@keyframes la-fan{ to{ stroke-dashoffset:.47 } }
@keyframes la-lineOut{ to{ opacity:0 } }
@keyframes la-fillIn{ to{ opacity:1; transform:none } }

/* ---------- 2. il bersaglio "poppa" sul puntino della i: anello, disco, centro ---------- */
.la .tg{ transform-box:fill-box; transform-origin:50% 50%; transform:scale(.02); opacity:0 }
.la.go .tg-ring{ animation:la-pop .55s var(--la-back) 3.15s forwards, la-on 0s linear 3.15s forwards }
.la.go .tg-disc{ animation:la-pop .5s var(--la-back) 3.24s forwards, la-on 0s linear 3.24s forwards }
.la.go .tg-dot{ animation:la-pop .5s var(--la-back) 3.34s forwards, la-on 0s linear 3.34s forwards }
@keyframes la-pop{ to{ transform:scale(1) } }
/* onda quando la scia lo raggiunge */
.la .wave{ fill:none; stroke:#008e86; stroke-width:.7; transform-box:fill-box; transform-origin:50% 50%; opacity:0 }
.la.go .wave{ animation:la-wave 1s ease-out 5.30s forwards }
@keyframes la-wave{ 0%{ opacity:.9; transform:scale(1) } 100%{ opacity:0; transform:scale(2.6) } }
.la.go .tg-all{ animation:la-hit .55s var(--la-back) 5.25s }
.la .tg-all{ transform-box:fill-box; transform-origin:50% 50% }
@keyframes la-hit{ 0%{ transform:scale(1) } 40%{ transform:scale(1.22) } 100%{ transform:scale(1) } }

/* ---------- 3. la scia tricolore parte dal basso, gira e sale oltre il bersaglio ---------- */
.la .trail{ fill:none; stroke:#fff; stroke-width:120; stroke-dasharray:1; stroke-dashoffset:1 }
.la.go .trail.g{ animation:la-fan 1.5s cubic-bezier(.4,0,.1,1) 4.25s forwards }
.la.go .trail.w{ animation:la-fan 1.5s cubic-bezier(.4,0,.1,1) 4.37s forwards }
.la.go .trail.r{ animation:la-fan 1.5s cubic-bezier(.4,0,.1,1) 4.49s forwards }

/* ---------- USCITA: non un riavvolgimento, ma la scia che parte e si porta via tutto ---------- */
/* 1. la scia tricolore scatta in avanti: la coda rincorre la testa ed esce oltre il bersaglio */
.la.out .trail.r{ animation:la-fanOut .8s cubic-bezier(.6,0,.3,1) 0s both }
.la.out .trail.w{ animation:la-fanOut .8s cubic-bezier(.6,0,.3,1) .09s both }
.la.out .trail.g{ animation:la-fanOut .8s cubic-bezier(.6,0,.3,1) .18s both }
@keyframes la-fanOut{ from{ stroke-dasharray:.53 1; stroke-dashoffset:0 } to{ stroke-dasharray:0 1; stroke-dashoffset:-.53 } }
/* 2. il bersaglio, attraversato dalla scia, gira su se stesso e si chiude dal centro verso l'anello */
.la.out .tg-all{ animation:la-spin 1s cubic-bezier(.5,0,.2,1) .55s both }
@keyframes la-spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.la.out .tg-dot{ animation:la-unpop .4s cubic-bezier(.5,0,.8,.4) .85s both }
.la.out .tg-disc{ animation:la-unpop .4s cubic-bezier(.5,0,.8,.4) .97s both }
.la.out .tg-ring{ animation:la-unpop .45s cubic-bezier(.5,0,.8,.4) 1.09s both }
@keyframes la-unpop{ from{ transform:scale(1) } to{ transform:scale(0) } }
/* 3. la scritta si svuota verso il cuore delle lettere e resta il solo contorno... */
.la.out .word-line{ animation:la-lineIn .5s ease .7s both, la-undraw 2s cubic-bezier(.45,0,.25,1) 1.7s forwards }
@keyframes la-lineIn{ from{ opacity:0; stroke-dashoffset:0 } to{ opacity:1; stroke-dashoffset:0 } }
.la.out .wf{ animation:la-fillOut .8s cubic-bezier(.6,0,.6,1) .95s both }
@keyframes la-fillOut{ from{ opacity:1; transform:none } to{ opacity:0; transform:scale(.985) } }
/* 4. ...che la penna cancella proseguendo nello stesso verso in cui l'aveva tracciato */
@keyframes la-undraw{ from{ stroke-dashoffset:0; opacity:1 } to{ stroke-dashoffset:-1; opacity:1 } }

@media (prefers-reduced-motion:reduce){
  .la .word-line{ display:none } .la .wf{ opacity:1; transform:none } .la .tg{ transform:none; opacity:1 } .la .guides{ display:none } .la .trail{ stroke-dashoffset:.47 } .la.go *, .la.out *{ animation:none !important }
}

/* scia: il ventaglio colorato e' ritagliato sulla forma della scia (clip-path), piu' leggero di una maschera, soprattutto su Safari */
.la .trail{ stroke-linecap:butt }
/* a entrata finita: via guide, contorno e onda; resta il logo fermo */
.la.done .guides, .la.done .word-line, .la.done .wave{ display:none }
.la.done *{ animation:none !important }
.la.done .wf{ opacity:1; transform:none } .la.done .tg{ transform:none; opacity:1 } .la.done .trail{ stroke-dashoffset:.47 }