/* ==========================================================================
   ANIMAZIONE BACKGROUND GMDE - STILI CSS
   ========================================================================== */

/* 1. IMPOSTAZIONI GENERALI (Per l'elemento SVG principale)
   -------------------------------------------------------------------------- */
.svg-gmde-bg {
    width: 100%;
    height: auto;
    display: block;
    background-color: #1a1d20; /* Colore scuro di sfondo originale */
    overflow: hidden;
}

/* 2. LOGO CENTRALE & SCRITTA "GMDE"
   -------------------------------------------------------------------------- */
.logo-testo {
    opacity: 0;
    transform: translateY(10px);
    transform-origin: center;
    /* Appare con un leggero movimento verso l'alto dopo 0.5 secondi */
    animation: fadeUpLogo 1.2s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes fadeUpLogo {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. LA LINEA ROSSA SOTTO IL LOGO (Effetto tracciamento/disegno)
   -------------------------------------------------------------------------- */
.linea-rossa {
    /* dasharray e dashoffset simulano la linea "nascosta" inizialmente.
       Se la linea è più lunga nel tuo file, aumenta il valore (es. 1500) */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: disegnaLineaRossa 1.8s ease-in-out forwards;
    animation-delay: 0.2s;
}

@keyframes disegnaLineaRossa {
    to {
        stroke-dashoffset: 0;
    }
}

/* 4. RETE DI NODI E CONNESSIONI (Sfondo centrale)
   -------------------------------------------------------------------------- */
/* I pallini (nodi) */
.nodo {
    transform-origin: center;
    opacity: 0.3;
    animation: pulsaNodo 4s ease-in-out infinite alternate;
}

/* Sfalsiamo i tempi di animazione dei nodi per renderli naturali ed asincroni */
.nodo:nth-child(2n) {
    animation-delay: 1s;
    animation-duration: 3.5s;
}
.nodo:nth-child(3n) {
    animation-delay: 2s;
    animation-duration: 5s;
}

@keyframes pulsaNodo {
    0% {
        transform: scale(0.85);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.25);
        opacity: 0.9;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
    }
}

/* Le linee sottili che uniscono i nodi */
.linea-connessione {
    opacity: 0.15;
    animation: dissolvenzaLinee 6s ease-in-out infinite alternate;
}

.linea-connessione:nth-child(2n) {
    animation-delay: 1.5s;
}

@keyframes dissolvenzaLinee {
    0% { opacity: 0.08; }
    100% { opacity: 0.25; }
}

/* 5. GRIGLIE E TABELLE DI DATI LATERALI (Effetto Tech/Terminal)
   -------------------------------------------------------------------------- */
.griglia-dati {
    opacity: 0;
    animation: sfarfallioTerminal 2s ease-out forwards;
    animation-delay: 1.2s; /* Partono dopo la comparsa del logo */
}

/* Se hai più griglie (sinistra alta, sinistra bassa, destra), puoi sfalsarle */
.griglia-dati.destra {
    animation-delay: 1.5s;
}
.griglia-dati.bassa {
    animation-delay: 1.8s;
}

@keyframes sfarfallioTerminal {
    0%   { opacity: 0; }
    5%   { opacity: 0.2; }
    10%  { opacity: 0.05; }
    15%  { opacity: 0.3; }
    20%  { opacity: 0.1; }
    30%  { opacity: 0.25; }
    100% { opacity: 0.12; } /* Rimangono visibili in background ma molto soft */
}

/* 6. TESTO IN BASSO "GMDE since 1993 — 2026"
   -------------------------------------------------------------------------- */
.testo-footer {
    opacity: 0;
    animation: fadeInGenerico 1.5s ease-out forwards;
    animation-delay: 2s; /* Ultimo elemento ad apparire */
}

@keyframes fadeInGenerico {
    to { opacity: 0.4; } /* Opacità ridotta per stile minimal */
}