/* --- Reset e Impostazioni Globali --- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.6;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- Il contenitore principale --- */
.container {
    max-width: 600px;
    margin: 20px;
    padding: 40px; 
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* --- Sezione Logo --- */
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.brand-logo {
    max-width: 300px;
    height: auto;
}

/* --- Sezione Messaggio --- */
.messaggio {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.messaggio h2 {
    font-family: 'Merriweather', serif;
    font-size: 1.6rem;
    color: #222;
}

/* --- Sezione Contatti --- */
.contatti {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.contatti p {
    margin-bottom: 5px;
    font-size: 0.9rem;
}


/* --- Sezione Social Links (MODIFICATA) --- */
.social-links {
    margin-top: 20px;
}

.social-links a {
    font-size: 2.5rem;
    margin: 0 12px;
    
    /* 1. Colore base GRIGIO (SENZA !important) */
    /* Questo permette alle animazioni di sovrascriverlo al caricamento */
    color: #b0b0b0; 
    
    text-decoration: none !important; 
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
    transform: scale(1.1);
    text-decoration: none !important; 
}


/* --- 2. Colori HOVER (CON !important) --- */
/* !important qui serve per sovrascrivere l'animazione dopo che è finita */
    
.social-links a[href*="instagram.com"]:hover {
    color: #E1306C !important;
}
.social-links a[href*="facebook.com"]:hover {
    color: #1877F2 !important;
}
.social-links a[href*="tiktok.com"]:hover {
    color: #00F2EA !important;
}
.social-links a[href*="mailto:"]:hover {
    color: #007BFF !important;
}

/* --- 3. Applicazione delle NUOVE animazioni al caricamento --- */

/* Applichiamo l'animazione specifica a ciascuna icona */
.social-links a[href*="instagram.com"] {
    animation: pulseInstagram 2.5s ease-out 1s forwards;
}
.social-links a[href*="facebook.com"] {
    animation: pulseFacebook 2.5s ease-out 1s forwards;
}
.social-links a[href*="tiktok.com"] {
    animation: pulseTikTok 2.5s ease-out 1s forwards;
}
.social-links a[href*="mailto:"] {
    animation: pulseEmail 2.5s ease-out 1s forwards;
}


/* --- Animazioni 'Fade In' generali --- */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fadeInDown {
    animation: fadeInDown 1s ease-out forwards;
}
.fadeInUp {
    animation: fadeInUp 1s ease-out forwards 0.5s;
}
.fadeInDelay {
    /* Questa anima il contenitore .contatti */
    animation: fadeInUp 1s ease-out forwards 1s;
}


/* ======================================================= */
/* --- 4. NUOVE @keyframes per l'effetto colore icone --- */
/* ======================================================= */

/* Spiegazione:
   - Durata: 2.5s (definita sopra)
   - Ritardo: 1s (definito sopra, per sincronizzarsi con fadeInUp)
   - 0% - 40%: L'icona ha il colore del brand (mentre sta salendo e diventando visibile)
   - 100%: L'icona ha il colore grigio finale
   - 'forwards' (definito sopra) mantiene lo stato finale (grigio)
*/

@keyframes pulseInstagram {
    0%, 40% { color: #E1306C; }
    100% { color: #b0b0b0; }
}
@keyframes pulseFacebook {
    0%, 40% { color: #1877F2; }
    100% { color: #b0b0b0; }
}
@keyframes pulseTikTok {
    0%, 40% { color: #00F2EA; }
    100% { color: #b0b0b0; }
}
@keyframes pulseEmail {
    0%, 40% { color: #007BFF; }
    100% { color: #b0b0b0; }
}


/* ======================================================= */
/* --- SEZIONE RESPONSIVE (Invariata) --- */
/* ======================================================= */

@media (max-width: 480px) {

    .container {
        padding: 30px 20px; 
    }

    .brand-logo {
        max-width: 250px;
    }

    .messaggio h2 {
        font-size: 1.4rem;
    }

    .social-links a {
        font-size: 2rem; 
        margin: 0 8px;
    }
}