/* ============================================
   Snowfall Animation Styles
   ============================================ */

.snow-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1; /* Above background but behind text/buttons */
}

/* Header snow container */
.site-header .snow-container {
	height: 100%;
}

.snowflake {
	position: absolute;
	top: -20px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	filter: blur(1px);
	animation: snowfall linear infinite;
	pointer-events: none;
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Snowfall animation */
@keyframes snowfall {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		transform: translateY(calc(var(--container-height, 100vh) + 20px)) translateX(var(--drift, 0));
		opacity: 0;
	}
}

/* Ensure parent containers are positioned relative for snow positioning */
/* Note: .site-header already has position: sticky, which works for absolute children */
.wp-block-group,
.wp-block-cover,
.hero-section {
	position: relative;
}

/* Ensure text and buttons appear above snow */
.site-header .header-inner,
.site-header .site-branding,
.wp-block-group > *:not(.snow-container),
.wp-block-cover > *:not(.snow-container),
.hero-section > *:not(.snow-container) {
	position: relative;
	z-index: 2;
}

/* For Gutenberg blocks with snow */
.wp-block-group:has(.snow-container) > *:not(.snow-container),
.wp-block-cover:has(.snow-container) > *:not(.snow-container) {
	position: relative;
	z-index: 2;
}