/*
	O painel de quadros da abertura.

	Uma parede de pequenas telas ligadas, preenchendo a tela inteira, em
	deriva horizontal lenta. É o fundo da abertura, não uma imagem ao lado do
	texto.

	Quatro movimentos convivem aqui, e cada um roda numa propriedade que o
	compositor resolve sozinho (transform, opacity, filter) — nenhum força
	recálculo de layout:

	1. DERIVA   — as três faixas andam para a esquerda, em velocidades
	              diferentes, para sempre.
	2. ACENDIMENTO — na abertura, cada quadro liga com um clarão que esfria
	              até o estado normal. Uma vez.
	3. LAMPEJO  — de vez em quando, uma luz atravessa um quadro. Infinito,
	              defasado quadro a quadro.
	4. RELEVO   — sob o cursor, o quadro inclina em 3D e a luz se acumula
	              onde o ponteiro está.

	Tudo isso para de andar quando a abertura sai da tela (`--parado`), e
	desaparece inteiro com `prefers-reduced-motion`. Animação infinita sem
	pausa consome bateria pelo resto da visita, e o painel fica fora da tela
	durante quase toda ela.

	O PISO DE PRETO DAS IMAGENS é #22242E, e não preto. Não é escolha de
	gosto: com o piso em #101118 as bordas escuras de duas fotos vizinhas
	encostavam e o conjunto lia como uma faixa preta de 30 px, quando o vão
	tem 7. Com o piso levantado, o pixel mais escuro de qualquer quadro tem
	dez vezes a luminância do vão — cada peça volta a ler como tela acesa, com
	limite visível. O topo da escala não mudou, então as razões de contraste
	abaixo continuam valendo.

	DESEMPENHO, MEDIDO NESTA MÁQUINA (1920 x 900, aba limpa, duas amostras por
	configuração com 2,5 s de assentamento antes de medir):

	  painel completo                           64 a 70 fps
	  sem o desfoque atrás do texto             61 a 62 fps
	  sem o painel inteiro                      62 fps

	As três configurações caem na mesma faixa: **o painel roda na taxa de
	atualização da tela, e o custo dele não se distingue do ruído da medição.**

	Como eu errei isso antes, para ninguém repetir: a primeira rodada acusou 42
	fps e um custo de 6,7 fps só no desfoque, e as duas coisas eram artefato.
	Duas causas somadas — a aba de teste estava suja de dezenas de estilos
	injetados e iframes, e eu media rAF IMEDIATAMENTE após alternar um
	`display`, o que mede o reflow do próprio teste e não o estado estável. O
	sinal de que estava errado apareceu na própria tabela: desligar coisas
	"piorava" o número. Medir animação exige assentar antes de contar quadros,
	e exige uma aba que não tenha sido usada como bancada.

	CONTRASTE, MEDIDO POR COMPOSIÇÃO — não por fórmula. Cada um dos 30 quadros
	foi recomposto fora do navegador com as camadas reais (lampejo em `screen`
	sobre a imagem, depois o véu sobre `#05050A`), e a razão foi calculada no
	PIXEL MAIS CLARO de cada um. A conta à mão errava a favor por até 0,4 de
	razão, o que aqui é a diferença entre passar e reprovar.

	  faixa do texto, véu 0,745 — pior dos 30 quadros, pixel mais claro:

	                          sem lampejo   com lampejo no pico   limite
	    branco                   12,26:1              11,15:1      4,5
	    apoio #c9c9d2             7,45:1               6,78:1      4,5
	    azul #5481FF              3,48:1               3,16:1      3,0

	  lado aberto, véu 0,21 — quadros a 79% do brilho, sem texto por cima

	Quem dita o véu NÃO é o branco da manchete, que sobra de todo lado: é a
	ponta AZUL do gradiente de "evoluímos". `#5481FF` tem luminância 0,248 — a
	mais baixa de tudo que é texto aqui, e `10-marca.md` já avisa que a margem
	dela é apertada. Ela é texto grande, então o limite é 3:1, e é ela que
	define o halo do véu em 0,54: a 0,46 o azul dava 2,80:1 com o lampejo
	passando por baixo.
*/

.pic-painel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;

	/* O vão entre os quadros, e a cor da parede apagada por trás deles. */
	--pic-vao: clamp(3px, 0.45vw, 7px);
	background: #05050a;
}

.pic-painel__faixas {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	row-gap: var(--pic-vao);
}

/*
	A faixa é a moldura parada: dá a altura e recorta. Quem anda são as duas
	tiras dentro dela.

	A altura desconta os dois vãos horizontais antes de repartir, senão as
	três frações somando 1 estouram a abertura em 2 vãos.
*/
.pic-painel__faixa {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	height: calc((100% - 2 * var(--pic-vao)) * var(--pic-faixa-altura));
	overflow: hidden;
}

/*
	O trilho: as duas tiras lado a lado, e o único elemento que anda.

	Ele desloca 50% da própria largura, que é exatamente o comprimento de uma
	tira. No fim do ciclo a cópia está onde a primeira começou — o quadro é o
	mesmo, pixel a pixel, e a volta ao ponto zero não tem costura.

	UMA animação por faixa, não duas. Duas animações com mesma duração e mesmo
	início deveriam bastar, mas qualquer coisa que cancele a de uma das tiras
	a reinicia do zero enquanto a outra segue — e aí o painel abre um buraco de
	fundo preto do tamanho do desencontro. Com um trilho só isso não tem como
	acontecer.

	Por isso também o vão entre quadros é margem do quadro, e não `gap` da
	tira: com `gap`, a largura da tira não inclui o vão que a separa da cópia,
	e o laço fecha deslocado por um vão a cada volta.
*/
.pic-painel__trilho,
.pic-painel__tira {
	display: flex;
	flex: 0 0 auto;
	height: 100%;
}

.pic-quadro {
	position: relative;
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: var(--pic-ar);
	margin-right: var(--pic-vao);
	border-radius: 3px;

	/* A tela apagada: é o que o painel mostra antes de os quadros acenderem. */
	background: #0a0a12;

	/*
		Perspectiva no QUADRO, nunca `transform-style: preserve-3d` no painel.
		Cada quadro é um espaço 3D fechado em si — é o que permite inclinar um
		quadro sem que o painel perca o recorte das faixas, que é o que
		`preserve-3d` faria.
	*/
	perspective: 680px;
}

/*
	No celular, a proporção do quadro tem teto.

	Medido em 390 x 844: com as proporções originais, um quadro 16x9 na faixa
	do meio dá 594 px de largura — mais largo que a tela. O painel passa a
	mostrar TRÊS quadros e a leitura muda: não é mais uma parede de pequenas
	telas, é uma foto grande deslizando. Com teto de 0,95 são seis a sete
	quadros na tela, e a parede volta.

	O corte lateral que isso impõe às peças em paisagem é aceitável: o
	enquadramento delas tem o assunto no centro, e `object-fit: cover` corta
	pelas bordas.
*/
@media (max-width: 48rem) {
	.pic-quadro {
		aspect-ratio: min(var(--pic-ar), 0.95);
	}
}

.pic-quadro__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	transform: none;

	/*
		O fio de luz na borda. Ele resolve o que o cliente viu como
		"espaçamento sobrando": os vãos estão em 7 px exatos, medidos, mas
		duas fotos com parede escura na borda encostando uma na outra leem
		como uma faixa preta de 30 px. O contorno garante que o limite do
		quadro sempre apareça, e reforça a leitura de pequena tela com moldura.
		A outra metade da solução está no tratamento, que levantou o piso de
		preto das imagens.
	*/
	box-shadow: inset 0 0 0 1px rgba(190, 208, 240, 0.1);
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.36s ease;

	/*
		`isolation: isolate` faz da face um contexto de empilhamento próprio, e
		isso resolve duas coisas de uma vez:

		1. os `z-index` das camadas de luz valem DENTRO do quadro, sem chance
		   de uma delas passar por cima do quadro vizinho;
		2. o `mix-blend-mode: screen` da luz mescla com a imagem deste quadro,
		   e não com o que estiver pintado atrás no painel inteiro.
	*/
	isolation: isolate;
}

/*
	As quatro camadas do quadro, em ordem declarada. A ordem NÃO pode ficar
	implícita aqui: `::before` precede o conteúdo do elemento na ordem de
	pintura, então sem `z-index` o lampejo é pintado ABAIXO da imagem e uma
	foto opaca o esconde por completo — foi o que aconteceu na primeira versão,
	e o efeito simplesmente não existia sobre as fotos. Conferido parando o
	lampejo opaco sobre os quadros: não aparecia nada.
*/
.pic-quadro img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- 1. deriva ---------- */

@media (prefers-reduced-motion: no-preference) {
	.pic-painel__trilho {
		animation: pic-deriva-trilho var(--pic-faixa-ciclo, 180s) linear infinite;

		/*
			Três camadas de 6.500 a 8.200 px de largura que se movem durante
			toda a visita: declarar isso é o uso legítimo de `will-change`, em
			vez de deixar o navegador inferir. Em condições limpas não consegui
			medir diferença — o ganho de 2,4 fps que eu havia anotado veio da
			mesma medição inválida descrita no cabeçalho deste arquivo. Fica
			pelo argumento, não por um número. É o único `will-change` do
			painel: em 60 quadros ele custaria memória sem nada em troca.
		*/
		will-change: transform;
	}

	/*
		Parallax de rolagem do painel inteiro: ele recua e sobe enquanto a
		abertura sai. `scroll(root)` e não `view()` — a abertura começa já
		dentro da tela, e as faixas de `view()` (entry, cover) pressupõem um
		elemento que ENTRA. O que existe aqui é a rolagem da página, de zero a
		uma tela.
	*/
	@supports (animation-timeline: scroll(root block)) {
		.pic-painel__faixas {
			animation: pic-painel-recua linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 100svh;
		}
	}
}

@keyframes pic-deriva-trilho {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes pic-painel-recua {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(0, -7%, 0) scale(1.07);
	}
}

/* ---------- 2. acendimento ---------- */

/*
	Antes de acender, o quadro é uma tela apagada. Só com JavaScript: sem ele,
	o painel aparece inteiro e aceso, que é o estado correto de reserva.
*/
.pic-painel--js .pic-quadro img {
	opacity: 0;
}

/*
	Quadro com imagem pronta: visível. Este é o estado base, FORA da consulta
	de movimento — com ou sem animação, quadro pronto aparece.

	`--tudo` é a rede de segurança do trecho embutido na marcação: se
	`painel.js` não carregar, ninguém marca `q-pronto` e o painel ficaria
	preto para sempre. Passados 1,6 s, o trecho embutido libera tudo de uma vez.
*/
.pic-painel--js .pic-quadro.q-pronto img,
.pic-painel--tudo .pic-quadro img {
	opacity: 1;
}

/*
	O quadro só acende quando a IMAGEM DELE está pronta — `q-pronto` vem do
	`painel.js`, por quadro, e não por cronômetro.

	O primeiro desenho acendia por tempo: o painel recebia `--aceso` e cada
	quadro entrava com o atraso da própria ordem, tivesse imagem ou não. Com
	cache quente isso nunca falha, e foi assim que eu medi — errado. Com cache
	frio, um quadro cuja imagem ainda não chegou acende VAZIO: dá um clarão
	numa caixa escura, recebe lampejos, e o painel fica com buracos de fundo
	preto andando por dentro. Gatear por quadro faz o carregamento virar o
	efeito, que é o que o efeito sempre foi.
*/
@media (prefers-reduced-motion: no-preference) {
	.pic-painel--aceso .pic-quadro.q-pronto img {
		animation: pic-acende 0.66s cubic-bezier(0.2, 0.8, 0.3, 1) both;
		animation-delay: calc(var(--pic-ordem, 0) * 42ms);
	}

	/*
		O clarão. É ele que faz a peça parecer uma tela ligando: estoura, e
		esfria até a imagem estabilizar. Sem ele, um `opacity` de 0 a 1 é só
		um fade — e fade não tem física nenhuma.
	*/
	.pic-painel--aceso .pic-quadro.q-pronto .pic-quadro__face::after {
		animation: pic-clarao 0.78s ease-out both;
		animation-delay: calc(var(--pic-ordem, 0) * 42ms);
	}
}

/*
	Passado o acendimento, a camada do clarão não tem mais função — e ela é
	uma camada de composição em 60 quadros. `painel.js` marca o painel como
	assentado e ela sai da árvore de pintura.
*/
.pic-painel--assentado .pic-quadro__face::after {
	display: none;
}

.pic-quadro__face::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		124% 96% at 50% 46%,
		rgba(226, 238, 255, 0.95),
		rgba(122, 172, 255, 0.34) 58%,
		rgba(10, 10, 18, 0) 100%
	);
}

@keyframes pic-acende {
	0% {
		opacity: 0;
		filter: brightness(2.7) contrast(0.48);
		transform: scale(1.035);
	}

	38% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		filter: none;
		transform: none;
	}
}

@keyframes pic-clarao {
	0% {
		opacity: 0;
	}

	9% {
		opacity: 0.88;
	}

	100% {
		opacity: 0;
	}
}

/* ---------- 3. lampejo ---------- */

/*
	A luz que passa.

	A primeira versão era um RETÂNGULO com gradiente linear, girado 9°. O
	cliente viu exatamente o que isso é: "uma forma geométrica passando em
	cima da foto". O problema não era a intensidade, era a geometria — um
	retângulo tem quatro arestas, e por mais suave que seja o gradiente na
	horizontal, as bordas de cima e de baixo entram no quadro como corte reto,
	e a rotação as deixa na diagonal, que é pior ainda.

	Agora é uma ELIPSE difusa, com `closest-side`: o gradiente chega a
	transparente antes de qualquer borda da caixa, nos quatro lados. Não existe
	aresta para o olho encontrar. A caixa é 110% mais alta que o quadro, então
	a elipse lê como um facho atravessando, e não como uma bolha.

	E a rotação VOLTOU, agora que é seguro: o que tornava os 9° do desenho
	antigo ruins não era a inclinação, era ter arestas para inclinar. Numa
	elipse que morre antes da borda não há o que denunciar, e o facho inclinado
	lê muito mais como luz passando do que um vertical.

	`mix-blend-mode: screen` em vez de opacidade chapada: luz soma, não cobre.
	É a diferença entre uma tela refletindo e um papel branco por cima.

	Com ciclos de 13 a 27 s e atrasos espalhados, os lampejos nunca batem
	juntos, e o painel ganha vida sem nenhum temporizador em JavaScript.
*/
.pic-quadro__face::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -55%;
	bottom: -55%;
	left: -58%;
	width: 58%;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	transform: translate3d(0, 0, 0) rotate(var(--pic-lampejo-angulo, -15deg));
	background: radial-gradient(
		closest-side,
		rgba(216, 234, 255, 0.3),
		rgba(178, 204, 245, 0.12) 52%,
		rgba(0, 0, 0, 0) 78%
	);
}

@media (prefers-reduced-motion: no-preference) {
	.pic-painel--aceso .pic-quadro.q-pronto .pic-quadro__face::before {
		animation: pic-lampejo var(--pic-lampejo-ciclo, 19s) linear infinite;
		animation-delay: var(--pic-lampejo-atraso, 0s);
	}
}

/*
	A opacidade sobe e desce dentro da própria passagem: a luz não acende, ela
	chega e vai. Um `opacity` de 0 para 1 num quadro só reintroduz a borda que
	a elipse foi feita para eliminar — em forma de tempo, em vez de forma.

	A deriva vertical de -4% a 4% inclina o percurso sem inclinar o desenho,
	que é como a luz atravessa uma superfície de verdade.
*/
@keyframes pic-lampejo {
	0% {
		opacity: 0;
		transform: translate3d(0, -7%, 0) rotate(var(--pic-lampejo-angulo, -15deg));
	}

	1.5% {
		opacity: 0.4;
	}

	4% {
		opacity: 1;
	}

	6.5% {
		opacity: 0.4;
	}

	8%,
	100% {
		opacity: 0;
		transform: translate3d(390%, 7%, 0) rotate(var(--pic-lampejo-angulo, -15deg));
	}
}

/* ---------- 4. relevo sob o cursor ---------- */

/*
	A face inclina para trás onde o ponteiro toca, e a luz se acumula ali —
	o cursor age como a fonte de luz sobre um vidro. Os ângulos chegam por
	`--pic-rx` e `--pic-ry`, escritos pelo JavaScript; a transição é do CSS,
	e é ela que faz o movimento ler como massa em vez de salto.

	O estado ativo é `:hover`, e não uma classe do JavaScript, por um motivo
	que só aparece aqui: o painel anda por baixo do cursor parado. `:hover` o
	navegador recalcula sozinho a cada quadro, inclusive quando é o elemento
	que se move; uma classe escrita no `pointermove` ficaria presa no quadro
	que já saiu de baixo do ponteiro. Fora do `:hover` a face volta a
	`transform: none`, o que torna inertes os ângulos que o JavaScript deixou
	escritos — não há estado a limpar.
*/
.pic-quadro__luz {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	transition: opacity 0.3s ease;
	background: radial-gradient(
		44% 60% at var(--pic-lx, 50%) var(--pic-ly, 50%),
		rgba(196, 218, 255, 0.34),
		rgba(120, 162, 255, 0.1) 54%,
		rgba(10, 10, 18, 0) 78%
	);
}

/*
	Só onde existe ponteiro de precisão. Em tela de toque, `:hover` fica preso
	no último elemento tocado — e o painel passaria a arrastar um quadro
	inclinado pela tela.
*/
@media (hover: hover) and (pointer: fine) {
	.pic-quadro:hover {
		z-index: 2;
	}

	.pic-quadro:hover .pic-quadro__luz {
		opacity: 1;
	}

	.pic-quadro:hover .pic-quadro__face {
		transform: rotateX(var(--pic-rx, 0deg)) rotateY(var(--pic-ry, 0deg)) scale(1.025);
		box-shadow: 0 1.4rem 2.6rem rgba(0, 0, 0, 0.55);
	}
}

/* ---------- o vão: a curva como corte na parede ---------- */

/*
	O corte era largo demais: 176 px de preto atravessando o painel, que no
	meio de quadros claros lê como espaço sobrando e não como corte. Estreitou
	para ~104 px, e a borda de luz ficou mais acesa — é a luz que diz "isto é
	um corte", não a largura.
*/
.pic-painel__vao {
	position: absolute;
	top: -8%;
	bottom: -8%;
	left: 54%;
	width: clamp(2.5rem, 6vw, 6.5rem);
	pointer-events: none;
	z-index: 1;
}

.pic-painel__vao > * {
	position: absolute;
	inset: 0;
}

.pic-painel__vao .pic-curva {
	width: 100%;
	height: 100%;
	display: block;
}

/* O corte: o mesmo preto do vão entre os quadros, só mais largo. */
.pic-painel__vao-corte {
	color: #05050a;
}

/*
	A luz na borda do corte. É a mesma curva, um fio maior e deslocada, atrás
	do corte — só a borda aparece, e lê como a luz que passa pela fenda.
*/
.pic-painel__vao-luz {
	transform: translate3d(-2px, 0, 0) scale(1.02);
	opacity: 0.85;
	filter: blur(1px);
}

@media (max-width: 60rem) {
	.pic-painel__vao {
		left: auto;
		right: -10%;
		width: clamp(4rem, 26vw, 9rem);
	}
}

/* ---------- o véu ---------- */

/*
	Quatro camadas, de cima para baixo na declaração. Os números de contraste
	que elas sustentam estão no cabeçalho deste arquivo.
*/
/*
	O desfoque atrás do texto. A máscara é um radial suave, sem borda dura:
	desfoque com contorno visível lê como retângulo aplicado, e o que se quer
	aqui é que ninguém perceba onde ele começa.

	A CAIXA é do tamanho da área do texto, não do painel — e essa é a
	diferença entre caro e barato. `backdrop-filter` processa a caixa INTEIRA
	do elemento e só depois a máscara esconde o que sobra: com `inset: 0` ele
	desfocava a tela toda a cada quadro. Medido: 36,9 fps com a caixa cheia,
	43,1 fps com a caixa do texto, 44,3 fps sem desfoque nenhum. Encolher a
	caixa recupera quase todo o custo e não muda nada no que se vê.
*/
.pic-painel__foco {
	position: absolute;
	left: 2%;
	top: 2%;
	width: 56%;
	height: 94%;
	z-index: 1;
	pointer-events: none;
	backdrop-filter: blur(3.5px);
	-webkit-backdrop-filter: blur(3.5px);
	-webkit-mask-image: radial-gradient(56% 52% at 56% 50%, #000 52%, transparent 88%);
	mask-image: radial-gradient(56% 52% at 56% 50%, #000 52%, transparent 88%);
}

@media (max-width: 48rem) {
	.pic-painel__foco {
		left: 0;
		top: 6%;
		width: 100%;
		height: 82%;
		-webkit-mask-image: radial-gradient(76% 54% at 50% 46%, #000 46%, transparent 84%);
		mask-image: radial-gradient(76% 54% at 50% 46%, #000 46%, transparent 84%);
	}
}

.pic-painel__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		/* 4. halo local, sob o bloco de texto */
		radial-gradient(
			58% 54% at 22% 48%,
			rgba(5, 5, 10, 0.54),
			rgba(5, 5, 10, 0) 72%
		),
		/* 3. horizontal: abre o lado do texto, deixa o oposto vivo */
		linear-gradient(
			100deg,
			rgba(5, 5, 10, 0.38) 0%,
			rgba(5, 5, 10, 0.3) 34%,
			rgba(5, 5, 10, 0) 62%
		),
		/* 2. vertical: cabeçalho no topo, assinatura na base */
		linear-gradient(
			to bottom,
			rgba(5, 5, 10, 0.58) 0%,
			rgba(5, 5, 10, 0.08) 24%,
			rgba(5, 5, 10, 0.08) 60%,
			rgba(5, 5, 10, 0.52) 100%
		),
		/* 1. base: assenta o painel no grafite da marca */
		linear-gradient(rgba(5, 5, 10, 0.14), rgba(5, 5, 10, 0.14));
}

/*
	No celular o texto ocupa a largura toda, então o véu horizontal não tem
	"lado aberto" para preservar: ele vira uma camada só, mais forte.
*/
@media (max-width: 48rem) {
	.pic-painel__veu {
		background:
			linear-gradient(
				to bottom,
				rgba(5, 5, 10, 0.62) 0%,
				rgba(5, 5, 10, 0.34) 30%,
				rgba(5, 5, 10, 0.42) 62%,
				rgba(5, 5, 10, 0.72) 100%
			),
			linear-gradient(rgba(5, 5, 10, 0.2), rgba(5, 5, 10, 0.2));
	}
}

/* ---------- pausa e movimento reduzido ---------- */

/*
	Fora da tela, tudo para. O painel volta a andar quando a abertura reaparece.
*/
/*
	A especificidade aqui é obrigatória, não estilo.

	A regra que liga o lampejo é `.pic-painel--aceso .pic-quadro.q-pronto
	.pic-quadro__face::before`, e ela usa o atalho `animation:` — que
	REINICIALIZA `animation-play-state` para `running`. Uma regra de pausa
	menos específica que ela é simplesmente ignorada, e foi o que aconteceu:
	os 60 lampejos continuavam rodando com a abertura fora da tela, medidos em
	`running` enquanto as tiras já estavam em `paused`. O seletor abaixo
	empata em especificidade e vem depois no arquivo.
*/
.pic-painel--parado .pic-painel__trilho,
.pic-painel--parado .pic-quadro.q-pronto .pic-quadro__face::before {
	animation-play-state: paused;
}

/*
	Com movimento reduzido o painel é uma composição parada — e continua
	sendo o fundo da abertura, com o mesmo véu e o mesmo contraste. Nada do
	que ele comunica depende de andar.
*/
@media (prefers-reduced-motion: reduce) {
	.pic-painel--js .pic-quadro.q-pronto img {
		opacity: 1;
	}

	.pic-quadro__face,
	.pic-quadro:hover .pic-quadro__face {
		transform: none;
		transition: none;
	}

	.pic-quadro__face::before,
	.pic-quadro__face::after {
		display: none;
	}
}