/* halloween-overlay.css */

#halloween-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* VERY IMPORTANT: Allows clicks to pass through to content below */
    z-index: 9999; /* Ensure it's above other content */
    overflow: hidden; /* Hide elements that go beyond the screen */
}

/* Base styles for the animated elements */
.halloween-pumpkin,
.halloween-cloud {
    position: absolute;
    pointer-events: none; /* Elements themselves also don't block clicks */
    user-select: none; /* Prevent selection of the pumpkin/cloud text */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
    will-change: transform, opacity; /* Optimize for animation performance */
}

/* Pumpkin Specifics */
.halloween-pumpkin {
    font-size: 4em; /* Adjust size as needed */
    line-height: 1; /* Keep symbol compact */
    animation: jumpAndWobble 4s infinite ease-in-out;
    color: orange; /* Or leave it default for emoji */
	 opacity: 0.6; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Adds some depth */
}

/* Cloud Specifics */
.halloween-cloud {
    font-size: 6em; /* Adjust cloud size */
    opacity: 0.6; /* Make them semi-transparent */
    color: #ccc; /* Light grey for cloud */
    animation: floatAcross 20s linear infinite; /* Longer, slower animation for clouds */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Keyframe Animation for Pumpkins: Jump and Wobble */
@keyframes jumpAndWobble {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    25% { transform: translateY(-30px) scale(1.05) rotate(5deg); } /* Jump up */
    50% { transform: translateY(0) scale(1) rotate(0deg); } /* Land */
    75% { transform: translateY(-15px) scale(1.02) rotate(-3deg); } /* Smaller jump */
    100% { transform: translateY(0) scale(1) rotate(0deg); } /* Land */
}

/* Keyframe Animation for Clouds: Float Across */
@keyframes floatAcross {
    0% { transform: translateX(-100vw); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateX(100vw); opacity: 0; }
}