/* Zombie Skull 3D */

.zombie-skull {
	position: relative;
	width: 100%;
	height: var(--zs-h, 520px);
	overflow: hidden;
	touch-action: pan-y; /* no secuestra el scroll en móvil */

	/* Transparente al puntero: los lanzadores de cráneos y el cursor
	   pixelado del hero siguen recibiendo sus clics. */
	pointer-events: none;
}

/* Capa sobre el hero: el padre necesita position: relative */
.zombie-skull--layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* Pantalla completa fija: se queda detrás del contenido mientras
   haces scroll. Se sale del flujo, así que no empuja nada. */
.zombie-skull--fixed {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100svh;
	z-index: 0;
}

.zombie-skull__canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.zombie-skull.is-ready .zombie-skull__canvas {
	opacity: 1;
}

/* Imagen de respaldo: visible solo si no hay WebGL o falla la carga */
.zombie-skull__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
}

.zombie-skull.is-fallback .zombie-skull__poster {
	opacity: 1;
}

@media (max-width: 782px) {
	.zombie-skull {
		height: var(--zs-h-sm, 340px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zombie-skull__canvas {
		transition: none;
	}
}