/*!
 * Teraval Intro v1.0 — estilos
 * Overlay de intro/preloader (5 s). Sin dependencias. Todo va prefijado con
 * `tv-` para no chocar con Tailwind ni con los estilos de la app.
 */

html.tv-intro-lock,
html.tv-intro-lock body {
	overflow: hidden !important;
}

.tv-intro {
	/* Tokens (espejo de apps/web/tailwind.config.js) */
	--tv-navy-950: #0b111a;
	--tv-navy-900: #121a26;
	--tv-navy-800: #1e2e42;
	--tv-navy-700: #26364d;
	--tv-brand: #f47b2a;
	--tv-brand-light: #f79a5b;
	--tv-brand-dark: #d9681f;
	--tv-ink: #ffffff;
	--tv-ink-dim: rgba(255, 255, 255, 0.55);
	--tv-ink-faint: rgba(255, 255, 255, 0.28);
	--tv-line: rgba(255, 255, 255, 0.08);
	--tv-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tv-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
	--tv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--tv-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
	--tv-ease-glide: cubic-bezier(0.5, 0, 0.15, 1);

	/* Altura del diamante: escala todo el lockup */
	--m: clamp(104px, min(22vh, 15vw), 190px);
	--dx: 0px;
	--dy: 0px;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	background: var(--tv-navy-950);
	color: var(--tv-ink);
	font-family: var(--tv-font);
	-webkit-font-smoothing: antialiased;
	/* Cruz de precisión como cursor nativo: la mueve el sistema operativo,
	   sin pasar por JS → cero retraso aunque la página esté cargando. */
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 1v8M12 15v8M1 12h8M15 12h8' stroke='%230b111a' stroke-width='3'/%3E%3Cpath d='M12 1v8M12 15v8M1 12h8M15 12h8' stroke='%23fff' stroke-width='1.2'/%3E%3Crect x='10.5' y='10.5' width='3' height='3' fill='%23F47B2A'/%3E%3C/svg%3E") 12 12, crosshair;
	contain: strict;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.tv-intro *,
.tv-intro *::before,
.tv-intro *::after {
	box-sizing: border-box;
}

.tv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tv-stage {
	position: absolute;
	inset: 0;
	/* capa promovida desde el inicio: el golpe del encaje no provoca un
	   repintado al empezar (sería un tirón justo en el momento clave) */
	will-change: transform;
	/* único golpe de cámara: 2.86 s, el diamante encaja en el circuito */
	animation: tv-dock 0.62s linear 2.86s;
}

/* Unión T+V (1.78 s): una línea de luz fina se dibuja desde la junta hacia
   los lados, con una banda tenue detrás. Sin shake ni zoom: sobrio.
   Solo transform/opacity → compositor. */
.tv-flash {
	position: absolute;
	z-index: 2;
	left: 50%;
	/* sobre la unión T/V: y = 83 de 268 → 0.19 × altura por encima del centro */
	top: calc(50% - var(--m) * 0.19);
	width: 0;
	height: 0;
	pointer-events: none;
}

.tv-flash i {
	position: absolute;
	left: -60vw;
	width: 120vw;
	opacity: 0;
	will-change: transform, opacity;
}

.tv-flash .tv-flash-core {
	top: -0.5px;
	height: 1px;
	background: linear-gradient(90deg, rgba(244, 123, 42, 0), rgba(247, 154, 91, 0.55) 30%, #fff 50%, rgba(247, 154, 91, 0.55) 70%, rgba(244, 123, 42, 0));
	animation: tv-seam 1.2s var(--tv-ease-out) 1.72s;
}

.tv-flash .tv-flash-band {
	top: -22px;
	height: 44px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(247, 154, 91, 0.2), rgba(244, 123, 42, 0.07) 45%, rgba(244, 123, 42, 0) 72%);
	animation: tv-seam-glow 1.1s var(--tv-ease-out) 1.74s;
}

/* ───────────── Fondo ───────────── */

.tv-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 50% 50%, rgba(38, 54, 77, 0.55), transparent 70%),
		radial-gradient(120% 90% at 50% 120%, rgba(244, 123, 42, 0.07), transparent 60%),
		var(--tv-navy-950);
}

.tv-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--tv-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--tv-line) 1px, transparent 1px);
	background-size: 64px 64px;
	background-position: center center;
	-webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 10%, transparent 75%);
	/* Estática a propósito: animar su opacidad la convertía en capa compuesta
	   con máscara (pasada extra de GPU en cada frame durante la convergencia). */
}

/* Circuito de fondo: lienzo estático pintado una vez. Entra contrayéndose
   hacia el chip (transform + opacity del lienzo completo → compositor). */
.tv-circuit,
.tv-circuit-glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Aparece cuando el diamante encaja en su zócalo (fin de tv-shift, 2.86 s) */
.tv-circuit {
	opacity: 0;
	transform: scale(1.1);
	will-change: transform, opacity;
	animation: tv-circuit-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.86s forwards;
}

/* Versión encendida: descarga de energía por las pistas en el impacto */
.tv-circuit-glow {
	opacity: 0;
	/* se enciende cuando el diamante encaja en su zócalo (fin de tv-shift) */
	animation: tv-surge 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.86s;
}

.tv-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 45%, rgba(5, 8, 13, 0.75) 100%);
	pointer-events: none;
}

.tv-spot {
	position: absolute;
	left: 0;
	top: 0;
	width: 720px;
	height: 720px;
	margin: -360px 0 0 -360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 123, 42, 0.09) 0%, rgba(244, 123, 42, 0.03) 35%, transparent 65%);
	will-change: transform;
	pointer-events: none;
}

.tv-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ───────────── Escena / lockup ───────────── */

.tv-scene {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	perspective: 1200px;
	pointer-events: none;
}

.tv-lockup {
	display: flex;
	align-items: center;
	gap: calc(var(--m) * 0.17);
	transform-style: preserve-3d;
	will-change: transform;
}

.tv-mark {
	position: relative;
	width: calc(var(--m) * 1.276);
	height: var(--m);
	flex: none;
	transform-style: preserve-3d;
	animation: tv-shift 0.95s var(--tv-ease-io) 1.95s both;
}

.tv-layer {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.tv-layer svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tv-glow {
	position: absolute;
	left: 50%;
	top: 55%;
	width: 260%;
	height: 260%;
	margin: -130% 0 0 -130%;
	background: radial-gradient(circle, rgba(244, 123, 42, 0.32) 0%, rgba(244, 123, 42, 0.1) 30%, transparent 62%);
	opacity: 0;
	animation: tv-glow-in 1.2s ease 1.78s forwards;
	transition: transform 0.6s var(--tv-ease-out);
}

/* Núcleo brillante: se enciende con opacidad (compuesta) en vez de filter,
   que obligaba a una pasada de filtro sobre una capa grande en cada frame. */
.tv-glow::after {
	content: "";
	position: absolute;
	inset: 26%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(247, 154, 91, 0.38) 0%, rgba(244, 123, 42, 0.12) 40%, transparent 68%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.tv-intro.is-near .tv-glow { transform: scale(1.12); }
.tv-intro.is-near .tv-glow::after { opacity: 1; }

/* Wireframe / líneas de construcción */
.tv-wire {
	animation: tv-wire-dim 0.8s ease 1.9s forwards;
}

.tv-wire path,
.tv-wire circle,
.tv-wire line {
	fill: none;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	vector-effect: non-scaling-stroke;
}

.tv-wire .tv-w-t {
	stroke: var(--tv-ink);
	stroke-width: 1.25;
	animation: tv-draw 1s var(--tv-ease-io) 0.5s forwards;
}

.tv-wire .tv-w-v {
	stroke: var(--tv-brand);
	stroke-width: 1.25;
	animation: tv-draw 1s var(--tv-ease-io) 0.65s forwards;
}

.tv-wire .tv-w-c {
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 1;
	animation: tv-draw 1.3s var(--tv-ease-io) 0.3s forwards;
}

/* Piezas sólidas */
.tv-solid-t {
	opacity: 0;
	/* T y V planean a la vez y se asientan juntas en 1.785 s (unión). Sin
	   rebote: la V nunca sube más allá de la junta, así no cruza la T. */
	animation:
		tv-t-in 0.95s var(--tv-ease-glide) 0.835s both,
		tv-fade-in 0.55s ease 0.835s forwards;
}

.tv-solid-v {
	opacity: 0;
	animation:
		tv-v-in 0.95s var(--tv-ease-glide) 0.835s both,
		tv-fade-in 0.55s ease 0.835s forwards;
}

/* Brillo: barra HTML recortada a la forma de la pieza (clip-path inline).
   Solo anima transform → la mueve el compositor, sin repintar. */
.tv-gleam {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.tv-gleam i {
	position: absolute;
	top: -25%;
	bottom: -25%;
	left: 0;
	width: 34%;
	transform: translateX(-130%) skewX(-20deg);
	will-change: transform;
}

.tv-gleam .tv-shine {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0));
	animation: tv-shine 1.7s var(--tv-ease-io) 2s 2;
}

.tv-gleam .tv-sweep {
	width: 58%;
	background: linear-gradient(90deg, rgba(244, 123, 42, 0), rgba(247, 154, 91, 0.75) 38%, #fff 50%, rgba(247, 154, 91, 0.75) 62%, rgba(244, 123, 42, 0));
}

/* Caja de selección estilo herramienta de diseño */
.tv-select {
	position: absolute;
	inset: calc(var(--m) * -0.1);
	border: 1px solid rgba(244, 123, 42, 0.75);
	opacity: 0;
	transform: scale(1.06);
	animation:
		tv-select-in 0.45s var(--tv-ease-out) 1.55s forwards,
		tv-fade-out 0.35s ease 3s forwards;
}

.tv-select i {
	position: absolute;
	width: 7px;
	height: 7px;
	background: var(--tv-navy-950);
	border: 1px solid var(--tv-brand);
}

.tv-select i:nth-child(1) { left: -4px; top: -4px; }
.tv-select i:nth-child(2) { right: -4px; top: -4px; }
.tv-select i:nth-child(3) { left: -4px; bottom: -4px; }
.tv-select i:nth-child(4) { right: -4px; bottom: -4px; }

.tv-select b {
	position: absolute;
	left: -1px;
	bottom: calc(100% + 6px);
	padding: 2px 6px;
	font: 500 10px/1.4 var(--tv-mono);
	letter-spacing: 0.04em;
	color: var(--tv-navy-950);
	background: var(--tv-brand);
	white-space: nowrap;
}

.tv-select em {
	position: absolute;
	left: 50%;
	top: calc(100% + 6px);
	transform: translateX(-50%);
	font: 400 10px/1 var(--tv-mono);
	font-style: normal;
	color: var(--tv-brand-light);
	white-space: nowrap;
}

/* Wordmark */
.tv-word {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--m) * 0.09);
	transform: translateZ(20px);
}

.tv-word-svg {
	position: relative;
	display: block;
	width: calc(var(--m) * 2.597);
	height: calc(var(--m) * 0.373);
	overflow: hidden;
}

/* Una capa por letra (svg completo con una sola letra): el ascenso es un
   transform de caja HTML → compositor, sin repintar el wordmark. */
.tv-l {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--tv-ink);
	transform: translateY(110%);
	animation: tv-letter 0.8s var(--tv-ease-out) calc(2.05s + var(--i) * 55ms) forwards;
}

.tv-caret {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: calc(var(--m) * 0.373);
	background: var(--tv-brand);
	opacity: 0;
	box-shadow: 0 0 18px rgba(244, 123, 42, 0.8);
	animation:
		tv-caret-run 0.6s var(--tv-ease-io) 2s forwards,
		tv-caret-blink 0.9s steps(1) 2.6s 2,
		tv-fade-out 0.2s ease 4.9s forwards;
}

.tv-sub {
	font-weight: 300;
	font-size: calc(var(--m) * 0.128);
	letter-spacing: 0.62em;
	margin-right: -0.62em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.82);
	white-space: pre;
	opacity: 0;
	animation: tv-fade-in 0.4s ease 2.25s forwards;
}

/* ───────────── UI periférica ───────────── */

.tv-ui {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Reglas de herramienta de diseño en los bordes + esquinas de encuadre */
.tv-ruler {
	position: absolute;
	pointer-events: none;
	opacity: 0;
	animation: tv-fade-in 0.8s ease 0.3s forwards;
}

.tv-ruler.is-x {
	left: 0;
	right: 0;
	top: 0;
	height: 9px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 100px) 0 0 / 100% 9px no-repeat,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 10px) 0 0 / 100% 4px no-repeat;
}

.tv-ruler.is-y {
	top: 0;
	bottom: 0;
	left: 0;
	width: 9px;
	background:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 100px) 0 0 / 9px 100% no-repeat,
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 10px) 0 0 / 4px 100% no-repeat;
}

.tv-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 0 solid rgba(244, 123, 42, 0.55);
	pointer-events: none;
	opacity: 0;
	animation: tv-fade-in 0.6s ease 0.4s forwards;
}

.tv-corner.is-tl { top: 18px; left: 18px; border-top-width: 1px; border-left-width: 1px; }
.tv-corner.is-tr { top: 18px; right: 18px; border-top-width: 1px; border-right-width: 1px; }
.tv-corner.is-bl { bottom: 18px; left: 18px; border-bottom-width: 1px; border-left-width: 1px; }
.tv-corner.is-br { bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }

.tv-guide {
	position: absolute;
	background: rgba(244, 123, 42, 0.3);
	animation: tv-fade-out 0.5s ease 1.8s forwards;
}

.tv-guide.is-h {
	left: 0;
	right: 0;
	height: 1px;
	transform: scaleX(0);
	animation:
		tv-grow 0.9s var(--tv-ease-io) var(--d, 0.25s) forwards,
		tv-fade-out 0.5s ease 1.8s forwards;
}

.tv-guide.is-v {
	top: 0;
	bottom: 0;
	width: 1px;
	transform: scaleY(0);
	animation:
		tv-grow 0.9s var(--tv-ease-io) var(--d, 0.25s) forwards,
		tv-fade-out 0.5s ease 1.8s forwards;
}

.tv-guide span {
	position: absolute;
	font: 400 10px/1 var(--tv-mono);
	color: rgba(247, 154, 91, 0.75);
	white-space: nowrap;
}

.tv-guide.is-h span { right: 24px; top: -14px; }
.tv-guide.is-v span { top: 24px; left: 6px; }

.tv-code {
	position: absolute;
	top: 40px;
	font: 400 11.5px/1.75 var(--tv-mono);
	color: rgba(255, 255, 255, 0.34);
	white-space: pre;
}

.tv-code.is-src { left: 44px; }
.tv-code.is-log { right: 44px; }

.tv-ln { height: 1.75em; }

.tv-ln-in {
	display: inline-block;
	vertical-align: top;
	white-space: pre;
	/* clip-path en vez de width: revela el texto sin recalcular layout */
	clip-path: inset(0 100% 0 0);
	animation: tv-type calc(var(--n) * 17ms) steps(var(--n)) var(--d) forwards;
}

.tv-code .k { color: rgba(247, 154, 91, 0.75); }
.tv-code .s { color: rgba(170, 205, 255, 0.6); }
.tv-code .f { color: rgba(255, 255, 255, 0.62); }
.tv-code .b { color: rgba(247, 154, 91, 0.6); }
.tv-code .c { color: rgba(255, 255, 255, 0.24); }
.tv-code .ok { color: rgba(120, 220, 170, 0.7); }

.tv-tagline {
	position: absolute;
	left: 50%;
	bottom: 92px;
	transform: translate(-50%, 8px);
	font: 500 10.5px/1 var(--tv-mono);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--tv-ink-dim);
	white-space: nowrap;
	opacity: 0;
	animation: tv-rise 0.8s var(--tv-ease-out) 3.3s forwards;
}

.tv-tagline i {
	font-style: normal;
	color: var(--tv-brand);
	margin: 0 0.9em;
}

.tv-hud {
	position: absolute;
	left: 44px;
	right: 44px;
	bottom: 34px;
	animation: tv-appear 0.6s ease 0.2s backwards;
}

.tv-hud-row {
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	font: 500 10.5px/1 var(--tv-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tv-ink-dim);
}

.tv-status::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 10px;
	vertical-align: 1px;
	background: var(--tv-brand);
	animation: tv-pulse 1s ease-in-out infinite;
}

.tv-hud-right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.tv-pct {
	color: var(--tv-ink);
	font-size: 12px;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.tv-skip {
	pointer-events: auto;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 4px 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--tv-ink-faint);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.tv-skip:hover,
.tv-skip:focus-visible {
	color: var(--tv-ink);
	border-bottom-color: var(--tv-brand);
	outline: none;
}

.tv-bar {
	position: relative;
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.tv-bar i {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--tv-brand-dark), var(--tv-brand), var(--tv-brand-light));
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* Anillo + coordenadas que acompañan al cursor. La cruz es el cursor NATIVO
   (ver .tv-intro): la dibuja el sistema, así que no tiene retraso. */
.tv-cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	will-change: transform;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tv-intro.has-pointer .tv-cursor { opacity: 1; }

.tv-cursor-ring {
	position: absolute;
	left: -17px;
	top: -17px;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transition: transform 0.35s var(--tv-ease-out), border-color 0.35s ease;
}

.tv-intro.is-near .tv-cursor-ring {
	transform: scale(1.9);
	border-color: var(--tv-brand);
}

.tv-cursor-xy {
	position: absolute;
	left: 22px;
	top: 16px;
	font: 400 10px/1 var(--tv-mono);
	letter-spacing: 0.06em;
	color: var(--tv-ink-faint);
	white-space: pre;
	font-variant-numeric: tabular-nums;
}

/* ───────────── Salida ───────────── */

.tv-intro.is-exit .tv-ui,
.tv-intro.is-exit .tv-hud,
.tv-intro.is-exit .tv-word,
.tv-intro.is-exit .tv-cursor {
	opacity: 0;
	transition: opacity 0.3s ease;
}


.tv-intro.is-exit .tv-glow {
	transform: scale(1.3);
	animation: tv-glow-out 0.34s ease forwards;
}
.tv-intro.is-exit .tv-glow::after { opacity: 1; transition-duration: 0.25s; }

/* Barrido final: banda blanca con bordes naranjas que cruza el diamante */
.tv-intro.is-exit .tv-gleam .tv-sweep {
	animation: tv-sweep 0.42s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}

/* Contorno naranja que se traza alrededor del diamante durante el barrido */
.tv-edge path {
	fill: none;
	stroke: var(--tv-brand);
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 0.06 0.94;
	stroke-dashoffset: 1;
	opacity: 0;
}

.tv-edge .tv-e-halo {
	stroke-width: 12;
	stroke-opacity: 0.22;
}

.tv-edge .tv-e-line {
	stroke-width: 2.5;
}

.tv-intro.is-exit .tv-edge path {
	opacity: 1;
	animation: tv-comet 0.34s cubic-bezier(0.55, 0, 0.25, 1) forwards;
}

/* Apertura final (fuera del overlay). Solo transforms: 5 paneles sólidos
   (semiplanos, uno por arista del diamante) y 5 aristas naranjas. */
.tv-iris {
	position: fixed;
	inset: 0;
	z-index: 2147483001;
	pointer-events: none;
	overflow: hidden;
	visibility: hidden;
	contain: strict;
}

.tv-pane {
	position: absolute;
	top: 0;
	background: #0b111a;
	transform-origin: 50% 0;
	will-change: transform;
}

.tv-rim {
	position: absolute;
	top: -1.5px;
	height: 3px;
	background: #f47b2a;
	box-shadow: 0 0 14px 3px rgba(244, 123, 42, 0.45);
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Fondo que se oscurece durante el barrido: deja solo el logo y su contorno,
   así el relevo a la apertura (paneles lisos) es invisible. */
.tv-dim {
	position: absolute;
	inset: 0;
	background: var(--tv-navy-950);
	opacity: 0;
	pointer-events: none;
}

.tv-intro.is-exit .tv-dim {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.tv-intro.is-fade {
	opacity: 0;
	transition: opacity 0.45s ease;
}

/* ───────────── Responsive ───────────── */

@media (max-width: 1100px) {
	.tv-code { display: none; }
}

@media (max-width: 720px) {
	.tv-intro { --m: clamp(92px, 26vw, 140px); }
	.tv-lockup { flex-direction: column; gap: calc(var(--m) * 0.26); }
	.tv-word { transform: none; }
	.tv-hud { left: 20px; right: 20px; bottom: 24px; }
	.tv-hud-row { font-size: 9.5px; letter-spacing: 0.12em; }
	.tv-hud-right { gap: 14px; }
	.tv-tagline { bottom: 76px; font-size: 8.5px; letter-spacing: 0.16em; }
	.tv-tagline i { margin: 0 0.45em; }
	.tv-guide span { display: none; }
	.tv-corner.is-bl, .tv-corner.is-br { display: none; }
}

@media (hover: none), (pointer: coarse) {
	.tv-intro { cursor: auto; }
	.tv-cursor, .tv-spot { display: none; }
}

/* Movimiento reducido: logo estático + barra, salida por fundido */
.tv-intro.is-reduced *,
.tv-intro.is-reduced *::before,
.tv-intro.is-reduced *::after {
	animation: none !important;
}

.tv-intro.is-reduced .tv-canvas,
.tv-intro.is-reduced .tv-ui .tv-guide,
.tv-intro.is-reduced .tv-code,
.tv-intro.is-reduced .tv-select,
.tv-intro.is-reduced .tv-caret,
.tv-intro.is-reduced .tv-cursor,
.tv-intro.is-reduced .tv-spot,
.tv-intro.is-reduced .tv-wire,
.tv-intro.is-reduced .tv-edge,
.tv-intro.is-reduced .tv-gleam,
.tv-intro.is-reduced .tv-flash,
.tv-intro.is-reduced .tv-circuit-glow { display: none; }

.tv-intro.is-reduced .tv-circuit,
.tv-intro.is-reduced .tv-ruler,
.tv-intro.is-reduced .tv-corner { opacity: 1; transform: none; }

.tv-intro.is-reduced { cursor: auto; }
.tv-intro.is-reduced .tv-mark { transform: none; }
.tv-intro.is-reduced .tv-solid-t,
.tv-intro.is-reduced .tv-solid-v,
.tv-intro.is-reduced .tv-sub,
.tv-intro.is-reduced .tv-hud,
.tv-intro.is-reduced .tv-tagline,
.tv-intro.is-reduced .tv-grid { opacity: 1; }
.tv-intro.is-reduced .tv-tagline { transform: translate(-50%, 0); }
.tv-intro.is-reduced .tv-glow { opacity: 0.5; }
.tv-intro.is-reduced .tv-l { transform: none; }

/* ───────────── Keyframes ───────────── */

@keyframes tv-fade-in { to { opacity: 1; } }
@keyframes tv-appear { from { opacity: 0; } }
@keyframes tv-fade-out { to { opacity: 0; } }
@keyframes tv-grow { to { transform: none; } }
@keyframes tv-draw { to { stroke-dashoffset: 0; } }
@keyframes tv-glow-in { to { opacity: 0.6; } }
@keyframes tv-glow-out { from { opacity: 0.6; } to { opacity: 0; } }
@keyframes tv-wire-dim { to { opacity: 0.32; } }
@keyframes tv-type { to { clip-path: inset(0 0 0 0); } }
@keyframes tv-pulse { 50% { opacity: 0.25; } }

@keyframes tv-shift {
	from { transform: translate(var(--dx), var(--dy)); }
	to { transform: translate(0, 0); }
}

@keyframes tv-t-in {
	from { transform: translateY(-30%) scale(0.985); }
	to { transform: none; }
}

@keyframes tv-v-in {
	from { transform: translateY(30%) scale(0.985); }
	to { transform: none; }
}

@keyframes tv-shine {
	0% { transform: translateX(-130%) skewX(-20deg); }
	70%, 100% { transform: translateX(420%) skewX(-20deg); }
}

@keyframes tv-select-in { to { opacity: 1; transform: none; } }

@keyframes tv-letter {
	0% { transform: translateY(110%); }
	100% { transform: none; }
}

@keyframes tv-caret-run {
	0% { opacity: 1; transform: translateX(0); }
	100% { opacity: 1; transform: translateX(calc(var(--m) * 2.597 + 6px)); }
}

@keyframes tv-caret-blink {
	0% { opacity: 0; }
	50% { opacity: 1; }
}

@keyframes tv-rise { to { opacity: 1; transform: translate(-50%, 0); } }

@keyframes tv-sweep {
	0% { transform: translateX(-130%) skewX(-20deg); }
	100% { transform: translateX(260%) skewX(-20deg); }
}

@keyframes tv-comet {
	0% { stroke-dasharray: 0.06 0.94; stroke-dashoffset: 1; }
	100% { stroke-dasharray: 1 0; stroke-dashoffset: 0; }
}

@keyframes tv-seam {
	0% { opacity: 0; transform: scaleX(0); }
	12% { opacity: 1; }
	55% { opacity: 0.85; transform: scaleX(1); }
	100% { opacity: 0; transform: scaleX(1); }
}

@keyframes tv-seam-glow {
	0% { opacity: 0; transform: scaleX(0.2); }
	22% { opacity: 1; }
	100% { opacity: 0; transform: scaleX(1); }
}

@keyframes tv-circuit-in {
	to { opacity: 1; transform: none; }
}

@keyframes tv-surge {
	0% { opacity: 0; }
	10% { opacity: 0.9; }
	100% { opacity: 0; }
}

/* Golpe del encaje: zoom anclado en el zócalo (translate = -o·(s-1)) + shake + giro */
@keyframes tv-dock {
	0% { transform: translate(0, 0) scale(1) rotate(0deg); }
	7% { transform: translate(calc(var(--ox, 0px) * -0.055 - 13px), calc(var(--oy, 0px) * -0.055 + 7px)) scale(1.055) rotate(0.95deg); }
	17% { transform: translate(calc(var(--ox, 0px) * -0.045 + 12px), calc(var(--oy, 0px) * -0.045 - 9px)) scale(1.045) rotate(-0.75deg); }
	29% { transform: translate(calc(var(--ox, 0px) * -0.034 - 9px), calc(var(--oy, 0px) * -0.034 + 6px)) scale(1.034) rotate(0.5deg); }
	43% { transform: translate(calc(var(--ox, 0px) * -0.022 + 6px), calc(var(--oy, 0px) * -0.022 - 4px)) scale(1.022) rotate(-0.3deg); }
	60% { transform: translate(calc(var(--ox, 0px) * -0.011 - 3.5px), calc(var(--oy, 0px) * -0.011 + 2px)) scale(1.011) rotate(0.15deg); }
	80% { transform: translate(calc(var(--ox, 0px) * -0.003 + 1px), calc(var(--oy, 0px) * -0.003 - 0.5px)) scale(1.003) rotate(-0.04deg); }
	100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}