/**
 * Christmas Pendulum Animation
 * Description: CSS animation for swinging pendulum clocks at the top of the website
 */

/* Pendulum container - fixed at top */
.christmas-pendulum-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    z-index: 9999;
    pointer-events: none; /* Allow clicks to pass through */
    display: flex;
    justify-content: center;
    gap: 150px; /* Space between pendulums */
}

/* Individual pendulum wrapper */
.christmas-pendulum {
    position: absolute;
    top: 0;
    width: 80px;
    height: 200px;
    transform-origin: top center;
    animation: swing 3s ease-in-out infinite;
}

/* Pendulum image */
.christmas-pendulum img {
    width: 100%;
    height: auto;
    display: block;
}

/* Individual pendulum sizes (right side - group of 3) */
.christmas-pendulum:nth-child(1) {
    width: 36px;  /* 90px height * 0.4 ratio */
    height: 90px;
}

.christmas-pendulum:nth-child(2) {
    width: 15px;  /* 38px height * 0.4 ratio */
    height: 38px;
}

.christmas-pendulum:nth-child(3) {
    width: 22px;  /* 55px height * 0.4 ratio */
    height: 55px;
}

/* Left side pendulums - custom sizes */
.christmas-pendulum:nth-child(4) {
    width: 24px;  /* 60px height * 0.4 ratio */
    height: 60px;
}

.christmas-pendulum:nth-child(5) {
    width: 31px;  /* 77px height * 0.4 ratio */
    height: 77px;
}

/* Position each pendulum with delay */
/* 3 pendulums on right side (280px from right) - adjusted spacing for different sizes */
.christmas-pendulum:nth-child(1) {
    right: 280px;
    animation-delay: 0s;
}

.christmas-pendulum:nth-child(2) {
    right: 335px;  /* 280 + 90px + ... */
    animation-delay: 0.6s;
}

.christmas-pendulum:nth-child(3) {
    right: 390px;  /* 335 + 38px + ... */
    animation-delay: 1.2s;
}

/* 2 pendulums on left side (280px from left) - adjusted spacing */
.christmas-pendulum:nth-child(4) {
    left: 280px;
    animation-delay: 1.8s;
}

.christmas-pendulum:nth-child(5) {
    left: 325px;  /* 280 + 60px - adjusted for overlap */
    animation-delay: 2.4s;
}

/* Swing animation - like a real pendulum clock */
@keyframes swing {
    0%, 100% {
        transform: rotate(25deg);
    }
    50% {
        transform: rotate(-25deg);
    }
}

/* Responsive adjustments - only positions change, sizes stay same */
@media (max-width: 1024px) {
    /* Right side pendulums - same height, different position */
    .christmas-pendulum:nth-child(1) { right: 50px; }
    .christmas-pendulum:nth-child(2) { right: 145px; }
    .christmas-pendulum:nth-child(3) { right: 200px; }

    /* Left side pendulums - same height, different position */
    .christmas-pendulum:nth-child(4) { left: 50px; }
    .christmas-pendulum:nth-child(5) { left: 115px; }
}

@media (max-width: 768px) {
    /* Right side pendulums - same height, different position */
    .christmas-pendulum:nth-child(1) { right: 20px; }
    .christmas-pendulum:nth-child(2) { right: 110px; }
    .christmas-pendulum:nth-child(3) { right: 165px; }

    /* Left side pendulums - same height, different position */
    .christmas-pendulum:nth-child(4) { left: 20px; }
    .christmas-pendulum:nth-child(5) { left: 85px; }
}

@media (max-width: 480px) {
    /* Right side pendulums - same height, different position */
    .christmas-pendulum:nth-child(1) { right: 10px; }
    .christmas-pendulum:nth-child(2) { right: 100px; }
    .christmas-pendulum:nth-child(3) { right: 155px; }

    /* Left side pendulums - same height, different position */
    .christmas-pendulum:nth-child(4) { left: 10px; }
    .christmas-pendulum:nth-child(5) { left: 75px; }
}

/* RTL Support */
body.rtl .christmas-pendulum-container {
    direction: rtl;
}

/* Performance optimization - use GPU acceleration */
.christmas-pendulum {
    will-change: transform;
    backface-visibility: hidden;
}