/* vitals.css - a base comum da tela de morte do Aqua Vitals: as fontes, o quadro e a escala, a
   vinheta, e as poucas primitivas que os tres temas partilham (a acao com a linha da tecla
   segurada, o ECG que rola, o anel do medico, as cascatas de entrada). O que da a FORMA a cada
   tema mora em tema-margem.css, tema-anatomia.css e tema-linha.css.

   Nasce da maquete aprovada em 2026-09-30 (docs/superpowers/maquetes/2026-09-30-aqua-vitals-temas),
   sem a barra, sem o fundo desenhado e sem o CSS que simulava o cinema: no jogo o mundo e o
   fundo e o cinema e native.

   O quadro (.vt-tela) e fixo em 1080 px de altura e escalado pelo vitals.js para a tela real;
   as posicoes dos temas sao em px de jogo a 1080p, as mesmas da maquete. Os tamanhos de letra
   saem da escala do kit por calc(): uma tela de morte e lida do sofa, e o que e maior que fs-3xl
   e multiplo dele, nunca numero solto. Tudo por token: zero literal de cor, nenhum tempo cru.

   O texto e branco puro sobre o mundo: o quadro faz --aqua-text valer o branco do tokens.css, e
   a hierarquia sai de --vt-apagado e --vt-fraco, o mesmo branco com alfa.

   So transform e opacity animam. Nada de filter animado, sombra animada nem backdrop-filter.
   Piso do CEF 103: nada de aninhamento, nem :has(), nem color-mix(), nem translate/rotate/scale
   como propriedade solta. */

/* ==== as fontes: copias byte-identicas do brand, na mesma pasta ============================== */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/kit/instrument-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("/kit/geist-mono-latin.woff2") format("woff2");
}

/* Sem o kit nao ha display a vencer, mas um tema declara flex nos proprios blocos: o [hidden]
   continua a ter de ganhar de qualquer display. */
[hidden] { display: none !important; }

/* O dono pode esconder os numeros (mostrar_numeros): a % de sangue e o BPM, em cada tema. O desenho
   fica - a linha do ECG, a silhueta, a linha do sangue -, porque ele e o tema. Fora de camada e com
   !important pelo mesmo motivo do [hidden]: um tema declara display nos proprios blocos. */
.vt-tela[data-numeros="nao"] .mg-bpm,
.vt-tela[data-numeros="nao"] .mg-sangue__rotulo,
.vt-tela[data-numeros="nao"] .mg-medico__sangue,
.vt-tela[data-numeros="nao"] .an-leitura__sangue,
.vt-tela[data-numeros="nao"] .an-leitura__bpm,
.vt-tela[data-numeros="nao"] .ln-pulso,
.vt-tela[data-numeros="nao"] .ln-sangue { display: none !important; }

/* ==== a pagina ================================================================================ */
html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: transparent;
}

/* ==== a vinheta: fecha com o coracao ========================================================= */
/* Fora do quadro, cobre a tela inteira. A opacidade sai da intensidade (--vt-vinheta, 0 a 1); a
   batida e uma animacao de escala escrita pelo vitals.js no instante do pico R. */
.vt-vinheta {
	position: fixed;
	top: -8%;
	right: -8%;
	bottom: -8%;
	left: -8%;
	pointer-events: none;
	background: radial-gradient(ellipse 62% 58% at 50% 52%, rgb(var(--aqua-black-rgb) / 0%) 0%, rgb(var(--aqua-black-rgb) / 0%) 38%, rgb(var(--aqua-black-rgb) / 96%) 100%);
	opacity: calc(0.78 * var(--vt-vinheta, 0));
	transition: opacity var(--vt-fase-t) var(--aqua-ease-in-out);
	transform-origin: 50% 52%;
	will-change: transform, opacity;
}

/* ==== o quadro ================================================================================ */
.vt-tela {
	--vt-k: 1;                                       /* a escala: altura da tela / 1080, escrita pelo vitals.js */
	--vt-w: 1920px;                                  /* a largura do quadro em px de jogo, para cobrir a tela */
	--vt-sangue: 100;                                /* 0 a 100, o alvo: as barras transitam ate ele em --vt-nivel */
	--vt-seg: 0;                                     /* a tecla segurada, 0 a 1 */
	--aqua-text: var(--aqua-white);
	--aqua-text-rgb: var(--aqua-white-rgb);
	--vt-apagado: rgb(var(--aqua-text-rgb) / 72%);
	--vt-fraco: rgb(var(--aqua-text-rgb) / 46%);
	--vt-fio: rgb(var(--aqua-text-rgb) / 24%);
	--vt-fs-fase: calc(var(--aqua-fs-3xl) * 2);      /* 60 */
	--vt-fs-tempo: calc(var(--aqua-fs-3xl) * 3);     /* 90 */
	--vt-fs-medio: calc(var(--aqua-fs-2xl) * 1.5);   /* 36 */
	--vt-fs-corpo: calc(var(--aqua-fs-lg) * 1.5);    /* 24 */
	--vt-fs-meta: calc(var(--aqua-fs-md) * 1.5);     /* 21 */
	--vt-fs-mini: var(--aqua-fs-lg);                 /* 16 */
	--vt-margem: calc(var(--aqua-space-12) * 2);     /* 96 */
	--vt-coluna: calc(var(--vt-margem) + var(--aqua-space-8));
	--vt-sombra: 0 1px 2px rgb(var(--aqua-black-rgb) / 70%), 0 0 24px rgb(var(--aqua-black-rgb) / 55%);
	--vt-nivel: calc(var(--aqua-t-lento) * 3);       /* o passo do sangue: quase 1 s, linear, o mesmo do numero no vitals.js */
	--vt-fase-t: calc(var(--aqua-t-lento) * 8);      /* a troca de fase: lenta, e uma morte */
	position: fixed;
	top: 0;
	left: 0;
	width: var(--vt-w);
	height: 1080px;
	transform: scale(var(--vt-k));
	transform-origin: top left;
	overflow: hidden;
	font-family: var(--aqua-font-sans);
	font-size: var(--vt-fs-corpo);
	line-height: var(--aqua-lh-tight);
	color: var(--aqua-text);
	-webkit-font-smoothing: antialiased;
	user-select: none;
	pointer-events: none;
}

/* O tema ativo monta as tres vistas dele aqui dentro. */
.vt-tema { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-shadow: var(--vt-sombra); }
.vt-tema h1, .vt-tema h2, .vt-tema p, .vt-tema ul { margin: 0; padding: 0; }
.vt-tema ul { list-style: none; }

/* ==== as primitivas comuns ==================================================================== */
/* A acao: uma linha de texto com a linha fina da tecla segurada por baixo, em accent. Cada tema
   a posiciona; a estrutura e uma. A que espera (o tempo minimo ainda corre) fica apagada. */
.vt-acao {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--aqua-space-3);
	width: max-content;
	max-width: 760px;
	font-size: var(--vt-fs-corpo);
	transition: color var(--vt-fase-t) var(--aqua-ease-in-out);
}
.vt-acao[data-espera] { color: var(--vt-apagado); }
/* So a acao que esta sendo segurada enche (data-ativo, escrito pelo tema em segurar()). */
.vt-acao__progresso {
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--aqua-space-2));
	height: 2px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--aqua-accent);
}
.vt-acao[data-ativo] .vt-acao__progresso { transform: scaleX(var(--vt-seg)); }

/* O ECG que rola: o traco branco sobre uma sombra escura da mesma forma, para ler sobre qualquer
   fundo sem filtro. Os dois andam pelo mesmo transform, escrito por quadro pelo vitals.js. */
.vt-ecg { display: block; overflow: visible; }
.vt-ecg__sombra { fill: none; stroke: rgb(var(--aqua-black-rgb) / 55%); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; will-change: transform; }
.vt-ecg__traco { fill: none; stroke: var(--aqua-text); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; will-change: transform; }
.vt-ecg--fino .vt-ecg__sombra { stroke-width: 4; }
.vt-ecg--fino .vt-ecg__traco { stroke-width: 2; }

/* O anel tracejado do medico, sobre o corpo, no centro do quadro; o tracinho o liga a margem. */
.vt-alvo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 240px;
	height: 240px;
	margin: -120px 0 0 -120px;
	border-radius: var(--aqua-radius-full);
	border: 2px dashed rgb(var(--aqua-text-rgb) / 45%);
	animation: vt-surgir var(--aqua-t-lento) var(--aqua-ease-out) both;
}
.vt-alvo::after {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: 42px;
	height: 2px;
	margin-top: -1px;
	background: rgb(var(--aqua-text-rgb) / 45%);
}

/* ---- o movimento comum: entrada de baixo, cascata por --i, e a vista que aparece ------------ */
@keyframes vt-subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vt-surgir { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes vt-aparecer { from { opacity: 0; } to { opacity: 1; } }
.vt-entra { animation: vt-subir var(--aqua-t-base) var(--aqua-ease-out) both; }
.vt-cascata > * { animation: vt-subir var(--aqua-t-base) var(--aqua-ease-out) both; animation-delay: calc(var(--i, 0) * var(--aqua-cascata)); }
.vt-vista { animation: vt-aparecer var(--aqua-t-lento) var(--aqua-ease-out) both; }

/* ==== movimento reduzido corta tudo =========================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}