/* lianware.com in manutenzione: «Messa in squadra» (war room del 28/10/2026, L:\WarRoom\home-manutenzione\DECISIONE.md).
   Lo stato di base è il disegno finito: se l'animazione non parte, la pagina è comunque completa. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-wght-normal.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
:root{color-scheme:light;--testo:#1B1F1E;--testo-2:#4F5753;--etichetta:#626D69;--link:#006735;--link-hover:#004F28;--filetto:#D3D8D5;
  --arrivo:cubic-bezier(.16,1,.3,1);--margine:clamp(1rem,4vw,4rem)}
*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:var(--testo);font-family:"Archivo",Arial,sans-serif;font-size:1.0625rem;line-height:1.55;font-synthesis:none}
.wrap{max-width:75rem;margin:0 auto;padding:1.25rem var(--margine) 1.5rem;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.testata svg.logo{height:28px;width:auto;display:block}
.testo{max-width:42rem;margin-top:clamp(2rem,6vh,4.5rem)}
.etichetta{font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--etichetta);margin:0 0 .75rem}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);line-height:1.12;font-weight:600;letter-spacing:-.012em;margin:0 0 1rem;max-width:18ch;text-wrap:balance}
.riga{font-size:1.25rem;line-height:1.45;color:var(--testo-2);margin:0 0 .75rem;max-width:34rem}
.contatto{margin:0;color:var(--testo-2);max-width:36rem}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--testo);outline-offset:2px}
footer{margin-top:auto;border-top:1px solid var(--filetto);padding-top:1rem;font-size:.8125rem;line-height:1.5;color:var(--testo-2);font-variant-numeric:tabular-nums}
footer p{margin:0 0 .5rem}

/* il disegno */
.squadra{display:block;width:100%;height:auto;margin:clamp(1.5rem,4vh,3rem) 0}
.squadra.stretto{display:none}
.squadra text{font-family:"Archivo",Arial,sans-serif;font-weight:500;font-size:17px;letter-spacing:.08em;fill:var(--testo-2)}
.squadra .sito-fuori text{fill:var(--etichetta)}
.squadra .pezzo,.squadra .sito-fuori,.squadra .nodo,.squadra .punto,.squadra .rassegna{transform-box:fill-box;transform-origin:center}
.squadra .sito-fuori{transform:rotate(7deg)}
.squadra .rassegna,.squadra .punto{opacity:0}
.squadra .flusso{stroke-dasharray:1;stroke-dashoffset:0}
@media (max-width:47.99rem){
  .squadra.largo{display:none}
  .squadra.stretto{display:block;max-height:74svh;margin-inline:auto}
  .squadra text{font-size:16px}
}
/* dove sono i pezzi prima di mettersi in squadra */
.largo .p1{--x:-70px;--y:150px;--r:-9deg}.largo .p2{--x:50px;--y:-120px;--r:7deg}.largo .p3{--x:-40px;--y:120px;--r:-6deg}.largo .p4{--x:60px;--y:-110px;--r:10deg}
.stretto .p1{--x:90px;--y:20px;--r:-8deg}.stretto .p2{--x:-20px;--y:10px;--r:6deg}.stretto .p3{--x:110px;--y:-10px;--r:-5deg}.stretto .p4{--x:30px;--y:15px;--r:9deg}

/* la sequenza (secondi): griglia 0,2 · pezzi sparsi 0,3 · rassegna 0,9-2,7 · in squadra 2,9-4,4 · flusso 4,5-6,1 · nodo 6,1 · punto ogni 7 s, 6 volte */
@media (prefers-reduced-motion:no-preference){
  html:not(.gia-visto) .squadra.via .griglia{animation:appare .6s var(--arrivo) .2s both}
  html:not(.gia-visto) .squadra.via .sito-fuori{animation:appare .4s var(--arrivo) .3s both}
  html:not(.gia-visto) .squadra.via .pezzo{animation:appare .4s var(--arrivo) .3s both,in-squadra .64s var(--arrivo) both}
  html:not(.gia-visto) .squadra.via .p1{animation-delay:.3s,2.9s}
  html:not(.gia-visto) .squadra.via .p2{animation-delay:.3s,3.18s}
  html:not(.gia-visto) .squadra.via .p3{animation-delay:.3s,3.46s}
  html:not(.gia-visto) .squadra.via .p4{animation-delay:.3s,3.74s}
  html:not(.gia-visto) .largo.via .rassegna{animation:rassegna-x 1.8s cubic-bezier(.65,0,.35,1) .9s both}
  html:not(.gia-visto) .stretto.via .rassegna{animation:rassegna-y 1.8s cubic-bezier(.65,0,.35,1) .9s both}
  html:not(.gia-visto) .squadra.via .flusso{animation:disegna 1.6s cubic-bezier(.65,0,.35,1) 4.5s both}
  html:not(.gia-visto) .squadra.via .nodo{animation:posa .3s var(--arrivo) 6.1s both}
  .largo.via .punto{animation:viaggio-x 7s linear 6.6s 6 both}
  .stretto.via .punto{animation:viaggio-y 7s linear 6.6s 6 both}
  html.gia-visto .largo.via .punto{animation-delay:1s}
  html.gia-visto .stretto.via .punto{animation-delay:1s}
  /* prima che il disegno entri nello schermo non si mostra, così la sequenza parte da capo */
  html.js:not(.gia-visto) .squadra:not(.via){visibility:hidden}
  /* scheda nascosta: tutto in pausa, non consuma */
  html.ferma .squadra *{animation-play-state:paused}
}
@keyframes appare{from{opacity:0}to{opacity:1}}
@keyframes in-squadra{from{transform:translate(var(--x),var(--y)) rotate(var(--r))}to{transform:none}}
@keyframes rassegna-x{0%{transform:translateX(40px);opacity:0}12%{opacity:.55}88%{opacity:.55}100%{transform:translateX(1150px);opacity:0}}
@keyframes rassegna-y{0%{transform:translateY(20px);opacity:0}12%{opacity:.55}88%{opacity:.55}100%{transform:translateY(560px);opacity:0}}
@keyframes disegna{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes posa{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes viaggio-x{0%{transform:translateX(0);opacity:0}3%{opacity:1}26%{opacity:1}30%{transform:translateX(1080px);opacity:0}100%{transform:translateX(1080px);opacity:0}}
@keyframes viaggio-y{0%{transform:translateY(0);opacity:0}3%{opacity:1}26%{opacity:1}30%{transform:translateY(504px);opacity:0}100%{transform:translateY(504px);opacity:0}}
/* movimento ridotto: il disegno finito compare con una dissolvenza, poi il nodo; niente pezzi in volo, niente punto che viaggia */
@media (prefers-reduced-motion:reduce){
  .squadra{animation:appare .4s linear both}
  .squadra .nodo{animation:appare .3s linear .4s both}
}
@media (forced-colors:active){.squadra .nodo{forced-color-adjust:none}}