@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(200px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

.fade-in {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}

.logo-animation {
    animation: slideUp 1000ms ease-out forwards;
}

/* Cache la scrollbar sur les navigateurs Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    display: none;
}

/* Cache la scrollbar sur Firefox */
html {
    scrollbar-width: none;
}

/* Désactive le scroll horizontal (au cas où) */
body {
    overflow-x: hidden;
}

/* Appliquer le mode de fusion Multiply */
#product-overlay svg .color-change {
    mix-blend-mode: multiply;
    fill: none; /* Transparence par défaut */
}


#product-overlay svg {
    opacity: 0; /* Transparence par défaut pour l'élément SVG */
    transition: opacity 1s ease-in-out; /* Effet de transition pour l'apparition */
}

#product-overlay.loaded svg {
    opacity: 1; /* Rendre le SVG visible après son chargement */
}