/* Fade In Animation */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Fade In Slide Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Scale */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Applicazione delle animazioni con timing più naturale */
.hero-section h1 {
    opacity: 0;
    animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-section p {
    opacity: 0;
    animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.hero-image {
    opacity: 0;
    animation: fadeInScale 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

.quick-link-card {
    opacity: 0;
    animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Delay progressivo per le cards */
.quick-link-card:nth-child(1) { animation-delay: 0.3s; }
.quick-link-card:nth-child(2) { animation-delay: 0.5s; }
.quick-link-card:nth-child(3) { animation-delay: 0.7s; }

/* Classe generica per fade in */
.fadeIn {
    opacity: 0;
    animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Assicurati che gli elementi siano nascosti prima dell'animazione */
.animation-backwards {
    animation-fill-mode: backwards;
}

/* Previeni il flash degli elementi prima dell'animazione */
.hero-section h1,
.hero-section p,
.hero-image,
.quick-link-card {
    will-change: transform, opacity;
}