/*
	Cases: o índice (`archive-case.php`) e cada case (`single-case.php`).

	A abertura é o componente das internas (`interna.css`). O porquê de cada
	seção está no cabeçalho dos dois templates.
*/

/* ---------- abertura do índice: as faixas ---------- */

/*
	Uma faixa vertical por case, com o vão escuro de 7 px do painel da Home
	entre elas. Elas sobem uma depois da outra na chegada (a máscara abre de
	baixo), e cada imagem assenta de uma escala um pouco maior — no relógio,
	porque acima da dobra a rolagem não dispara nada.
*/
.interna-abertura__cena--faixas .interna-abertura__faixas {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 7px;
}

.interna-abertura__faixa {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: clip;
	background: var(--pic-elevado);
}

/*
	O fio de luz na borda e o véu uniforme por cima: o mesmo par dos quadros
	do painel da Home. Sem eles, as três telas claras encostavam uma na outra
	através do vão e a manchete disputava com o texto das telas. Véu em
	pseudo-elemento, e não `filter` — filtro dentro de recorte rasteriza em
	quadrados no Chrome (lição de 23/09/2026).
*/
.interna-abertura__faixa::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 29, 36, 0.42);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	pointer-events: none;
}

.interna-abertura__faixa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

@media (prefers-reduced-motion: no-preference) {
	.interna-abertura__faixa {
		animation: cases-faixa-sobe 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: calc(0.12s + var(--i, 0) * 0.14s);
	}

	.interna-abertura__faixa img {
		animation: cases-faixa-assenta 2.2s cubic-bezier(0.16, 1, 0.3, 1) both,
			pic-interna-respira 24s ease-in-out 2.2s infinite alternate;
		animation-delay: calc(0.12s + var(--i, 0) * 0.14s), calc(2.3s + var(--i, 0) * 0.6s);
	}
}

@keyframes cases-faixa-sobe {
	from {
		clip-path: inset(100% 0 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes cases-faixa-assenta {
	from {
		transform: scale(1.12);
	}

	to {
		transform: scale(1);
	}
}

/* ---------- abertura de um case ---------- */

/* A chamada de um case é frase inteira, não título curto: um corpo abaixo. */
.single-case .interna-abertura__frase {
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 1.08;
}

/* ---------- um número de case ---------- */

.case-numero {
	display: grid;
	gap: 0.35rem;
}

.case-numero__valor {
	font-size: clamp(2.8rem, 6.4vw, 5.2rem);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.04em;

	/*
		Sem `tabular-nums`, de propósito. Algarismo de largura fixa dá ao "1"
		a largura de um "0": medido, 48 px contra 26 px — 22 px de vão antes
		do ordinal, e o "1º" lia como "1 º". Numa contagem o valor mexe alguns
		pixels enquanto conta, e isso é menos grave que o vão parado.
	*/
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.case-numero__sufixo {
	margin-left: 0.15em;
	font-size: 0.55em;
	letter-spacing: -0.02em;
}

.case-numero__rotulo {
	max-width: 18rem;
	font-size: 0.92rem;
	color: var(--pic-texto-2);
}

/* ---------- o índice: uma faixa por case ---------- */

.case-faixa {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.case-faixa__env {
	display: grid;
	gap: var(--pic-esp-4);
	align-items: center;
}

@media (min-width: 60rem) {
	.case-faixa__env {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	/* Os lados alternam: a lista lê como sequência, não como coluna repetida. */
	.case-faixa--espelho .case-faixa__imagem {
		order: 2;
	}
}

.case-faixa__imagem {
	display: block;
	border-radius: 6px;
}

.case-faixa__face {
	position: relative;
	display: block;
	aspect-ratio: 1672 / 941;
	overflow: clip;
	border-radius: 6px;
	background: var(--pic-elevado);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		0 1.8rem 3.6rem rgba(3, 3, 8, 0.55);
}

.case-faixa__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-faixa:hover .case-faixa__face img {
	scale: 1.03;
}

.case-faixa__marca {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	margin-bottom: var(--pic-esp-3);
}

.case-faixa__n {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--pic-ciano);
}

.case-faixa__nome {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

.case-faixa__numero {
	margin-bottom: var(--pic-esp-3);
}

.case-faixa__chamada {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.case-faixa__chamada a {
	color: var(--pic-texto);
	text-decoration: none;
}

.case-faixa__resumo {
	max-width: 34rem;
	color: var(--pic-texto-2);
}

.case-faixa__disciplinas,
.case-disciplinas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: var(--pic-esp-3) 0 0;
	padding: 0;
	list-style: none;
}

.case-faixa__disciplinas li {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--pic-linha);
	border-radius: 99px;
	font-size: 0.78rem;
	color: var(--pic-texto-3);
}

/*
	"Ver o case" com o traço que avança — o mesmo gesto dos cases da Home,
	no lugar da seta solta.
*/
.case-faixa__ir {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: var(--pic-esp-4);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pic-texto);
	text-decoration: none;
}

.case-faixa__ir::after {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: var(--pic-grad-institucional);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-faixa__ir:hover::after,
.case-faixa__ir:focus-visible::after,
.case-faixa:hover .case-faixa__ir::after {
	width: 4.4rem;
}

/* ---------- o case: números ---------- */

.case-numeros {
	padding-block: var(--pic-esp-5);
	border-bottom: 1px solid var(--pic-linha);
}

.case-numeros__env {
	display: grid;
	gap: var(--pic-esp-4);
}

@media (min-width: 52rem) {
	.case-numeros__env {
		grid-template-columns: repeat(var(--case-n, 3), minmax(0, 1fr));
	}
}

/* ---------- o case: capítulos ---------- */

/*
	O título preso à esquerda enquanto o texto passa à direita. O título é a
	pergunta do capítulo; enquanto ele fica, o visitante sabe onde está.
*/
.case-cap {
	padding-block: var(--pic-esp-6);
}

.case-cap + .case-cap {
	border-top: 1px solid var(--pic-linha);
}

.case-cap__env {
	display: grid;
	gap: var(--pic-esp-3);
}

@media (min-width: 60rem) {
	.case-cap__env {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: clamp(2.5rem, 6vw, 6rem);
		align-items: start;
	}

	.case-cap__titulo {
		position: sticky;
		top: calc(var(--pic-cab-altura) + var(--pic-esp-3));
	}
}

.case-cap__titulo {
	margin: 0;
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--pic-texto);
	text-wrap: balance;
}

.case-cap__titulo--marca {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

.case-cap__texto > * {
	max-width: 40rem;
	margin: 0;
	font-size: clamp(1.08rem, 1.7vw, 1.3rem);
	font-weight: 300;
	line-height: 1.6;
	color: var(--pic-texto);
}

.case-cap__texto > * + * {
	margin-top: var(--pic-esp-3);
}

.case-cap__texto strong {
	font-weight: 600;
}

/*
	Cada parágrafo acende na altura da leitura — o `data-mov="acende"` de
	`movimento.css`, aplicado aqui por seletor porque o HTML vem do editor e
	não carrega atributo. Mesma faixa, mesma reserva no Firefox
	(`rolagem.js`).
*/
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.case-cap__texto > p {
			animation: pic-acende linear both;
			animation-timeline: view();
			animation-range: entry 100% cover 45%;
		}
	}
}

/* ---------- o case: uma imagem entre capítulos ---------- */

.case-quadro {
	width: min(100% - 2 * var(--pic-gutter), 86rem);
	margin: 0 auto;
	padding-block: var(--pic-esp-3);
}

.case-quadro__janela {
	aspect-ratio: 16 / 9;
	overflow: clip;
	border-radius: 6px;
	background: var(--pic-elevado);
}

.case-quadro__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
	`data-mov="janela"`: a moldura abre das bordas para o centro enquanto a
	imagem assenta de uma escala maior, as duas na rolagem. Sem suporte, a
	imagem está inteira e parada.
*/
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		[data-mov="janela"] {
			animation: cases-janela linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}

		[data-mov="janela"] img {
			animation: cases-janela-img linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes cases-janela {
	from {
		clip-path: inset(9% 16% round 10px);
	}

	to {
		clip-path: inset(0 0 round 6px);
	}
}

@keyframes cases-janela-img {
	from {
		transform: scale(1.16);
	}

	to {
		transform: scale(1);
	}
}

/* ---------- o case: o resto da galeria ---------- */

.case-resto {
	padding-block: var(--pic-esp-5);
}

.case-resto__env {
	display: grid;
	gap: var(--pic-esp-3);
}

@media (min-width: 52rem) {
	.case-resto__env {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.case-resto__item {
	margin: 0;
}

.case-resto__item .pic-face {
	display: block;
	overflow: clip;
	border-radius: 6px;
}

.case-resto__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- o case: o print do ChatGPT ---------- */

.case-ia {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.case-ia__env {
	display: grid;
	gap: var(--pic-esp-4);
	align-items: center;
}

@media (min-width: 60rem) {
	.case-ia__env {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		gap: clamp(3rem, 7vw, 7rem);
	}
}

.case-ia__pergunta {
	margin-top: var(--pic-esp-2);
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	font-weight: 200;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pic-texto);
}

.case-ia__fonte {
	margin-top: var(--pic-esp-2);
	font-size: 0.9rem;
	color: var(--pic-texto-3);
}

.case-ia__print {
	margin: 0;
}

.case-ia__tela {
	position: relative;
	display: block;
	overflow: clip;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 2rem 4rem rgba(3, 3, 8, 0.55);
}

.case-ia__tela img {
	display: block;
	width: 100%;
	height: auto;
}

.case-ia__destaque {
	position: absolute;
	border: 1px solid rgba(18, 228, 255, 0.95);
	border-radius: 10px;
	background: rgba(18, 228, 255, 0.1);
	box-shadow: 0 0 0 4px rgba(18, 228, 255, 0.14), 0 0 1.6rem rgba(18, 228, 255, 0.45);
	pointer-events: none;
}

/* ---------- o case: disciplinas e link ---------- */

.case-disciplinas {
	padding-block: var(--pic-esp-5);
	border-top: 1px solid var(--pic-linha);
}

.case-disciplinas__lista li {
	padding: 0.55rem 1rem;
	border: 1px solid color-mix(in srgb, var(--pic-azul) 40%, var(--pic-linha));
	border-radius: 99px;
	font-size: clamp(0.9rem, 1.3vw, 1.02rem);
	color: var(--pic-texto);
}

.case-disciplinas .pic-botao {
	margin-top: var(--pic-esp-4);
}

/* ---------- próximo case ---------- */

/*
	A faixa inteira é o link. A imagem do próximo case ao fundo, escurecida
	pelo véu, e o nome dele em escala de manchete: a leitura continua sem
	voltar ao índice.
*/
.case-proximo__link {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(70svh, 40rem);
	overflow: clip;
	padding-block: var(--pic-esp-5);
	color: var(--pic-texto);
	text-decoration: none;
}

.case-proximo__fundo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.case-proximo__fundo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-proximo__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(29, 29, 36, 0.95) 0%, rgba(29, 29, 36, 0.55) 45%, rgba(29, 29, 36, 0.35) 100%),
		linear-gradient(to right, rgba(29, 29, 36, 0.6), rgba(29, 29, 36, 0) 60%);
}

.case-proximo__link:hover .case-proximo__fundo img,
.case-proximo__link:focus-visible .case-proximo__fundo img {
	scale: 1.04;
}

.case-proximo__env {
	display: grid;
	gap: 0.6rem;
}

.case-proximo__env .pic-rotulo {
	color: var(--pic-cinza-2);
}

.case-proximo__nome {
	font-size: clamp(2.4rem, 7vw, 5.6rem);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.04em;
}

.case-proximo__chamada {
	max-width: 40rem;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: var(--pic-texto-2);
}