/* Terminal de boot exibido antes do conteúdo da /index.
   Baseado em https://github.com/HairyDuck/terminal (MIT, atribuição
   mantida aqui no código-fonte). Cores seguem as variáveis de tema do
   site (escuro/claro/steam-green), não um esquema fixo. */

#boot-terminal {
	position: fixed;
	inset: 0;
	/* Abaixo do #settings-panel (997) pra engrenagem continuar acessível
	   durante o boot, mas acima de tudo o resto da página. */
	z-index: 900;
	background: var(--clr-black-a0);
	font-family: "VT323", monospace;
	text-align: left;
	transition: opacity 0.6s ease;
}

#boot-terminal.boot-terminal-hide {
	opacity: 0;
	pointer-events: none;
}

body.boot-active {
	overflow: hidden;
}

#boot-terminal .crt {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--clr-black-a0);
}

/* A animação do CRT só roda depois da verificação (bootSequence()), pra
   não ter duas camadas fixed full-screen animando ao mesmo tempo (uma
   invisível atrás do #human-verify) — combinação que o WebKit do iOS
   pode renderizar mal (flicker/camada sumindo). */
body.boot-active #boot-terminal .crt {
	animation: boot-flicker 0.15s infinite;
}

#boot-terminal .crt::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0.1) 0%,
		rgba(0, 0, 0, 0.3) 80%,
		rgba(0, 0, 0, 0.5) 100%
	);
	pointer-events: none;
}

#boot-terminal .crt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.2),
		rgba(0, 0, 0, 0.2) 1px,
		transparent 1px,
		transparent 2px
	);
	pointer-events: none;
}

#boot-terminal .scanline {
	width: 100%;
	height: 100px;
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix(in srgb, var(--clr-main-a30) 25%, transparent),
		transparent
	);
	position: absolute;
	opacity: 0.7;
	pointer-events: none;
	z-index: 1;
}

body.boot-active #boot-terminal .scanline {
	animation: boot-scanline 8s linear infinite;
}

#boot-terminal .terminal-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
}

#boot-terminal .terminal {
	flex: 1;
	border: var(--borda-padrao);
	background: color-mix(in srgb, var(--clr-black-a0) 70%, transparent);
	overflow-y: auto;
	padding: 2rem;
	color: var(--clr-white);
	font-size: 1.4rem;
	text-shadow: 0 0 10px color-mix(in srgb, var(--clr-main-a30) 60%, transparent);
}

#boot-ascii {
	margin: 0 0 1.2rem;
	color: var(--clr-main-a40);
	font-size: 0.85rem;
	line-height: 1.15;
	text-shadow: 0 0 10px color-mix(in srgb, var(--clr-main-a30) 60%, transparent);
	white-space: pre;
	overflow-x: auto;
}

#boot-output {
	white-space: pre-wrap;
	line-height: 1.35;
}

#boot-output .output-line {
	min-height: 1.35em;
}

#boot-output .output-line .prompt {
	color: var(--clr-main-a40);
}

#boot-output .cursor {
	color: var(--clr-main-a40);
	animation: boot-blink 1s step-end infinite;
}

/* O histórico só existe na pele de celular, lá embaixo. No desktop e no
   tablet o boot continua sendo a moldura de sempre, com a ascii art do
   dharlan no topo e nada mais. */
#boot-historico {
	display: none;
}

/* iOS ganha a bússola, o resto ganha o robô. O atributo vem do script no
   <head> da index; sem ele (JS desligado) sobra o robô, que é o caso
   comum. */
:root[data-plataforma="ios"] #boot-arte-android,
:root:not([data-plataforma="ios"]) #boot-arte-ios {
	display: none;
}

@keyframes boot-scanline {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100vh);
	}
}

@keyframes boot-blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@keyframes boot-flicker {
	0% {
		opacity: 0.98;
	}
	5% {
		opacity: 0.91;
	}
	10% {
		opacity: 0.95;
	}
	15% {
		opacity: 0.93;
	}
	20% {
		opacity: 0.99;
	}
	80% {
		opacity: 0.93;
	}
	85% {
		opacity: 0.92;
	}
	90% {
		opacity: 0.98;
	}
	95% {
		opacity: 0.91;
	}
	100% {
		opacity: 0.97;
	}
}

/* ---------------------------------------------------------------------
   Pele mobile: o boot deixa de ser uma caixa no meio da tela e vira a
   sessão de terminal de um celular — histórico de comandos já rodados,
   relógio, a arte do sistema e a régua de cores do fastfetch. O boot de
   verdade continua embaixo de tudo, no #boot-output.

   É só desenho: o boot-terminal.js não sabe que nada disto existe, escreve
   as mesmas linhas, na mesma ordem, com os mesmos áudios.

   A paleta sai toda das variáveis de tema, então a tela acompanha o
   seletor: rosa sobre quase-preto no escuro (o padrão), e branco nos temas
   claros sem nenhuma regra a mais — lá o --clr-black-a0 já é quase branco
   e o --clr-white é escuro, então o desenho inteiro inverte sozinho.
   Mexer nas cinco variáveis abaixo repinta a tela inteira, inclusive a
   régua de cores.

   Os tamanhos saem de vw E vh (min() entre os dois) porque a tela toda
   precisa caber sem rolagem: o vw sozinho estoura em aparelho baixo e
   largo, o vh sozinho estoura em tela estreita.

   Breakpoint de 600px: é largura de celular. Tablet (601px a 1024px) fica com
   o boot antigo, a caixa centralizada — a pele de celular esticada naquela
   largura não faz sentido.

   Atenção: o boot-terminal.js tem um breakpoint PRÓPRIO, de 1024px, pra
   decidir que não há teclado à mão e pular o "Press enter". Os dois números
   são diferentes de propósito: o tablet fica com o desenho antigo mas sai no
   "Done!" sozinho, sem pedir Enter.
   --------------------------------------------------------------------- */

/* Isto vale pro tablet também, e é regra antiga: a ascii art do dharlan não
   cabe direito abaixo de 1024px. No celular quem faz esse papel é a arte do
   sistema, lá no histórico. */
@media (max-width: 1024px) {
	#boot-ascii {
		display: none;
	}
}

@media (max-width: 600px) {
	#boot-terminal {
		--boot-fundo: var(--clr-black-a0);
		--boot-destaque: var(--clr-main-a40);
		--boot-arte-cor: var(--clr-main-a30);
		/* O meio-tom das respostas da máquina: o tom do tema puxado pra cor do
		   texto, que no escuro clareia e no claro escurece — o mesmo papel que
		   o pêssego fazia sobre o laranja. */
		--boot-suave: color-mix(in srgb, var(--clr-main-a50) 55%, var(--clr-white));
		--boot-texto: var(--clr-white);

		background: var(--boot-fundo);
		/* Em celular de verdade a barra do navegador come altura, e o inset: 0
		   mede o viewport sem ela — o rodapé da tela ficava atrás da barra. O dvh
		   acompanha a barra aparecendo e sumindo; navegador sem suporte ignora a
		   linha e continua no inset: 0 de antes. */
		height: 100dvh;
	}

	#boot-terminal .crt {
		background: var(--boot-fundo);
	}

	#boot-terminal .scanline {
		background: linear-gradient(
			to bottom,
			transparent,
			color-mix(in srgb, var(--boot-destaque) 22%, transparent),
			transparent
		);
	}

	/* Sem moldura nenhuma: a tela preta vai de beirada a beirada, que é como
	   um terminal de celular se parece de verdade. */
	#boot-terminal .terminal-container {
		padding: 0;
	}

	/* Caixa translúcida como no boot antigo: é o que deixa a vinheta, os
	   scanlines e o flicker do .crt aparecerem por trás da tela. Com fundo
	   opaco aqui o CRT sumia — ele é uma camada atrás do contêiner. */
	#boot-terminal .terminal {
		background: color-mix(in srgb, var(--boot-fundo) 72%, transparent);
		border: none;
		color: var(--boot-texto);
		font-size: min(4vw, 2vh);
		line-height: 1.45;
		padding: 0.9rem 0.8rem 1rem;
		text-shadow: 0 0 10px
			color-mix(in srgb, var(--boot-destaque) 40%, transparent);
	}

	#boot-historico {
		display: block;
	}

	.boot-linha {
		white-space: pre-wrap;
	}

	/* Comando em claro, resposta da máquina em pêssego, prompt em laranja: é
	   o mesmo escalonamento do print. */
	.boot-cmd {
		color: var(--boot-texto);
		margin-top: 0.7em;
	}

	.boot-saida {
		color: var(--boot-suave);
	}

	.boot-prompt,
	#boot-output .output-line .prompt,
	#boot-output .cursor {
		color: var(--boot-destaque);
		font-weight: bold;
	}

	#boot-output {
		color: var(--boot-suave);
		margin-top: 0.7em;
	}

	#boot-relogio {
		margin: 0.2em 0 0.4em;
		text-align: center;
	}

	#boot-hora {
		color: var(--boot-suave);
		font-size: min(19vw, 9vh);
		letter-spacing: 0.05em;
		line-height: 1;
		text-shadow: 0 0 18px
			color-mix(in srgb, var(--boot-destaque) 55%, transparent);
	}

	.boot-relogio-data {
		color: var(--boot-texto);
	}

	/* Arte à esquerda, tabela à direita — a mesma divisão do neofetch. */
	#boot-fetch {
		align-items: center;
		display: flex;
		gap: 0.9rem;
		justify-content: center;
		margin: 0.3em 0;
	}

	/* Ascii de verdade (as do neofetch), então herda a VT323 do terminal e
	   desenha certo sem depender de fonte de símbolos do sistema — era o
	   braille que entortava, porque cada aparelho o resolvia numa fonte
	   diferente, com largura diferente por caractere.

	   As duas têm ~32 colunas, daí um tamanho só pras duas. O line-height
	   abaixo de 1 é de propósito: a VT323 tem muito espaço morto acima e
	   abaixo do glifo, e sem isso o desenho sai esticado na vertical. */
	.boot-arte {
		color: var(--boot-arte-cor);
		display: block;
		font-size: min(2.9vw, 1.45vh);
		letter-spacing: 0;
		line-height: 0.92;
		margin: 0;
		text-shadow: 0 0 12px
			color-mix(in srgb, var(--boot-destaque) 55%, transparent);
		white-space: pre;
	}

	#boot-fetch-info {
		column-gap: 0.6rem;
		color: var(--boot-suave);
		display: grid;
		font-size: min(3.2vw, 1.6vh);
		grid-template-columns: auto auto;
	}

	.boot-fetch-chave {
		color: var(--boot-destaque);
		font-weight: bold;
	}

	/* A primeira linha da tabela é o "dharlan@root" com o traço embaixo, como
	   o fetch imprime. O traço é border, não uma linha de hífens, pra não
	   depender da largura da fonte. */
	#boot-fetch-info .boot-fetch-chave:first-child {
		border-bottom: 1px solid
			color-mix(in srgb, var(--boot-destaque) 60%, transparent);
		grid-column: 1 / -1;
		margin-bottom: 0.2em;
		padding-bottom: 0.1em;
	}

	#boot-fetch-titulo {
		display: none;
	}

	#boot-paleta {
		display: flex;
		justify-content: center;
		margin: 0.2em 0 0;
	}

	#boot-paleta span {
		height: min(2.6vw, 1.4vh);
		width: min(7vw, 3.6vh);
	}

	/* A rampa que o fastfetch imprime, montada a partir do tema: do fundo até
	   a cor do texto, passando pelos três tons da cor principal. */
	#boot-paleta span:nth-child(1) {
		background: color-mix(in srgb, var(--clr-main-a30) 25%, var(--boot-fundo));
	}
	#boot-paleta span:nth-child(2) {
		background: color-mix(in srgb, var(--clr-main-a30) 50%, var(--boot-fundo));
	}
	#boot-paleta span:nth-child(3) {
		background: color-mix(in srgb, var(--clr-main-a30) 75%, var(--boot-fundo));
	}
	#boot-paleta span:nth-child(4) {
		background: var(--clr-main-a30);
	}
	#boot-paleta span:nth-child(5) {
		background: var(--clr-main-a40);
	}
	#boot-paleta span:nth-child(6) {
		background: var(--clr-main-a50);
	}
	#boot-paleta span:nth-child(7) {
		background: color-mix(in srgb, var(--clr-main-a50) 45%, var(--boot-texto));
	}
	#boot-paleta span:nth-child(8) {
		background: var(--boot-texto);
	}

}

/* ---------------------------------------------------------------------
   Engrenagem e botão do rádio durante o boot.

   Só no celular (≤600px): na fase do terminal os dois ficam apagados e
   marcados com um X vermelho, viram enfeite até o boot acabar, e o
   painel de configurações fica travado fechado. Em tablet e desktop a
   engrenagem funciona normalmente durante o boot inteiro — lá sobra tela,
   e o boot não ocupa tudo.

   O que vale em QUALQUER largura é a recusa do botão do rádio (som +
   balançada, no boot-terminal.js): é por ele que dava pra escapar do boot
   indo direto pra /radio/. Por isso a animação lá embaixo fica fora do
   @media.

   O gatilho é o body.boot-active, que o próprio boot-terminal.js põe ao
   começar a sequência e tira no fim — por isso não há nada a limpar aqui
   quando o boot termina.
   --------------------------------------------------------------------- */

@media (max-width: 600px) {
	/* O apagado vai no ícone e na borda, não no elemento inteiro: opacity no
	   contêiner apagaria o X junto, já que pseudo-elemento herda a opacidade
	   do pai e não tem como passar dela. */
	/* Vidro: as duas caixinhas têm fundo opaco nos seus módulos, e no celular
	   isso tapava justamente as linhas que o boot está escrevendo. Aqui o
	   fundo fica translúcido e o que passa por trás sai desfocado, então dá
	   pra ler sem o X se perder no meio do texto.

	   --clr-black-a0 direto, e não var(--boot-fundo): aquela variável é
	   declarada no #boot-terminal, e estes dois elementos não estão dentro
	   dele, então não a herdam. É a mesma cor, por outro caminho.

	   O -webkit- ainda é necessário no Safari/iOS e fica colado no sem
	   prefixo de propósito, fora da ordem alfabética do resto do arquivo. */
	body.boot-active #settings-gear,
	body.boot-active #radio-botao {
		backdrop-filter: blur(0.5px);
		-webkit-backdrop-filter: blur(0.5px);
		background: color-mix(in srgb, var(--clr-black-a0) 20%, transparent);
		border-color: color-mix(in srgb, var(--clr-borda) 22%, transparent);
		cursor: not-allowed;
	}

	/* Só a engrenagem precisa virar contêiner pro X: ela é um div comum dentro
	   do painel. O #radio-botao já é position: fixed, e repetir position aqui
	   o arrancava do canto inferior esquerdo e jogava no fluxo da página — era
	   o desalinhamento entre os dois durante o boot. */
	body.boot-active #settings-gear {
		position: relative;
	}

	/* O painel de configurações não abre por clique: o settings-panel.js o abre
	   no mouseenter da engrenagem, e no celular um toque dispara hover emulado
	   — daí ele ainda abrir durante o boot, mesmo com o clique sendo recusado.
	   Fechar por CSS resolve sem mexer naquele módulo, e some sozinho junto
	   com o boot-active. A engrenagem continua recebendo evento de propósito:
	   é o que permite a recusa com som e balançada. */
	body.boot-active #settings-box,
	body.boot-active #settings-box.open {
		opacity: 0 !important;
		pointer-events: none !important;
		visibility: hidden !important;
	}

	body.boot-active #settings-gear span svg,
	body.boot-active #radio-botao svg {
		opacity: 0.12;
	}

	body.boot-active #settings-gear::after,
	body.boot-active #radio-botao::after {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges' fill='%23ff2b2b'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='6' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
		content: "";
		image-rendering: pixelated;
		inset: 0;
		opacity: 0.85;
		pointer-events: none;
		position: absolute;
	}
}

/* Balançada de "não". Mora aqui e não no radio-botao.js porque agora vale
   pros dois botões, e só existe durante o boot — que só existe nesta folha. */
#settings-gear.boot-negado,
#radio-botao.boot-negado {
	animation: boot-nega 0.4s ease-in-out;
}

/* Amplitude pequena de propósito: é um "não" de cabeça, não um tremor de
   erro. */
@keyframes boot-nega {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-3px);
	}
	45% {
		transform: translateX(3px);
	}
	70% {
		transform: translateX(-2px);
	}
	88% {
		transform: translateX(1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#settings-gear.boot-negado,
	#radio-botao.boot-negado {
		animation: none;
	}
}

/* Tela de "verificação humana" antes do boot — gag/retro, sem branding de
   terceiros. Serve também pra garantir um gesto real do usuário, necessário
   pro autoplay do áudio de digitação mais adiante. */

#human-verify {
	position: fixed;
	inset: 0;
	z-index: 950;
	background: var(--clr-black-a0);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "VT323", monospace;
	transition: opacity 0.5s ease;
}

#human-verify.human-verify-hide {
	opacity: 0;
	pointer-events: none;
}

/* Fundo de ondas com dither (dither-bg.js). Fica atrás de tudo; se o WebGL2
   não estiver disponível o canvas nem é inserido e sobra o fundo liso. */
#human-verify .dither-bg {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/* Vinheta entre o fundo e a caixa: escurece as bordas da tela e abre um
   claro no centro, pra caixa de verificação não competir com as ondas. */
#human-verify::after {
	background:
		radial-gradient(
			ellipse at center,
			color-mix(in srgb, var(--clr-black-a0) 55%, transparent) 0%,
			color-mix(in srgb, var(--clr-black-a0) 80%, transparent) 45%,
			var(--clr-black-a0) 100%
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

#human-verify .verify-box {
	z-index: 2;
}

.verify-box {
	border: var(--borda-padrao);
	background: color-mix(in srgb, var(--clr-black-a0) 70%, transparent);
	padding: 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	min-width: 280px;
	box-shadow: 0 0 20px color-mix(in srgb, var(--clr-main-a30) 25%, transparent);

	/* Brilho de borda que segue o cursor (adaptado do BorderGlow do
	   reactbits.dev, que é quase todo CSS — o JS só alimenta estas duas
	   variáveis). O boot-terminal.js atualiza --edge-proximity (0 a 100,
	   quanto o cursor está perto da borda) e --cursor-angle (de que lado
	   ele está), interpolados a cada frame pra ficar suave. */
	--edge-proximity: 0;
	--cursor-angle: 45deg;
	--edge-sensitivity: 30;
	--color-sensitivity: 50;
	--glow-padding: 40px;
	--cone-spread: 25;
	isolation: isolate;
	position: relative;
}

/* Fora do hover o efeito some por completo — some devagar, pra não piscar
   ao sair. É o que a regra :not(:hover) do componente original faz. */
.verify-box:not(:hover)::before,
.verify-box:not(:hover) > .edge-light {
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

/* Borda acesa: só o arco voltado pro cursor aparece, recortado pelo
   conic-gradient. Cor vem do tema, então acompanha dark/light/steam-green. */
.verify-box::before,
.verify-box > .edge-light {
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.35s ease-out;
	z-index: -1;
}

.verify-box::before {
	background:
		linear-gradient(var(--clr-black-a0) 0 100%) padding-box,
		linear-gradient(
				color-mix(in srgb, var(--clr-main-a40) 90%, transparent) 0 100%
			)
			border-box;
	border: 1px solid transparent;
	opacity: calc(
		(var(--edge-proximity) - var(--color-sensitivity)) /
			(100 - var(--color-sensitivity))
	);
	-webkit-mask-image: conic-gradient(
		from var(--cursor-angle) at center,
		black calc(var(--cone-spread) * 1%),
		transparent calc((var(--cone-spread) + 15) * 1%),
		transparent calc((100 - var(--cone-spread) - 15) * 1%),
		black calc((100 - var(--cone-spread)) * 1%)
	);
	mask-image: conic-gradient(
		from var(--cursor-angle) at center,
		black calc(var(--cone-spread) * 1%),
		transparent calc((var(--cone-spread) + 15) * 1%),
		transparent calc((100 - var(--cone-spread) - 15) * 1%),
		black calc((100 - var(--cone-spread)) * 1%)
	);
}

/* Halo externo, mais largo e difuso, também recortado pro lado do cursor. */
.verify-box > .edge-light {
	inset: calc(var(--glow-padding) * -1);
	mix-blend-mode: plus-lighter;
	opacity: calc(
		(var(--edge-proximity) - var(--edge-sensitivity)) /
			(100 - var(--edge-sensitivity))
	);
	-webkit-mask-image: conic-gradient(
		from var(--cursor-angle) at center,
		black 2.5%,
		transparent 10%,
		transparent 90%,
		black 97.5%
	);
	mask-image: conic-gradient(
		from var(--cursor-angle) at center,
		black 2.5%,
		transparent 10%,
		transparent 90%,
		black 97.5%
	);
}

.verify-box > .edge-light::before {
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--clr-main-a40) 90%, transparent),
		inset 0 0 6px 0 color-mix(in srgb, var(--clr-main-a40) 40%, transparent),
		inset 0 0 15px 0 color-mix(in srgb, var(--clr-main-a30) 30%, transparent),
		inset 0 0 40px 2px color-mix(in srgb, var(--clr-main-a30) 12%, transparent),
		0 0 6px 0 color-mix(in srgb, var(--clr-main-a40) 40%, transparent),
		0 0 15px 0 color-mix(in srgb, var(--clr-main-a30) 30%, transparent),
		0 0 45px 2px color-mix(in srgb, var(--clr-main-a30) 12%, transparent);
	content: "";
	inset: var(--glow-padding);
	position: absolute;
}

/* Sem cursor (toque, teclado) o efeito simplesmente não liga — a caixa
   continua com o box-shadow de repouso. */
@media (prefers-reduced-motion: reduce) {
	.verify-box::before,
	.verify-box > .edge-light {
		display: none;
	}
}

.verify-check {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	cursor: pointer;
	user-select: none;
}

.verify-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.verify-box-visual {
	position: relative;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: 2px solid var(--clr-main-a40);
	background: color-mix(in srgb, var(--clr-black-a0) 50%, transparent);
}

.verify-spinner {
	position: absolute;
	inset: 8px;
	border: 2px solid transparent;
	border-top-color: var(--clr-main-a40);
	border-radius: 50%;
	opacity: 0;
}

#human-verify .verify-spinner {
	border-radius: 50% !important;
}

.verify-checkmark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--clr-main-a40);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.verify-check.is-checking .verify-spinner {
	opacity: 1;
	animation: verify-spin 0.7s linear infinite;
}

.verify-check.is-checked .verify-checkmark {
	opacity: 1;
	transform: scale(1);
}

.verify-check.is-checked .verify-box-visual {
	background: color-mix(in srgb, var(--clr-main-a40) 20%, transparent);
}

.verify-label {
	color: var(--clr-white);
	font-size: 1.3rem;
}

.verify-footer {
	color: var(--clr-white);
	font-size: 0.95rem;
	opacity: 0.55;
	margin-top: 0.3rem;
}

@keyframes verify-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 600px) {
	.verify-box {
		min-width: unset;
		width: min(90vw, 320px);
		padding: 1.6rem 1.4rem;
	}
}