/* ===========================================================================
   c-modal - a janela que responde ao clique em "Baixar o cliente"

   ORDEM DE LEITURA, e ela e o ponto:
     1. aviso   -- o estado do download. E a resposta a pergunta que foi feita.
     2. passos  -- o que da para fazer hoje, cada um com o seu botao.
     3. mob     -- a criatura, como contexto do convite.
     4. rodape  -- requisitos, que so importam para quem ja decidiu.

   Tudo abaixo de .c-modal: nada aqui alcanca o resto da pagina.
   =========================================================================== */

.c-modal {
	width: min(920px, calc(100vw - 2rem));
	/* dvh depois do vh: navegador sem suporte fica com o vh; com suporte, a barra
	   dinamica do iOS/Android nao corta mais o rodape/botao fechar. */
	max-height: min(700px, calc(100vh - 2rem));
	max-height: min(700px, calc(100dvh - 2rem));

	/* Coluna flex, e nao o bloco padrao do dialog.
	   Sem isto a coluna de texto nao rolava: ela tem overflow-y auto, mas dentro
	   de uma linha dimensionada por conteudo a altura dela e sempre igual ao
	   conteudo, entao o overflow nunca engatava e o `overflow: hidden` daqui
	   CORTAVA o fim do texto (o bloco da criatura sumia pela metade). Com flex +
	   min-height: 0 nos filhos, a coluna encolhe e passa a rolar. */
	display: flex;
	flex-direction: column;

	padding: 0;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio-g, 14px);
	background: var(--surface);
	color: var(--ink);
	overflow: hidden;
}

/* <dialog> nao aparece sem [open]; declarar isto evita o flash do conteudo
   antes de o CSS ser aplicado em conexao lenta. */
.c-modal:not([open]) { display: none; }

.c-modal::backdrop {
	background: rgba(4, 4, 6, 0.78);
	backdrop-filter: blur(3px);
}

/* Entrada curta. Sem isto o modal simplesmente pisca na tela. */
.c-modal[open] {
	animation: c-modal-entra 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes c-modal-entra {
	from { opacity: 0; transform: translateY(10px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.c-modal[open] { animation: none; }
}

/* ------------------------------------------------------------------ fechar -- */

.c-modal__fecharForm {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	margin: 0;
}

.c-modal__fechar {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border: 1px solid var(--linha);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: var(--ink-2);
	cursor: pointer;
	transition: color var(--transicao), border-color var(--transicao);
}

.c-modal__fechar:hover {
	color: var(--ink);
	border-color: var(--ouro);
}

/* ------------------------------------------------------------------- corpo -- */

.c-modal__corpo {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);

	/* Ocupa a altura que sobrar e PODE encolher. O min-height: 0 e o essencial:
	   item de flex nasce com min-height: auto, que o impede de ficar menor que o
	   conteudo -- e ai nada rola. */
	flex: 1 1 auto;
	min-height: 0;
}

/* ------------------------------------------------------------------- arte --- */

.c-modal__arte {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--e-3);
	background:
		radial-gradient(circle at 50% 42%,
			rgba(217, 180, 90, 0.13), transparent 62%),
		linear-gradient(180deg, #0d0d10, #08080a);
	border-right: 1px solid var(--linha);
	min-height: 340px;
	/* A criatura nunca extravasa o painel: sem isto, no modal em tela cheia do
	   celular ela passava por cima do texto abaixo. */
	overflow: hidden;
}

.c-modal__halo {
	position: absolute;
	left: 50%;
	bottom: 16%;
	width: 62%;
	height: 12px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(217, 180, 90, 0.3), transparent 70%);
	pointer-events: none;
}

.c-modal__mob {
	position: relative;
	width: 100%;
	/* 260px, e nao 320: o laco animado e renderizado a 320px e sai recortado com
	   ~228px de largura. Mostrar acima de 260 comecaria a parecer esticado, e
	   gerar mais resolucao custaria o dobro de bytes por uma diferenca que ninguem
	   ve num modal. */
	max-width: 260px;
	height: auto;
	/* A sombra segue a silhueta porque o png tem alpha -- filter respeita o
	   canal, ao contrario de box-shadow. */
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
	transition: opacity 180ms ease;
}

/* Enquanto a proxima imagem decodifica, a atual apaga um pouco. Fica claro que
   algo esta vindo, sem spinner. */
.c-modal[data-carregando] .c-modal__mob { opacity: 0.35; }

/* ------------------------------------------------------------------ texto --- */

.c-modal__texto {
	padding: var(--e-3) var(--e-4) var(--e-4);

	/* Mesma historia: item de grid tambem nasce com min-height: auto. */
	min-height: 0;
	overflow-y: auto;

	/* Reserva a calha da barra de rolagem: sem isto o texto reflui alguns pixels
	   quando a barra aparece. */
	scrollbar-gutter: stable;
}

.c-modal__olho {
	color: var(--ouro-escuro);
	font-family: var(--fonte-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ aviso --- */

/* O ESTADO DO DOWNLOAD, no topo e dentro de uma caixa propria.
   Quem clicou em "baixar" fez uma pergunta; esta caixa e a resposta. Tem fundo e
   borda justamente para ser lida antes de qualquer outra coisa da janela --
   inclusive antes da criatura, que antes ficava com esse destaque e deixava a
   pergunta sem responder. */
.c-modal__aviso {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.875rem;
	margin-top: 0.75rem;
	padding: var(--e-2);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface-2);
}

/* Depois da estreia a mesma caixa vira o convite para baixar: dourada. */
.c-modal__aviso--pronto {
	border-color: var(--ouro-escuro);
	background: rgba(217, 180, 90, 0.07);
}

.c-modal__avisoIcone {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--linha-forte);
	color: var(--ink-2);
}

.c-modal__aviso--pronto .c-modal__avisoIcone {
	border-color: var(--ouro-escuro);
	color: var(--ouro);
}

.c-modal__titulo {
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.c-modal__avisoLinha {
	margin-top: 0.5rem;
	color: var(--ink-2);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Data e contagem juntas, em mono: leem como um dado, nao como enfeite. A
   contagem vem calculada no PHP -- relogio do cliente mostraria numero diferente
   para quem tem a data do sistema errada. */
.c-modal__prazo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.c-modal__prazo strong {
	color: var(--ouro);
	font-family: var(--fonte-mono);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.c-modal__prazo span {
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.c-modal__baixar { margin-top: 0.875rem; }

/* ------------------------------------------------------------------ passos -- */

.c-modal__passosTitulo {
	margin-top: var(--e-3);
	color: var(--ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* <ol> de verdade: sao duas coisas em ordem de utilidade, e o leitor de tela
   anuncia "lista de 2 itens". O counter substitui o marcador padrao para o numero
   poder ser dourado e alinhar com o titulo. */
.c-modal__passos {
	margin-top: 0.75rem;
	padding: 0;
	list-style: none;
	counter-reset: passo;
}

.c-modal__passo {
	position: relative;
	padding: 0 0 var(--e-2) 2rem;
	counter-increment: passo;
}

.c-modal__passo:last-child { padding-bottom: 0; }

.c-modal__passo::before {
	content: counter(passo);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	border: 1px solid var(--ouro-escuro);
	border-radius: 50%;
	color: var(--ouro);
	font-family: var(--fonte-mono);
	font-size: 0.6875rem;
}

/* Fio vertical ligando um numero ao outro. Sem ele os dois blocos parecem
   soltos; com ele viram uma sequencia. */
.c-modal__passo:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.75rem;
	left: 0.6875rem;
	bottom: 0.5rem;
	width: 1px;
	background: var(--linha-forte);
}

.c-modal__passoTitulo {
	padding-top: 0.125rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.c-modal__passoTexto {
	margin-top: 0.3125rem;
	color: var(--ink-2);
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* Acao do passo: botao de verdade, nao link de texto. E o que a janela quer que a
   pessoa faca agora, entao tem area de clique. */
.c-modal__passoAcao {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.625rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface);
	color: var(--ink);
	font-size: 0.8125rem;
	transition: border-color var(--transicao), background var(--transicao);
}

.c-modal__passoAcao:hover {
	border-color: var(--ouro);
	background: rgba(217, 180, 90, 0.08);
}

/* O botao do Google fica branco, como manda a marca deles -- e como ja aparece na
   secao de conta e no cliente, para ser a mesma coisa em todo lugar. */
.c-modal__passoAcao--google {
	background: #fff;
	border-color: #dadce0;
	color: #3c4043;
	font-weight: 500;
}

.c-modal__passoAcao--google:hover {
	background: #f7f8f8;
	border-color: #d2d5d9;
}

.c-modal__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.625rem;
}

.c-modal__partilhaBtn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface-2);
	color: var(--ink-2);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: color var(--transicao), border-color var(--transicao),
	            background var(--transicao);
}

.c-modal__partilhaBtn:hover {
	color: var(--ink);
	border-color: var(--linha-forte);
	background: var(--surface);
}

.c-modal__partilhaBtn[data-ok] {
	color: var(--ouro);
	border-color: var(--ouro-escuro);
}

/* ------------------------------------------------------------------- mob ---- */

/* A criatura como contexto: depois das acoes, recuada atras de um fio. Ela e o
   motivo de o convite ser divertido, nao o assunto da janela. */
.c-modal__mobBloco {
	margin-top: var(--e-3);
	padding: var(--e-2) 0 0 var(--e-2);
	border-top: 1px solid var(--linha);
	border-left: 2px solid var(--linha-forte);
}

.c-modal__mobOlho {
	color: var(--ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.c-modal__manchete {
	margin-top: 0.375rem;
	color: var(--ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.c-modal__lore {
	margin-top: 0.5rem;
	color: var(--ink-2);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ dados --- */

.c-modal__dados {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 0.875rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--linha);   /* vira a linha entre as celulas */
	overflow: hidden;
}

.c-modal__dado {
	padding: 0.5rem 0.75rem;
	background: var(--surface-2);
}

.c-modal__dado--largo { grid-column: 1 / -1; }

.c-modal__dado dt {
	color: var(--ink-3);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c-modal__dado dd {
	margin-top: 0.15rem;
	color: var(--ouro);
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
}

/* Mob sem drop: o texto e uma constatacao, nao um premio. Sem o dourado. */
.c-modal__dado--vazio {
	color: var(--ink-3);
	font-family: inherit;
	font-size: 0.75rem;
}

.c-modal__nota {
	margin-top: 0.625rem;
	color: var(--ink-3);
	font-size: 0.6875rem;
	line-height: 1.5;
}

/* ----------------------------------------------------------------- rodape --- */

/* Requisitos do sistema. No pe porque so importam para quem ja decidiu -- no topo
   competiriam com a resposta sobre o download. */
.c-modal__rodape {
	margin-top: var(--e-3);
	padding-top: 0.75rem;
	border-top: 1px solid var(--linha);
	color: var(--ink-3);
	font-size: 0.6875rem;
}

/* -------------------------------------------------------------- responsivo -- */

@media (max-width: 768px) {
	.c-modal {
		/* No telefone o modal ocupa a tela toda: 920px numa coluna estreita
		   deixaria a arte minuscula e o texto apertado. dvh depois do vh para a
		   barra dinamica do celular nao cortar o rodape. */
		width: 100%;
		max-width: none;
		max-height: 100vh;
		max-height: 100dvh;
		height: 100vh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.c-modal__corpo {
		grid-template-columns: 1fr;
		/* minmax(0, 1fr) na segunda linha: a coluna de texto fica limitada pelo
		   que sobrou e rola dentro dela mesma, em vez de esticar o grid. */
		grid-template-rows: auto minmax(0, 1fr);
	}

	.c-modal__arte {
		min-height: 0;
		/* Altura por viewport, nao por conteudo. Com o aviso e os dois passos o
		   texto ficou mais alto que antes, entao a arte cede espaco: 24vh ainda
		   mostra a criatura e deixa o aviso inteiro visivel sem rolar -- que e o
		   que a janela precisa entregar de primeira. */
		height: 24vh;
		height: 24dvh;
		border-right: 0;
		border-bottom: 1px solid var(--linha);
	}

	.c-modal__mob { max-width: none; max-height: 100%; width: auto; }

	.c-modal__texto { padding: var(--e-3); }
}

@media (max-width: 480px) {
	.c-modal__dados { grid-template-columns: 1fr; }

	.c-modal__botoes .c-modal__partilhaBtn {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* O icone do aviso sai: em 320px ele rouba 40px da largura do titulo, que e
	   o texto mais importante da janela. */
	.c-modal__aviso { grid-template-columns: 1fr; }
	.c-modal__avisoIcone { display: none; }
}