/* style.css */
:root {
    /* Palette Oro ed eleganti sfumature Rame */
    --brand-50: #faf8f5;
    --brand-100: #f2ebd9;
    --brand-200: #e6d6b3;
    --brand-300: #d6bc8a;
    --brand-400: #c5a059; /* Oro elegante / Rame chiaro */
    --brand-500: #b38536; /* Accento dorato più intenso per gli hover */
    --brand-600: #936526; /* Rame scuro */
    
    /* Sfondi scuri mantenuti per garantire il contrasto con i testi bianchi */
    --brand-700: #1e242b; 
    --brand-800: #14191e;
    --brand-900: #0b0d10;
}
/* Sottile effetto di transizione per il blur della navbar */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* --- Classi per Animazioni allo Scroll --- */
.reveal {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1.2s cubic-bezier(0.5, 0, 0, 1); 
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Varianti di ritardo per effetti a cascata sulle griglie */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }

/* --- Animazione Statistiche (Cerchi) --- */
.stat-circle {
    /* Nuovo perimetro basato sul raggio di 49px */
    stroke-dasharray: 308;
    stroke-dashoffset: 308;
    /* Curva "ease-out" fluida che decelera dolcemente insieme ai numeri */
    transition: stroke-dashoffset 2s ease-out;
}

.stat-circle.animate {
    stroke-dashoffset: 0;
}

/* --- Correzioni Layout Mobile Hero --- */
@media (max-width: 768px) {
    .hero-content-lift {
        margin-bottom: 5vh;
        /* Rimossa la sovrascrittura di margin-top per evitare che il testo in alto finisca sotto l'header */
    }
    .hero-gradient-shrink {
        height: 6rem !important; /* Dimezza l'altezza del gradiente su mobile */
    }
}

/* --- Animazione Hero Onda Fluttuante --- */
@keyframes floating-wave {
    0% { transform: scale(1.05) translate(0, 0) rotate(0deg); }
    33% { transform: scale(1.1) translate(1.5%, 1%) rotate(0.5deg); }
    66% { transform: scale(1.08) translate(-1%, 2%) rotate(-0.5deg); }
    100% { transform: scale(1.05) translate(0, 0) rotate(0deg); }
}

.animate-floating-wave {
    /* Un ciclo di 25 secondi, infinito e molto morbido */
    animation: floating-wave 25s ease-in-out infinite;
}