/*
 * Conqr Intro Manifesto (widget). Port exacto de site.css: .screen, .intro, .portal, .vignette, .inside,
 * .explore (y su gota), .line, .line.small, .w, .dots y sus @media. El vídeo #heroVid es una vista del
 * motor 3D en una caja 16:9 como .portal video (height min(86vh,62vw); width auto); el zoom ×9 escala
 * la caja entera, como el scale del vídeo original.
 */

.cq-im {
	height: 100vh;
	height: 100svh;
	position: relative;
	overflow: hidden;
}

.cq-im__portal {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* .portal video: el vídeo original es 1280×720 (16:9) y la esfera mide .676 de su alto, centrada. */
.cq-im .cq-im__vid {
	position: relative;
	inset: auto;
	flex: none;
	height: min(86vh, 62vw);
	width: auto;
	aspect-ratio: 16 / 9;
	max-width: none;
	will-change: transform;
}
/* Respaldo sin WebGL: la imagen fija ocupa la caja del vídeo original. */
.cq-im .cq-im__fallback {
	height: min(86vh, 62vw);
	width: auto;
	max-width: none;
	max-height: none;
}

.cq-im__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 55% at 50% 50%, rgba(10, 18, 64, 0) 40%, rgba(0, 0, 0, .6) 100%);
	pointer-events: none;
}

.cq-im__inside {
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 70% at 50% 50%, #0A1A70 0%, #050A33 45%, #000 100%);
	clip-path: circle(0% at 50% 50%);
}

.cq-explore {
	position: absolute;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: inherit;
	text-decoration: none;
}
.cq-explore i {
	display: block;
	width: 1px;
	height: 42px;
	background: linear-gradient(var(--cq-paper), transparent);
	transform-origin: top;
	animation: cq-drip 2.4s var(--cq-ease) infinite;
}
@keyframes cq-drip {
	0% { transform: scaleY(0); }
	45% { transform: scaleY(1); }
	100% { transform: scaleY(1); opacity: 0; }
}

.cq-line {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--cq-m);
	text-align: center;
	pointer-events: none;
}
.cq-line p {
	margin: 0;
	padding: 0;
	max-width: 18ch;
	font-family: inherit;
	font-size: clamp(38px, 6.2vw, 104px);
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: 1;
	text-transform: lowercase;
	color: inherit;
}
.cq-line.is-small p {
	max-width: 24ch;
	font-size: clamp(30px, 4.4vw, 72px);
	letter-spacing: -.045em;
	line-height: 1.04;
}
.cq-w {
	display: inline-block;
	opacity: 0;
	filter: blur(14px);
	transform: translateY(.25em);
}

.cq-dots {
	position: absolute;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	opacity: 0;
}
.cq-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cq-faint);
	transition: background .3s;
}
.cq-dots i.on {
	background: var(--cq-paper);
}

@media (prefers-reduced-motion: reduce) {
	.cq-explore i { animation: none; }
	.cq-w { opacity: 1 !important; filter: none !important; transform: none !important; }
	.cq-line { position: relative; height: auto; padding: 10vh var(--cq-m); }
	.cq-im { height: auto; }
	.cq-im__portal { position: relative; height: 100vh; }
}