@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98); /* Subtle zoom-in effect */
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. Special Keyframes for Italy to preserve its 50px offset */
@keyframes fadeInItaly {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(50px) scale(1);
    }
}

@keyframes fadeInItalyMobile {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(25px) scale(1);
    }
}

#tires-spain-dni, 
#tires-italy-dni,
#solargis-dni-scale {
    height: auto;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0; /* Keeps images hidden until their specific animation starts */
}

/* --- THE SEQUENCE LOGIC --- */

/* 1. Spain loads first */
#tires-spain-dni {
    animation-name: fadeIn;
    animation-delay: 0.1s; 
}

/* 2. Italy loads second */
#tires-italy-dni {
    transform: translateY(50px);
    animation-name: fadeInItaly;
    animation-delay: 0.4s; /* Waits for Spain to finish filling in */
}

/* 3. Scale loads last */
#solargis-dni-scale {
    flex-basis: 100%;          
    max-width: max-content;    
    margin-top: 70px;          
    animation-name: fadeIn;
    animation-delay: 0.7s; /* Waits for Italy to finish filling in */
}