/* Logo animato nella prima schermata (a destra del titolo). */

/* il palco della prima schermata ora ospita il logo */
html body .hero__stage.lg-stage { display: block !important; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: auto !important; pointer-events: none; }
html body .hero__stage.ga-live-stage > .lg-wrap { display: block !important; }

.lg-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.lg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lg-fill { opacity: 1; }
.lg-linea { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* ogni regola ha !important perché il sito azzera le animazioni in generale */
  html body .lg-linea { stroke-dasharray: 1 !important; stroke-dashoffset: 1; opacity: 1; animation: lg-disegna 2.4s cubic-bezier(.5, 0, .2, 1) .2s 1 forwards !important; }
  html body .lg-fill { opacity: 0; animation: lg-riempi 1.1s ease 1.9s 1 forwards !important; }
  html body .lg-logo { animation: lg-galleggia 7s ease-in-out 3s infinite !important; }
  html body .lg-luce { animation: lg-riflesso 8s ease-in-out 3.6s infinite !important; }
  html body .lg-glow { animation: lg-respira 6s ease-in-out infinite !important; transform-origin: 203.5px 256px; }
  html body .lg-a1 { animation: lg-gira 90s linear infinite !important; transform-origin: 203.5px 256px; }
  html body .lg-a2 { opacity: 0; animation: lg-entra 1.4s ease 1.2s 1 forwards !important; }
  html body .lg-a3 { animation: lg-gira 22s linear infinite !important; transform-origin: 203.5px 256px; }
  html body .lg-orbita { animation: lg-gira 22s linear infinite !important; transform-origin: 203.5px 256px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-linea { opacity: 0; }
  .lg-fill { opacity: 1; }
}

@keyframes lg-disegna { 0% { stroke-dashoffset: 1; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lg-riempi { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lg-riflesso { 0% { transform: skewX(-18deg) translateX(0); opacity: 0; } 4% { opacity: 1; } 24% { transform: skewX(-18deg) translateX(780px); opacity: 1; } 28%, 100% { transform: skewX(-18deg) translateX(780px); opacity: 0; } }
@keyframes lg-respira { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes lg-gira { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  html body .hero__stage.lg-stage { max-width: 300px; margin: 28px 0 0; margin-inline: 0; }
}