/* ══════════════════════════════════════════════════════════════
   TRE ANIMAZIONI PER LA PAGINA D'INGRESSO — da scegliere.
   Si attiva una sola variante mettendo la classe sul <body>:
     anim-1  la pratica che avanza
     anim-2  il respiro della rete
     anim-3  l'ingresso in scena
   Nessuna libreria: solo CSS. Chi ha chiesto meno movimento al
   sistema operativo non vede niente (prefers-reduced-motion).
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1 · LA PRATICA CHE AVANZA ───────────
   Il filo dei quattro passi si riempie da solo e i nodi si accendono
   uno dopo l'altro, come una pratica che attraversa l'ufficio.
   Poi riparte. Racconta che cosa fa il programma, senza una parola. */
.anim-1 .lg-fatto{
  animation: a1-riempi 9s cubic-bezier(.65,0,.35,1) infinite;
}
.anim-1 .lg-nodo{ animation: a1-nodo 9s ease-in-out infinite; }
.anim-1 .lg-nodo.n1{ animation-delay: .4s }
.anim-1 .lg-nodo.n2{ animation-delay: 2.4s }
.anim-1 .lg-nodo.n3{ animation-delay: 4.4s }
.anim-1 .lg-nodo.n4{ animation-delay: 6.4s }
.anim-1 .lg-filo em{ animation: a1-testo 9s ease-in-out infinite; opacity:.45 }
.anim-1 .lg-filo em.e1{ animation-delay: .4s }
.anim-1 .lg-filo em.e2{ animation-delay: 2.4s }
.anim-1 .lg-filo em.e3{ animation-delay: 4.4s }
.anim-1 .lg-filo em.e4{ animation-delay: 6.4s }
@keyframes a1-riempi{
  0%   { width: 4% }
  22%  { width: 33% }
  47%  { width: 62% }
  72%  { width: 100% }
  92%  { width: 100%; opacity:1 }
  100% { width: 4%; opacity:.7 }
}
@keyframes a1-nodo{
  0%, 8%    { transform: scale(1);    box-shadow: 0 0 0 0 rgba(47,194,166,0) }
  12%       { transform: scale(1.45); box-shadow: 0 0 0 7px rgba(47,194,166,.26) }
  20%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(47,194,166,0) }
}
@keyframes a1-testo{
  0%, 8%    { opacity:.45 }
  14%, 70%  { opacity:1 }
  100%      { opacity:.45 }
}

/* ─────────── 2 · IL RESPIRO DELLA RETE ───────────
   Il marchio pulsa piano e una luce attraversa lo sfondo ogni tanto.
   Movimento lento e continuo: si nota appena, non distrae chi scrive
   la password. È la scelta più sobria delle tre. */
.anim-2 .lg-nodo-wm{
  animation: a2-pulsa 3.4s ease-in-out infinite;
}
.anim-2 .lg-lato::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(520px 320px at 20% 30%, rgba(47,194,166,.16), transparent 70%);
  animation: a2-luce 14s ease-in-out infinite;
  pointer-events:none;
}
.anim-2 .lg-wm{ animation: a2-sali 1.1s cubic-bezier(.22,1,.36,1) both }
.anim-2 .lg-claim{ animation: a2-sali 1.1s cubic-bezier(.22,1,.36,1) .12s both }
@keyframes a2-pulsa{
  0%,100% { transform: scale(1);    opacity:1 }
  50%     { transform: scale(1.22); opacity:.82 }
}
@keyframes a2-luce{
  0%,100% { transform: translate(0,0)        scale(1) }
  33%     { transform: translate(14%, 8%)    scale(1.15) }
  66%     { transform: translate(-8%, -6%)   scale(1.05) }
}
@keyframes a2-sali{
  from { opacity:0; transform: translateY(14px) }
  to   { opacity:1; transform: none }
}

/* ─────────── 3 · L'INGRESSO IN SCENA ───────────
   Tutto entra una volta sola quando la pagina si apre: il lato sinistro
   scorre da sinistra, il riquadro di accesso sale, i campi arrivano uno
   dopo l'altro. Poi la pagina sta ferma. Dà il senso di un prodotto
   curato senza muoversi per sempre sotto gli occhi. */
.anim-3 .lg-lato{ animation: a3-lato 900ms cubic-bezier(.22,1,.36,1) both }
.anim-3 .lg-scheda{  animation: a3-box  900ms cubic-bezier(.22,1,.36,1) 120ms both }
.anim-3 .lg-wm{     animation: a3-su 700ms cubic-bezier(.22,1,.36,1) 220ms both }
.anim-3 .lg-claim{  animation: a3-su 700ms cubic-bezier(.22,1,.36,1) 320ms both }
.anim-3 .lg-filo{   animation: a3-su 700ms cubic-bezier(.22,1,.36,1) 420ms both }
.anim-3 .lg-frase{  animation: a3-su 700ms cubic-bezier(.22,1,.36,1) 520ms both }
.anim-3 .lg-scheda h1{        animation: a3-su 600ms cubic-bezier(.22,1,.36,1) 340ms both }
.anim-3 .lg-scheda .lg-campo{    animation: a3-su 600ms cubic-bezier(.22,1,.36,1) 440ms both }
.anim-3 .lg-scheda .lg-campo+.campo{ animation-delay: 540ms }
.anim-3 .lg-scheda .lg-btn{      animation: a3-su 600ms cubic-bezier(.22,1,.36,1) 640ms both }
.anim-3 .lg-fatto{ animation: a3-filo 1.6s cubic-bezier(.65,0,.35,1) 600ms both }
@keyframes a3-lato{ from { opacity:0; transform: translateX(-26px) } to { opacity:1; transform:none } }
@keyframes a3-box { from { opacity:0; transform: translateY(26px) scale(.985) } to { opacity:1; transform:none } }
@keyframes a3-su  { from { opacity:0; transform: translateY(12px) } to { opacity:1; transform:none } }
@keyframes a3-filo{ from { width:4% } to { width:62% } }

/* Chi soffre il movimento, o lo ha disattivato nel sistema, non vede nulla. */
@media (prefers-reduced-motion: reduce){
  .anim-1 *, .anim-2 *, .anim-3 *{
    animation: none !important;
    transition: none !important;
  }
  .anim-2 .lg-lato::after{ animation: none }
}