/* apps/vesak_theme/vesak_theme/public/css/vesak.css */

.vesak-lantern-container {
    position: fixed;
    top: -3px; /* Adjusted so the shorter string looks right */
    z-index: 99999;
    pointer-events: none; /* Allows you to click *through* the lanterns */
    transform-origin: top center; 
    filter: drop-shadow(0px 4px 6px rgba(100, 150, 255, 0.3));
}

.vesak-lantern-container img {
    width: 45px; /* VERY SMALL SIZE */
    height: auto;
}

/* 6 Lantern Positions & Natural Animation Delays 
  Each has a slightly different animation duration and delay 
  so they don't swing in perfect, robotic synchronization.
*/
.vesak-pos-1 { left: 2%;  animation: sway 3.5s ease-in-out infinite alternate; animation-delay: 0s; }
.vesak-pos-2 { left: 18%; animation: sway 4.2s ease-in-out infinite alternate; animation-delay: -1.2s; }
.vesak-pos-3 { left: 34%; animation: sway 3.8s ease-in-out infinite alternate; animation-delay: -2.5s; }
.vesak-pos-4 { left: 50%; animation: sway 4.1s ease-in-out infinite alternate; animation-delay: -1.5s; }
.vesak-pos-5 { right: 34%; animation: sway 4.0s ease-in-out infinite alternate; animation-delay: -0.8s; }
.vesak-pos-6 { right: 18%; animation: sway 3.6s ease-in-out infinite alternate; animation-delay: -2.1s; }
.vesak-pos-7 { right: 2%;  animation: sway 4.5s ease-in-out infinite alternate; animation-delay: -3.0s; }

@keyframes sway {
    0% { transform: rotate(14deg); }
    100% { transform: rotate(-14deg); }
}

/* Hide the inner 4 lanterns on mobile screens so it doesn't clutter the phone UI */
@media (max-width: 768px) {
    .vesak-pos-2, .vesak-pos-3, .vesak-pos-4, .vesak-pos-5 { 
        display: none; 
    }
    .vesak-lantern-container img { 
        width: 35px; 
    }
}