/* =========================================================================
 * Ezzeta Snow Transition — assets/css/ezzeta-snow.css
 * Estilos auxiliares. Toda la animación de partículas vive en WebGL (Three.js);
 * este CSS solo maneja el overlay, la niebla, el glow y las transiciones
 * de opacidad, tal como pide la especificación ("CSS únicamente para
 * elementos auxiliares").
 * ========================================================================= */

:root {
	--ezzeta-fog-color: #dce9f7;
	--ezzeta-glow-color: #7ec8ff;
}

/* -------------------------------------------------------------------------
 * Overlay de pantalla completa
 * ---------------------------------------------------------------------- */
#ezzeta-snow-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999999; /* por encima de Elementor / cualquier header sticky */
	pointer-events: none;
	opacity: 0;
	will-change: opacity;
	overflow: hidden;
	background: transparent;
}

#ezzeta-snow-overlay.is-active {
	pointer-events: auto;
}

/* Canvas WebGL a pantalla completa */
#ezzeta-snow-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* -------------------------------------------------------------------------
 * Niebla suave (capa CSS por encima del canvas, se anima con GSAP)
 * ---------------------------------------------------------------------- */
#ezzeta-snow-fog {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	background: radial-gradient(
			ellipse at 30% 40%,
			var(--ezzeta-fog-color) 0%,
			transparent 60%
		),
		radial-gradient(
			ellipse at 70% 60%,
			var(--ezzeta-fog-color) 0%,
			transparent 55%
		),
		linear-gradient(120deg, var(--ezzeta-fog-color), transparent 70%);
	opacity: 0;
	filter: blur(18px);
	mix-blend-mode: screen;
	will-change: opacity, transform;
}

/* Whiteout: cubre completamente el contenido en el pico de la tormenta */
#ezzeta-snow-whiteout {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		#eaf3fc 0%,
		#cfe3f5 45%,
		#e9f2fb 100%
	);
	opacity: 0;
	will-change: opacity;
}

/* -------------------------------------------------------------------------
 * Glow frío al seleccionar la casaca (fase 1)
 * ---------------------------------------------------------------------- */
.ezzeta-snow-trigger {
	cursor: pointer;
	transition: filter 0.25s ease;
}

.ezzeta-snow-selected {
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 0 18px var(--ezzeta-glow-color));
	animation: ezzeta-glow-pulse 0.9s ease-in-out infinite;
}

@keyframes ezzeta-glow-pulse {
	0%, 100% {
		filter: drop-shadow(0 0 14px var(--ezzeta-glow-color));
	}
	50% {
		filter: drop-shadow(0 0 28px var(--ezzeta-glow-color));
	}
}

/* -------------------------------------------------------------------------
 * Accesibilidad: respeta "prefers-reduced-motion"
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ezzeta-snow-selected {
		animation: none;
	}
}

/* Evita scroll durante la tormenta */
body.ezzeta-snow-locked {
	overflow: hidden !important;
	height: 100vh;
}