/**
 * ============================================================
 *  assets/css/blocks.css — Visual "comic" dos blocos
 * ============================================================
 *
 *  Carregado no SITE e no EDITOR (add_editor_style), por isso
 *  aqui ficam só estilos de blocos/patterns — nada de cabeçalho
 *  ou rodapé (esses estão em main.css).
 *
 *  ÍNDICE
 *   0. Variáveis do tema (atalhos para os tokens do theme.json)
 *   1. Botões (efeito de "apertar" o quadro)
 *   2. Painel de HQ / Painel noturno
 *   3. Splash (capa) — o elemento mais ousado do tema
 *   4. Onomatopeia
 *   5. Caixa de legenda
 *   6. Balões de fala e pensamento
 *   7. Quadro com nanquim (imagem) e caixa do narrador (citação)
 *   8. Cards de jogo + GIF sob demanda
 *   9. Lista com check
 *  10. Acessibilidade de movimento
 *
 *  SOBRE O HALFTONE (retícula)
 *  A retícula das HQs impressas é feita com radial-gradient()
 *  repetido via background-size: cada "tile" desenha UM ponto, e o
 *  navegador repete o tile pela área toda. Técnica documentada por
 *  Cloud Four, CSS-IRL e Frontend Masters. mask-image faz os pontos
 *  sumirem gradualmente, imitando a variação de tom da impressão.
 */

/* ===== 0. VARIÁVEIS =====================================================
 * Atalhos curtos que apontam para as variáveis geradas pelo theme.json.
 * O segundo valor (fallback) garante cor certa mesmo se o token faltar.
 */
:root {
	--hc-nanquim: var(--wp--preset--color--nanquim, #000);
	--hc-noite: var(--wp--preset--color--noite, #0e1b2b);
	--hc-papel: var(--wp--preset--color--papel, #fff6da);
	--hc-branco: var(--wp--preset--color--branco, #fff);
	--hc-ouro: var(--wp--preset--color--ouro, #ffc107);
	--hc-pow: var(--wp--preset--color--pow, #d0263a);
	--hc-ciano: var(--wp--preset--color--ciano, #2ea8e6);
	--hc-fonte-titulo: var(--wp--preset--font-family--bangers, Impact, sans-serif);

	--hc-traco: 4px;                       /* espessura do contorno dos quadros */
	--hc-sombra: 6px 6px 0 var(--hc-nanquim); /* sombra dura, sem desfoque */

	/* Contorno de texto com nanquim feito com 8 sombras (funciona em
	 * todos os navegadores, ao contrário de -webkit-text-stroke + paint-order). */
	--hc-contorno-texto:
		-3px -3px 0 var(--hc-nanquim), 3px -3px 0 var(--hc-nanquim),
		-3px 3px 0 var(--hc-nanquim), 3px 3px 0 var(--hc-nanquim),
		0 -3px 0 var(--hc-nanquim), 0 3px 0 var(--hc-nanquim),
		-3px 0 0 var(--hc-nanquim), 3px 0 0 var(--hc-nanquim);
}

/* ===== 1. BOTÕES ========================================================
 * Cores, borda e fonte vêm do theme.json (elements.button).
 * Aqui só o "movimento de apertar": no hover o botão sobe e a sombra
 * cresce; no clique (active) ele afunda, como se fosse pressionado.
 */
.wp-element-button,
.wp-block-button__link {
	transition: translate 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
	min-height: 44px; /* área de toque mínima recomendada (Apple HIG / WCAG 2.5.8) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	translate: -2px -2px;
	box-shadow: 8px 8px 0 var(--hc-nanquim);
}

.wp-element-button:active,
.wp-block-button__link:active {
	translate: 3px 3px;
	box-shadow: 2px 2px 0 var(--hc-nanquim);
}

/* Variação POW!: vermelho com texto branco (contraste 5.2:1 — AA). */
.is-style-hc-pow .wp-block-button__link {
	background-color: var(--hc-pow);
	color: var(--hc-branco);
	rotate: -1.5deg;
}

.is-style-hc-pow .wp-block-button__link:hover,
.is-style-hc-pow .wp-block-button__link:focus {
	background-color: var(--hc-ouro);
	color: var(--hc-nanquim);
}

/* ===== 2. PAINÉIS =======================================================
 * isolation: isolate cria um "contexto de empilhamento": o ::before
 * com z-index:-1 fica ATRÁS do conteúdo mas NA FRENTE do fundo do
 * painel, sem escapar para trás da página.
 */
.is-style-hc-painel {
	position: relative;
	isolation: isolate;
	background-color: var(--hc-papel);
	color: var(--hc-nanquim);
	border: var(--hc-traco) solid var(--hc-nanquim);
	border-radius: 3px;
	box-shadow: var(--hc-sombra);
	padding: clamp(1rem, 3vw, 1.75rem);
}

/* Retícula ciano no canto superior direito, sumindo em diagonal. */
.is-style-hc-painel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto auto;
	width: 55%;
	height: 65%;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, rgb(46 168 230 / 0.4) 30%, transparent 32%);
	background-size: 10px 10px;
	-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
}

.is-style-hc-painel-noite {
	position: relative;
	isolation: isolate;
	background-color: var(--hc-noite);
	color: var(--hc-papel);
	border: var(--hc-traco) solid var(--hc-nanquim);
	border-radius: 3px;
	box-shadow: 6px 6px 0 var(--hc-ouro);
	padding: clamp(1.5rem, 5vw, 3rem);
}

.is-style-hc-painel-noite::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, rgb(46 168 230 / 0.35) 28%, transparent 30%);
	background-size: 14px 14px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 100%);
	mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 100%);
}

.is-style-hc-painel-noite a:not(.wp-element-button) {
	color: var(--hc-ouro);
}

/* ===== 3. SPLASH (CAPA) =================================================
 * O único elemento "barulhento" do tema, de propósito.
 * Camadas de fundo (a primeira listada fica por cima):
 *   1) clarão de papel no centro (radial) — dá respiro ao título;
 *   2) raios de explosão (repeating-conic-gradient) em dois tons de ouro.
 * ::before adiciona a retícula vermelha só nas bordas (mask-image).
 */
.is-style-hc-splash {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--hc-nanquim);
	border: 5px solid var(--hc-nanquim);
	border-radius: 3px;
	box-shadow: 10px 10px 0 var(--hc-nanquim);
	padding-block: clamp(3rem, 10vw, 7rem);
	background:
		radial-gradient(circle at 50% 55%, rgb(255 246 218 / 0.95) 0 16%, transparent 50%),
		repeating-conic-gradient(from 0deg at 50% 55%, #ffc107 0deg 9deg, #ffab00 9deg 18deg);
}

.is-style-hc-splash::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, var(--hc-pow) 26%, transparent 29%);
	background-size: 16px 16px;
	opacity: 0.6;
	-webkit-mask-image: radial-gradient(circle at 50% 55%, transparent 38%, #000 90%);
	mask-image: radial-gradient(circle at 50% 55%, transparent 38%, #000 90%);
}

/* O balão do splash fica centralizado e com largura de leitura. */
.is-style-hc-splash .is-style-hc-balao {
	max-width: 34rem;
	margin-inline: auto;
}

/* ===== 4. ONOMATOPEIA ===================================================
 * Título com preenchimento claro, contorno de nanquim e sombra vermelha
 * deslocada (a última sombra listada fica atrás das outras).
 */
.is-style-hc-onomatopeia {
	font-family: var(--hc-fonte-titulo);
	font-size: var(--wp--preset--font-size--splash, clamp(2.8rem, 8vw, 6.5rem));
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--hc-branco);
	text-shadow: var(--hc-contorno-texto), 7px 7px 0 var(--hc-pow);
	rotate: -2deg;
	text-wrap: balance;
	/* Espaço extra para o contorno e a sombra não serem cortados. */
	padding: 0.1em 0.15em 0.15em;
}

.is-style-hc-painel-noite .is-style-hc-onomatopeia {
	font-size: var(--wp--preset--font-size--enorme, 3rem);
	color: var(--hc-ouro);
}

/* ===== 5. CAIXA DE LEGENDA ==============================================
 * O retângulo amarelo do narrador das HQs. width: fit-content faz a
 * caixa abraçar o texto em vez de ocupar a linha inteira.
 */
.is-style-hc-legenda {
	width: fit-content;
	max-width: 100%;
	background-color: var(--hc-ouro);
	color: var(--hc-nanquim);
	border: 3px solid var(--hc-nanquim);
	box-shadow: 4px 4px 0 var(--hc-nanquim);
	padding: 0.35em 0.8em 0.25em;
	font-family: var(--hc-fonte-titulo);
	font-weight: 400;
	letter-spacing: 0.05em;
	rotate: -1deg;
}

.is-style-hc-legenda.has-text-align-center {
	margin-inline: auto;
}

/* ===== 6. BALÕES ========================================================
 * Balão de fala: a "cauda" é feita com dois triângulos (bordas CSS):
 *   ::before = triângulo preto (contorno);
 *   ::after  = triângulo branco menor por cima, cobrindo a linha da
 *              borda do balão para a cauda parecer "colada" nele.
 */
.is-style-hc-balao {
	position: relative;
	background-color: var(--hc-branco);
	color: var(--hc-nanquim);
	border: 3px solid var(--hc-nanquim);
	border-radius: 1.6em;
	padding: 0.9em 1.25em;
	margin-bottom: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
}

.is-style-hc-balao::before,
.is-style-hc-balao::after {
	content: "";
	position: absolute;
	left: 2.2rem;
	border-style: solid;
	border-color: var(--hc-nanquim) transparent transparent transparent;
}

.is-style-hc-balao::before {
	bottom: -22px;
	border-width: 22px 16px 0 0;
}

.is-style-hc-balao::after {
	left: calc(2.2rem + 3px);
	bottom: -14px;
	border-width: 16px 11px 0 0;
	border-color: var(--hc-branco) transparent transparent transparent;
}

/* Texto à direita → cauda à direita (para "respostas" em diálogos). */
.is-style-hc-balao.has-text-align-right::before,
.is-style-hc-balao.has-text-align-right::after {
	left: auto;
	right: 2.2rem;
	border-width: 22px 0 0 16px;
}

.is-style-hc-balao.has-text-align-right::after {
	right: calc(2.2rem + 3px);
	border-width: 16px 0 0 11px;
}

/* Texto centralizado → cauda no meio. */
.is-style-hc-balao.has-text-align-center::before {
	left: calc(50% - 8px);
}

.is-style-hc-balao.has-text-align-center::after {
	left: calc(50% - 5px);
}

/* Balão de pensamento: nuvem arredondada + bolinhas em trilha. */
.is-style-hc-pensamento {
	position: relative;
	background-color: var(--hc-branco);
	color: var(--hc-nanquim);
	border: 3px solid var(--hc-nanquim);
	border-radius: 2.5em;
	padding: 1em 1.4em;
	margin-bottom: 2.4rem;
	font-style: italic;
}

.is-style-hc-pensamento::before,
.is-style-hc-pensamento::after {
	content: "";
	position: absolute;
	background-color: var(--hc-branco);
	border: 3px solid var(--hc-nanquim);
	border-radius: 50%;
}

.is-style-hc-pensamento::before {
	width: 18px;
	height: 18px;
	bottom: -22px;
	left: 2rem;
}

.is-style-hc-pensamento::after {
	width: 10px;
	height: 10px;
	bottom: -36px;
	left: 1.4rem;
}

.is-style-hc-pensamento.has-text-align-right::before {
	left: auto;
	right: 2rem;
}

.is-style-hc-pensamento.has-text-align-right::after {
	left: auto;
	right: 1.4rem;
}

/* ===== 7. IMAGEM EM QUADRO E CAIXA DO NARRADOR ========================= */
.is-style-hc-quadro img {
	border: var(--hc-traco) solid var(--hc-nanquim);
	border-radius: 3px;
	box-shadow: var(--hc-sombra);
}

.wp-block-quote.is-style-hc-narrador {
	width: fit-content;
	max-width: 100%;
	background-color: var(--hc-ouro);
	color: var(--hc-nanquim);
	border: 3px solid var(--hc-nanquim);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--hc-nanquim);
	padding: 0.6em 1em;
	font-weight: 700;
	font-style: italic;
}

.wp-block-quote.is-style-hc-narrador p {
	margin: 0;
}

.wp-block-quote.is-style-hc-narrador cite {
	display: block;
	margin-top: 0.4em;
	font-size: 0.85em;
	font-style: normal;
}

/* ===== 8. CARDS DE JOGO =================================================
 * Flex em coluna + margin-top:auto nos botões = botões alinhados no
 * rodapé de todos os cards, mesmo com textos de tamanhos diferentes.
 */
.hc-card-jogo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: rotate 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease;
}

.hc-card-jogo > * {
	margin-block: 0;
}

.hc-card-jogo > .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Grade de cards: o WordPress gera "repeat(auto-fill, ...)", que reserva
 * colunas VAZIAS quando há poucos cards (3 jogos numa tela larga sobravam
 * com uma 4ª coluna em branco). "auto-fit" colapsa as colunas vazias e
 * estica os cards existentes. Seletor com 3 classes para vencer o CSS
 * gerado pelo layout do bloco. */
.wp-block-group.hc-grade-jogos.is-layout-grid,
.wp-block-group.hc-grade-sobre.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: clamp(1.5rem, 4vw, 2.25rem);
}

/* Leve inclinação alternada: quadros "colados à mão" na página. */
.hc-grade-jogos > .hc-card-jogo:nth-child(3n + 1) { rotate: -1.2deg; }
.hc-grade-jogos > .hc-card-jogo:nth-child(3n + 2) { rotate: 0.8deg; }
.hc-grade-jogos > .hc-card-jogo:nth-child(3n)     { rotate: -0.4deg; }

/* Celular: inclinação menor, para o canto do card não encostar na tela. */
@media (max-width: 40em) {
	.hc-grade-jogos > .hc-card-jogo:nth-child(n) { rotate: -0.4deg; }
	.hc-grade-jogos > .hc-card-jogo:nth-child(even) { rotate: 0.4deg; }
}

/* Hover só em dispositivos com mouse (evita "hover preso" no toque). */
@media (hover: hover) {
	.hc-grade-jogos > .hc-card-jogo:hover,
	.hc-grade-jogos > .hc-card-jogo:focus-within {
		rotate: 0deg;
		translate: -4px -4px;
		box-shadow: 10px 10px 0 var(--hc-nanquim);
	}
}

/* Moldura das imagens: as duas ficam empilhadas no mesmo espaço. */
.hc-quadro-gif {
	position: relative;
	overflow: hidden;
	border: 3px solid var(--hc-nanquim);
	background-color: var(--hc-noite);
	background-image: radial-gradient(circle, rgb(255 193 7 / 0.25) 28%, transparent 31%);
	background-size: 12px 12px;
}

.hc-quadro-gif > .wp-block-image {
	margin: 0;
}

.hc-quadro-gif img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
 * TROCA ESTÁTICA ↔ GIF (v1.1.0)
 * Antes (v1.0.0) o GIF ficava POR CIMA da estática com opacidade.
 * Como as artes têm fundo transparente, as duas apareciam juntas.
 * Agora é uma troca de verdade, feita só com classes que o comic.js
 * coloca no quadro:
 *   (sem classe)    → só a estática aparece; o GIF nem foi baixado;
 *   .is-carregando  → estática continua visível + indicador girando;
 *   .is-animando    → estática some (display:none) e o GIF aparece.
 * --------------------------------------------------------------- */
.hc-quadro-gif > .comic-gif {
	display: none;
}

.hc-quadro-gif.is-animando > .comic-gif {
	display: block;
	animation: hc-surgir 0.18s ease-out;
}

.hc-quadro-gif.is-animando > .wp-block-image:not(.comic-gif) {
	display: none;
}

/* O GIF ocupa EXATAMENTE a proporção da estática (--hc-proporcao é
 * calculada no JS a partir da largura/altura reais da imagem estática).
 * object-fit: contain = mostra o GIF inteiro, sem cortar nem esticar.
 * Resultado: a troca acontece sem a página "pular". */
.hc-quadro-gif > .comic-gif img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--hc-proporcao, auto);
	object-fit: contain;
}

@keyframes hc-surgir {
	from { opacity: 0.4; }
	to   { opacity: 1; }
}

/* Indicador de carregamento (GIFs podem ter vários MB no 4G). */
.hc-quadro-gif.is-carregando::after {
	content: "";
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	width: 1.6rem;
	height: 1.6rem;
	border: 4px solid var(--hc-papel);
	border-top-color: var(--hc-pow);
	border-radius: 50%;
	animation: hc-girar 0.8s linear infinite;
}

@keyframes hc-girar {
	to { rotate: 360deg; }
}

/* Botão "Ver animação" (criado pelo comic.js no celular/tablet). */
.hc-botao-animar {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 2;
	min-height: 44px;
	padding: 0.4rem 0.8rem;
	font-family: var(--hc-fonte-titulo);
	font-size: 1rem;
	letter-spacing: 0.05em;
	color: var(--hc-nanquim);
	background-color: var(--hc-branco);
	border: 3px solid var(--hc-nanquim);
	border-radius: 0.4rem;
	box-shadow: 3px 3px 0 var(--hc-nanquim);
	cursor: pointer;
}

.hc-botao-animar[aria-pressed="true"] {
	background-color: var(--hc-ouro);
}

/* ===== 8B. PÁGINA DE HQ E TIRAS DA EQUIPE (v1.1.0) =====================
 * Estrutura no editor (pattern "Equipe — tiras de quadrinhos"):
 *
 *   Grupo [Página de HQ]                  ← moldura de papel da página
 *    ├─ Grupo [hc-tira]                   ← UM membro = uma tira
 *    │   ├─ Grupo [hc-tira__retrato]      ← quadro 1: imagem + GIF
 *    │   └─ Grupo [hc-tira__texto]        ← quadro 2: nome, função, bio
 *    ├─ Grupo [hc-tira] ...
 *
 * A "sarjeta" (espaço entre os quadros) é a variável --hc-sarjeta,
 * usada tanto entre tiras quanto entre os dois quadros de cada tira.
 */
.is-style-hc-pagina-hq {
	--hc-sarjeta: clamp(0.75rem, 2.5vw, 1.25rem);
	background-color: var(--hc-papel);
	color: var(--hc-nanquim);
	border: 5px solid var(--hc-nanquim);
	border-radius: 3px;
	box-shadow: 10px 10px 0 var(--hc-nanquim);
	padding: var(--hc-sarjeta);
}

/* Espaço entre tiras = sarjeta (vence o blockGap padrão do WordPress). */
.is-style-hc-pagina-hq > * {
	margin-block: 0;
}

.is-style-hc-pagina-hq > * + * {
	margin-block-start: var(--hc-sarjeta);
}

/* CELULAR (base): tira em 1 coluna → retrato em cima, texto embaixo. */
.hc-tira {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hc-sarjeta, 1rem);
}

.hc-tira > * {
	margin: 0;
}

/* Quadro 1: retrato sobre a "noite" com retícula dourada. */
.hc-tira__retrato {
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--hc-traco) solid var(--hc-nanquim);
	background-color: var(--hc-noite);
	background-image: radial-gradient(circle, rgb(255 193 7 / 0.25) 28%, transparent 31%);
	background-size: 12px 12px;
	overflow: hidden;
}

/* O quadro de imagem interno não precisa de outra borda aqui. */
.hc-tira__retrato > .hc-quadro-gif {
	width: 100%;
	border: 0;
	background: none;
}

/* Quadro 2: texto, com retícula ciano no canto (igual aos painéis). */
.hc-tira__texto {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
	border: var(--hc-traco) solid var(--hc-nanquim);
	background-color: var(--hc-branco);
	padding: clamp(1rem, 3vw, 1.75rem);
}

.hc-tira__texto::before {
	content: "";
	position: absolute;
	inset: 0 0 auto auto;
	width: 50%;
	height: 60%;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, rgb(46 168 230 / 0.35) 30%, transparent 32%);
	background-size: 10px 10px;
	-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
}

.hc-tira__texto > * {
	margin: 0;
}

/* O balão dentro da tira precisa de espaço para a "cauda". */
.hc-tira__texto > .is-style-hc-balao {
	margin-bottom: 1.4rem;
	font-weight: 400;
}

/* Linha da função ("Líder do estúdio"): pequena, em vermelho POW. */
.hc-funcao {
	font-family: var(--hc-fonte-titulo);
	font-size: 1.15rem;
	letter-spacing: 0.05em;
	color: var(--hc-pow);
}

/* TABLET/DESKTOP (≥ 768px): tira em 2 colunas, retrato menor.
 * Tiras pares invertem o lado (retrato à direita) com "order",
 * dando o ritmo de página de HQ. A ordem no HTML não muda, então
 * leitores de tela leem sempre retrato → texto. */
@media (min-width: 48em) {
	.hc-tira {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.hc-tira:nth-child(even) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.hc-tira:nth-child(even) > .hc-tira__retrato {
		order: 2;
	}

	/* Cauda do balão aponta para o lado do retrato. */
	.hc-tira:nth-child(odd) .hc-tira__texto > .is-style-hc-balao::before,
	.hc-tira:nth-child(odd) .hc-tira__texto > .is-style-hc-balao::after {
		left: 1.2rem;
	}

	.hc-tira:nth-child(odd) .hc-tira__texto > .is-style-hc-balao::after {
		left: calc(1.2rem + 3px);
	}

	.hc-tira:nth-child(even) .hc-tira__texto > .is-style-hc-balao::before {
		left: auto;
		right: 1.2rem;
		border-width: 22px 0 0 16px;
	}

	.hc-tira:nth-child(even) .hc-tira__texto > .is-style-hc-balao::after {
		left: auto;
		right: calc(1.2rem + 3px);
		border-width: 16px 0 0 11px;
	}
}

/* ===== 9. LISTA COM CHECK =============================================== */
.hc-lista-check {
	list-style: none;
	padding-left: 0;
}

.hc-lista-check li {
	position: relative;
	padding-left: 1.6em;
}

.hc-lista-check li + li {
	margin-top: 0.35em;
}

.hc-lista-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--hc-pow);
}

/* ===== 10. MOVIMENTO ====================================================
 * Única animação automática do tema: o título do splash "estoura"
 * ao carregar. Só roda se o visitante NÃO pediu menos movimento
 * nas configurações do sistema (iOS: Acessibilidade › Movimento).
 */
@media (prefers-reduced-motion: no-preference) {
	.is-style-hc-splash .is-style-hc-onomatopeia {
		animation: hc-estouro 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	.is-style-hc-splash .is-style-hc-balao {
		animation: hc-entrada 0.4s ease-out 0.35s both;
	}
}

@keyframes hc-estouro {
	from { scale: 0.6; opacity: 0; }
	to   { scale: 1;   opacity: 1; }
}

@keyframes hc-entrada {
	from { translate: 0 12px; opacity: 0; }
	to   { translate: 0 0;    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hc-grade-jogos > .hc-card-jogo,
	.is-style-hc-legenda,
	.is-style-hc-onomatopeia,
	.is-style-hc-pow .wp-block-button__link {
		rotate: none;
	}
}