/*
 * Injet animations — replica do sistema italpressegauss.com (ver RE_IPG_ANIMACOES.md)
 * Estados iniciais + vars de cor. Disparo: injet-animations.js (IO offset ~88%).
 * prefers-reduced-motion: tudo visível (JS pula; CSS abaixo não esconde).
 */

/* ---- estados iniciais (espelham o main.css do IPG) ---- */
@media (prefers-reduced-motion: no-preference) {
	/* conteúdo revelado (motor adiciona .anim-done; cobre abas ocultas e edge cases) */
	.js-anim [data-anim].anim-done { opacity: 1 !important; transform: none !important; }
	.js-anim [data-anim].anim-done .staggerEl { opacity: 1 !important; transform: none !important; }
	.js-anim [data-anim].anim-done .splitted--line { opacity: 1 !important; transform: none !important; }
	.js-anim [data-anim="image-with-border"].anim-done .inner { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important; }
	.js-anim .anim-done [data-anim="fade-in"], .js-anim [data-anim="fade-in-up"], .js-anim [data-anim="fade-in-up-stagger"] .staggerEl, .js-anim [data-anim="lettering-lines-fade-in-up"] .splitted--line { opacity: 0; }
	[data-anim="fade-in"] { opacity: 0; }
	[data-anim="fade-in-up"] { opacity: 0; transform: translateY(5vh); }
	[data-anim="fade-in-up-stagger"] .staggerEl { opacity: 0; transform: translateY(5vh); }
	[data-anim="lettering-lines-fade-in-up"] .splitted--line { opacity: 0; transform: translateY(2vh); }
	[data-anim="image-with-border"] .inner { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
	[data-anim="image-with-border"] { border: 1px solid var(--accent); overflow: hidden; }
	[data-anim="fill-to-right"] { width: 0; overflow: hidden; }
}

/* ---- lettering: vars de cor por tema (dark = light→accent→dark) ---- */
[data-anim^="lettering"] {
	--ca-start: var(--text);
	--ca-mid: var(--accent-hover);
	--ca-end: var(--text);
}
[data-anim="lettering-color-animation"].dim,
[data-anim="lettering-color-with-strong"].dim {
	/* variante "dim": começa apagado sobre fundo claro (IPG .light) */
	--ca-start: rgba(20, 22, 26, 0.35);
	--ca-mid: var(--accent-hover);
	--ca-end: var(--text);
}
[data-anim="lettering-color-with-strong"] { --ca-strong-end: var(--accent); }

.splitted--line { display: block; position: relative; text-align: start; }
.splitted--word { display: inline-block; position: relative; }
.splitted--char { display: inline-block; position: relative; }

/* ---- botão que revela texto no hover (IPG button--style-filled-reveal) ---- */
.btn-reveal {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	border-radius: 1.5rem;
	transition: border-radius .5s ease-in-out;
}
.btn-reveal .btn-reveal--wrapper {
	display: flex;
	align-items: center;
	gap: 0;
	height: 3rem;
	padding: .9375rem;
	transition: gap .4s ease-in-out;
}
.btn-reveal .btn-reveal--hidden {
	display: flex;
	overflow: hidden;
	position: relative;
	width: 0;
	transition: width .4s ease-in-out;
	white-space: nowrap;
}
.btn-reveal:hover { border-radius: .375rem; }
.btn-reveal:hover .btn-reveal--wrapper { gap: 2rem; }
.btn-reveal:hover .btn-reveal--hidden { width: var(--btn-reveal-width, auto); }

/* barra de progresso fill-to-right em section heads (IPG usa em divisórios) */
[data-anim="fill-to-right"].rule {
	height: 1px;
	background: var(--line);
	--anim-width: 100%;
}