/**
 * Capa global de experiencia: cortina de entrada, cursor propio, barra de progreso
 * y utilidades de reveal por máscara. Todo degrada solo: si el JS no corre, la
 * cortina se retira igualmente por animación CSS y el cursor nativo nunca se oculta.
 */

/* Cortina de entrada -------------------------------------------------------
   A prueba de fallos: la animación CSS la retira aunque el JS muera. */

.zihouse-intro-curtain {
	position: fixed;
	inset: 0;
	z-index: var(--zihouse-z-toast);
	background: var(--zihouse-color-ink);
	display: grid;
	place-items: center;
	animation: zihouse-curtain-out 900ms var(--zihouse-ease-out-quint) 500ms forwards;
	pointer-events: none;
}

.zihouse-intro-curtain__logo {
	width: min(220px, 45vw);
	opacity: 0;
	animation: zihouse-curtain-logo 700ms var(--zihouse-ease-out-quart) 80ms forwards;
	filter: brightness(0) invert(1);
}

.zihouse-intro-curtain.is-done {
	animation: zihouse-curtain-out 700ms var(--zihouse-ease-out-quint) forwards;
}

@keyframes zihouse-curtain-logo {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@keyframes zihouse-curtain-out {
	to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

/* Barra de progreso de scroll ---------------------------------------------- */

.zihouse-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--zihouse-color-accent);
	z-index: calc(var(--zihouse-z-sticky) + 1);
	pointer-events: none;
}

/* Cursor propio (solo puntero fino) ---------------------------------------- */

.zihouse-cursor,
.zihouse-cursor__ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: var(--zihouse-z-tooltip);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 200ms linear;
	/* Sin mix-blend-mode: obligaba a recomponer la zona bajo el cursor en cada
	   fotograma, sobre el vídeo del hero y las transformaciones de scroll. Era
	   el mayor coste del cursor. La visibilidad sobre fondo claro y oscuro se
	   resuelve con un contorno doble, que no cuesta nada. */
	will-change: transform;
}

.zihouse-cursor {
	width: 7px;
	height: 7px;
	background: var(--zihouse-near-black);
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
	margin: -3.5px 0 0 -3.5px;
}

.zihouse-cursor__ring {
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	/* El agrandado va por escala, no por width/height/margin: así no recalcula
	   layout en cada hover. El translate lo pone el JS, la escala este --s. */
	scale: var(--zihouse-ring-s, 1);
	transition: opacity 200ms linear, scale 260ms var(--zihouse-ease-out-quart),
		background-color 260ms var(--zihouse-ease-out-quart);
}

.zihouse-cursor-on .zihouse-cursor,
.zihouse-cursor-on .zihouse-cursor__ring {
	opacity: 1;
}

.zihouse-cursor-on.is-hovering .zihouse-cursor__ring {
	--zihouse-ring-s: 1.9;
	background: rgba(0, 0, 0, 0.06);
}

/* Solo con puntero fino: nunca en táctil. */
@media (hover: none), (pointer: coarse) {
	.zihouse-cursor,
	.zihouse-cursor__ring {
		display: none;
	}
}

/* Reveal por máscara: la imagen entra descubriéndose, no solo con fade ------ */

.zihouse-motion-on [data-zihouse-mask] {
	clip-path: inset(0 0 100% 0);
	will-change: clip-path;
}

/* Botones magnéticos: el desplazamiento lo aplica el JS por variable. */
.zihouse-magnetic {
	transform: translate3d(var(--zihouse-mag-x, 0px), var(--zihouse-mag-y, 0px), 0);
	transition: transform 400ms var(--zihouse-ease-out-quart);
}

@media (prefers-reduced-motion: reduce) {
	html:not(.zihouse-motion-full) .zihouse-intro-curtain {
		animation: none;
		display: none;
	}
	html:not(.zihouse-motion-full) .zihouse-cursor,
	html:not(.zihouse-motion-full) .zihouse-cursor__ring {
		display: none;
	}
	html:not(.zihouse-motion-full) [data-zihouse-mask] {
		clip-path: none;
	}
	html:not(.zihouse-motion-full) .zihouse-magnetic {
		transform: none;
		transition: none;
	}
}