/* Videlis — animações de entrada e microinterações.
   Tudo só vale com a classe "anim" no <html> (definida por script no cabeçalho quando o navegador
   suporta e a pessoa não pediu "reduzir movimento"). Sem ela, o site aparece normalmente. */

:root {
	--anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--anim-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vd-entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes vd-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }

/* ---------- Entrada ao rolar ---------- */
.anim [data-reveal] {
	--ty: 28px;
	opacity: 0;
	transform: translateY(var(--ty));
	transition: opacity 0.7s var(--anim-ease), transform 0.7s var(--anim-ease), box-shadow 0.3s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.anim [data-reveal].is-visible { --ty: 0px; opacity: 1; }
/* Depois de aparecer, o atraso some para o "passar o mouse" responder na hora. */
.anim [data-reveal].is-done { transition: opacity 0.3s ease, transform 0.35s var(--anim-ease), box-shadow 0.3s ease, border-color 0.25s ease, background-color 0.25s ease; transition-delay: 0s !important; }

/* Fotos: sobem, ampliam um pouco e "assentam". */
.anim [data-reveal="foto"] { --ty: 22px; overflow: hidden; border-radius: var(--radius-lg); }
.anim [data-reveal="foto"] img { transform: scale(1.08); transition: transform 1.4s var(--anim-ease); }
.anim [data-reveal="foto"].is-visible img { transform: scale(1); }

/* Ícones e números das etapas "estouram" depois do cartão. */
.anim [data-reveal] :is(.card-info__ico, .principle__icon, .channel__icon, .format__icon, .etapas-6__no, .etapas-6__ico, .step-badge, .area-card__icon) {
	scale: 0.7;
	transition: scale 0.6s var(--anim-pop) 0.2s;
}
.anim [data-reveal].is-visible :is(.card-info__ico, .principle__icon, .channel__icon, .format__icon, .etapas-6__no, .etapas-6__ico, .step-badge, .area-card__icon) { scale: 1; }

/* ---------- Topo das páginas ---------- */
.anim .hero__content > * { animation: vd-entra 0.9s var(--anim-ease) both; }
.anim .hero__content > :nth-child(2) { animation-delay: 0.12s; }
.anim .hero__content > :nth-child(3) { animation-delay: 0.24s; }
.anim .hero__content > :nth-child(4) { animation-delay: 0.36s; }
.anim .hero__content > :nth-child(n+5) { animation-delay: 0.48s; }
.anim .hero__media { overflow: hidden; }
.anim .hero__media img { animation: vd-zoom 1.8s var(--anim-ease) both; }

/* ---------- Assistente de agendamento ---------- */
.anim .triagem__opcoes > * { animation: vd-entra 0.55s var(--anim-ease) both; }
.anim .triagem__opcoes > :nth-child(2) { animation-delay: 0.05s; }
.anim .triagem__opcoes > :nth-child(3) { animation-delay: 0.1s; }
.anim .triagem__opcoes > :nth-child(4) { animation-delay: 0.15s; }
.anim .triagem__opcoes > :nth-child(5) { animation-delay: 0.2s; }
.anim .triagem__opcoes > :nth-child(6) { animation-delay: 0.25s; }
.anim .triagem__opcoes > :nth-child(n+7) { animation-delay: 0.3s; }

/* ---------- Passar o mouse: cartões sobem ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.anim [data-reveal].is-visible.vd-lift:hover {
		--ty: -5px;
		box-shadow: 0 18px 34px rgba(60, 50, 30, 0.12);
		border-color: var(--color-sand-400);
	}
	.btn--seta svg, .link-seta svg { transition: transform 0.3s var(--anim-ease); }
	.btn--seta:hover svg, .link-seta:hover svg { transform: translateX(4px); }
}

@media print {
	.anim [data-reveal] { opacity: 1 !important; transform: none !important; }
}