/**
 * Entre Líderes — micro.css
 * Microinterações. Cada bloco é independente: para desligar um efeito, apague o bloco.
 * Só anima transform, opacity e box-shadow (sem recalcular layout).
 * Tudo que se move fica atrás de prefers-reduced-motion: no-preference.
 */

/* 1. Rolagem suave nas âncoras (índice do artigo, "Ir para o conteúdo", #contato) */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* 2. Cards: sobem um pouco e a foto ganha brilho. Só em dispositivos com mouse. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	article.group { transition: transform 0.25s ease; }
	article.group:hover { transform: translateY(-3px); }
	article.group img { transition: filter 0.25s ease; }
	article.group:hover img { filter: brightness(1.08); }
}

/* 3. Botões: leve "afundar" ao clicar */
@media (prefers-reduced-motion: no-preference) {
	button:not(:disabled), summary { transition: transform 0.12s ease; }
	button:not(:disabled):active, summary:active { transform: scale(0.97); }
}

/* 4. Cabeçalho: sombra suave quando a página rola */
header.sticky { transition: box-shadow 0.25s ease; }
header.sticky.mi-scrolled { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.9); }

/* 5. Menu de editorias: abre com um fade curto */
@media (prefers-reduced-motion: no-preference) {
	header details[open] > div { animation: mi-pop 0.18s ease-out; transform-origin: top left; }
}
@keyframes mi-pop {
	from { opacity: 0; transform: translateY(-6px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* 6. Seções abaixo da dobra: entram com fade e subida ao aparecerem (classes via JS) */
.mi-pre { opacity: 0; transform: translateY(16px); }
.mi-pre.mi-in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }
@media print {
	.mi-pre { opacity: 1; transform: none; }
}

/* 7. Barra de progresso de leitura (só em matérias; criada via JS) */
.mi-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 60;
	background: linear-gradient(90deg, #ff7a03, #f90807);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* Cabeçalho: no celular os três ícones (votação, podcast, busca) ficam mais juntos para não encostar no logo. */
@media (max-width: 639px) {
	#hdr-acoes { gap: .75rem; }
}

/* Rodapé: três colunas (marca, editorias, institucional). */
@media (min-width: 1024px) {
	.elp-foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, .9fr); }
}