/* path : decorations.css */
/* Décorations de fond communes à toutes les pages */

/* Wreath decoration */
.wreath {
    position: fixed;
    pointer-events: none;
    z-index: 5;
}

.wreath-left {
    left: -8%;
    top: 45%;
    transform: translateY(-50%) rotate(-5deg);
    width: 35vw;
    max-width: 380px;
}

.wreath-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%) scaleX(-1) rotate(3deg);
    width: 22vw;
    max-width: 250px;
}

/* Animation pour première visite */
.wreath.animate {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
}

.wreath-left.animate {
    animation: revealWreathLeft 2.8s ease-out forwards, wreathSwayLeft 7s ease-in-out 2.8s infinite;
}

.wreath-right.animate {
    animation: revealWreathRight 2.2s ease-out 0.5s forwards, wreathSwayRight 9s ease-in-out 2.7s infinite;
}

/* Pas d'animation pour visites suivantes */
.wreath.no-animate {
    opacity: var(--wreath-opacity, 0.7);
    clip-path: none;
}

.wreath-left.no-animate {
    animation: wreathSwayLeft 7s ease-in-out infinite;
}

.wreath-right.no-animate {
    opacity: calc(var(--wreath-opacity, 0.7) * 0.9);
    animation: wreathSwayRight 9s ease-in-out infinite;
}

@keyframes revealWreathLeft {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    30% {
        opacity: 0.3;
    }
    100% {
        opacity: var(--wreath-opacity, 0.75);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes revealWreathRight {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    25% {
        opacity: 0.25;
    }
    100% {
        opacity: calc(var(--wreath-opacity, 0.75) * 0.9);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wreathSwayLeft {
    0%, 100% { transform: translateY(-50%) rotate(-5deg); }
    50% { transform: translateY(-50%) rotate(-2deg); }
}

@keyframes wreathSwayRight {
    0%, 100% { transform: translateY(-50%) scaleX(-1) rotate(3deg); }
    50% { transform: translateY(-50%) scaleX(-1) rotate(6deg); }
}

/* Branch compositions */
.branch-composition {
    position: fixed;
    pointer-events: none;
    z-index: 2;
    width: 150px;
    height: 150px;
}

.branch-element {
    position: absolute;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.branch-element.visible {
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 500px) {
    .branch-composition {
        display: none;
    }
}

@media (max-width: 768px) {
    .branch-composition.hide-tablet {
        display: none;
    }
}

@media (max-width: 640px) {
    .wreath-left { 
        width: 45vw; 
        left: -18%;
        top: 40%;
    }
    .wreath-right { 
        width: 35vw; 
        right: -5%;
        top: 60%;
    }
}