/**
 * ShopTop — Refinamentos visuais transversais (Sprint D)
 * ------------------------------------------------------------------
 * Regras que não pertencem a um componente específico (Hero, card,
 * botão, rodapé): keyframe de entrada compartilhado e o bloco de
 * acessibilidade prefers-reduced-motion.
 *
 * Depende de: nenhum (carregado logo após header.css).
 */

@keyframes shoptop-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* CORREÇÃO: rolagem suave para os links de âncora da página (cards de
 * Benefícios → #shoptop-pagamento/#shoptop-confianca, botão "Conheça a
 * [nome comercial]" do Hero) — sem isto, o navegador pula direto para o
 * alvo sem nenhuma transição visível, o que pode parecer que o clique
 * "não fez nada". O bloco de prefers-reduced-motion logo abaixo já
 * previa este `scroll-behavior: auto !important`, mas a regra base
 * nunca tinha sido declarada. */
html {
	scroll-behavior: smooth;
}

/*
 * !important justificado aqui, e SOMENTE dentro deste bloco de
 * media query: é a única forma confiável de garantir que qualquer
 * transição/animação do site (presente ou futura, em qualquer
 * componente) respeite a preferência de acessibilidade do usuário,
 * sem depender de listar manualmente cada seletor. Fora deste bloco,
 * nenhuma regra deste arquivo usa !important.
 *
 * Efeito neste modo: toda animação/transição passa a durar ~0.01ms
 * (ou seja, é removida na prática) — o conteúdo permanece
 * completamente visível (a animação de entrada do Hero, por exemplo,
 * só reduz a duração, nunca deixa opacity:0 "travado").
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}