/**
 * Décorations animées pour les thèmes saisonniers
 */

/* Conteneur principal des décorations */
.decorations-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden !important;
}

/* Élément de décoration générique */
.decoration-element {
    position: absolute;
    top: -50px;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* Animation flocons de neige (Noël) */
.decoration-snowflakes {
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Animation Halloween (citrouilles, fantômes) */
.decoration-halloween {
    animation: halloween-float linear infinite;
}

@keyframes halloween-float {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        transform: translateY(50vh) translateX(30px) rotate(180deg);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(-20px) rotate(360deg);
        opacity: 0;
    }
}

/* Animation cœurs (Saint-Valentin) */
.decoration-hearts {
    animation: hearts-float linear infinite;
}

@keyframes hearts-float {
    0% {
        transform: translateY(-50px) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) scale(1) rotate(15deg);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) scale(0.5) rotate(-15deg);
        opacity: 0;
    }
}

/* Animation Pâques (œufs, lapins) */
.decoration-easter {
    animation: easter-bounce linear infinite;
}

@keyframes easter-bounce {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25%, 75% {
        transform: translateY(25vh) rotate(10deg);
    }
    50% {
        transform: translateY(50vh) rotate(-10deg);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(20deg);
        opacity: 0;
    }
}

/* Optimisation mobile : désactiver les décorations sur petits écrans */
@media (max-width: 768px) {
    .decorations-container {
        display: none;
    }
}

/* Mode sombre : ajuster l'opacité des décorations */
body.dark-mode .decoration-element {
    opacity: 0.5;
}