/* General page styling: Dark Gradient Background */


/* Garland Container */
#garlandContainer {
    position: absolute;
    top: 138px;
    left: 0;
	margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

/* --- Individual Light Bulb Base Style --- */
.light {
    position: absolute;
    width: 10px; 
    height: 10px;
    border-radius: 50%; 
    opacity: 1;
    
    /* Soft White/Yellow Glow with Gradient Core */
    background: radial-gradient(circle at 50% 50%, 
                #ffffff 0%,      
                #fff8e1 40%,     
                #ffd700 80%,     
                rgba(255, 255, 255, 0.1) 100%); 
    
    /* Initial (Max) Box Shadow */
    box-shadow: 
        0 0 8px 2px rgba(255, 255, 255, 0.8),    
        0 0 20px 5px rgba(255, 255, 255, 0.5),   
        0 0 40px 10px rgba(255, 255, 255, 0.3);

    /* Apply the Twinkling Animation */
    animation: twinkle-natural 
               1.0s                 /* Duration */
               infinite             /* Repeat forever */
               alternate            /* Runs forward, then backward */
               ease-in-out;         /* Smooth start and end */

    z-index: 10;
}

/* --- Keyframe Animation for Natural Twinkling --- */
@keyframes twinkle-natural {
    0% {
        opacity: 1; 
        box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 20px 5px rgba(255, 255, 255, 0.5), 0 0 40px 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        opacity: 0.85; /* Subtle reduction in brightness */
        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.7), 0 0 10px 3px rgba(255, 255, 255, 0.4);
    }
    100% {
        opacity: 1; /* Return to full brightness */
        box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 20px 5px rgba(255, 255, 255, 0.5), 0 0 40px 10px rgba(255, 255, 255, 0.3);
    }
}

/* --- Connection Line (Wire) --- */
.connection-line {
    position: absolute;
    height: 1px;
    background-color: #555; 
    z-index: 5;
    opacity: 0.8; 
    pointer-events: none;
}