/* ==========================================================================
   MOVIMENTO — animações discretas ao estilo Apple
   (curva, duração e distâncias vêm do theme.json → custom.movimento)

   Como usar nos templates:
     data-reveal                → sobe e aparece (padrão)
     data-reveal="fade"         → só aparece
     data-reveal="blur"         → aparece a desfocar → focar (títulos)
     data-reveal="scale"        → aparece a crescer ligeiramente (cartões)
     data-reveal="zoom"         → imagem: entra com zoom-out dentro da moldura
     data-reveal="mask"         → imagem: revelada de baixo para cima
     data-reveal-stagger        → no pai: os filhos aparecem em cascata
     data-reveal-delay="200"    → atraso extra em ms

   Só funciona com JS ativo (classe .hl-motion no <html>), por isso o
   conteúdo nunca fica escondido para o Google ou se o JS falhar.
   Quem prefere menos movimento (definição do sistema) não vê animações.
   ========================================================================== */

/* Estado inicial ---------------------------------------------------------- */

.hl-motion [data-reveal],
.hl-motion [data-reveal-stagger] > * {
	transition:
		opacity var(--mov-duracao) var(--mov-curva),
		transform var(--mov-duracao) var(--mov-curva),
		filter var(--mov-duracao) var(--mov-curva),
		clip-path var(--mov-duracao) var(--mov-curva);
	transition-delay: calc(var(--i, 0) * var(--mov-intervalo) + var(--d, 0ms));
	will-change: opacity, transform;
}

.hl-motion [data-reveal]:not(.is-visible),
.hl-motion [data-reveal-stagger]:not(.is-visible) > * {
	opacity: 0;
	transform: translate3d(0, var(--mov-distancia), 0);
}

.hl-motion [data-reveal="fade"]:not(.is-visible) {
	transform: none;
}

.hl-motion [data-reveal="blur"]:not(.is-visible) {
	transform: translate3d(0, calc(var(--mov-distancia) * .5), 0) scale(.98);
	filter: blur(var(--mov-desfoque));
}

.hl-motion [data-reveal="scale"]:not(.is-visible),
.hl-motion [data-reveal-stagger="scale"]:not(.is-visible) > * {
	transform: translate3d(0, calc(var(--mov-distancia) * .6), 0) scale(.94);
}

/* Imagem com zoom-out dentro da moldura */
.hl-motion [data-reveal="zoom"] {
	overflow: hidden;
}

.hl-motion [data-reveal="zoom"] img {
	transition: transform calc(var(--mov-duracao) * 1.6) var(--mov-curva);
}

.hl-motion [data-reveal="zoom"]:not(.is-visible) {
	transform: none;
}

.hl-motion [data-reveal="zoom"]:not(.is-visible) img {
	transform: scale(1.12);
}

/* Imagem revelada por máscara */
.hl-motion [data-reveal="mask"]:not(.is-visible) {
	opacity: 1;
	transform: none;
	clip-path: inset(100% 0 0 0 round var(--raio-lg));
}

.hl-motion [data-reveal="mask"].is-visible {
	clip-path: inset(0 0 0 0 round 0);
	transition-duration: calc(var(--mov-duracao) * 1.3);
}

/* Depois de aparecer: sem atraso e mais rápido (para o hover ficar ágil) */
.hl-motion [data-reveal].is-done,
.hl-motion [data-reveal-stagger].is-done > * {
	will-change: auto;
	transition-delay: 0s;
	transition-duration: .6s;
}

/* Cabeçalho translúcido (vidro fosco) ----------------------------------- */

.hl-header {
	transition:
		background-color var(--mov-rapido) var(--mov-curva-suave),
		box-shadow var(--mov-rapido) var(--mov-curva-suave),
		backdrop-filter var(--mov-rapido) var(--mov-curva-suave);
}

.hl-header.is-scrolled {
	background-color: color-mix(in srgb, var(--cor-branco) 72%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--cor-escuro) 8%, transparent);
}

@supports not (backdrop-filter: blur(1px)) {
	.hl-header.is-scrolled { background-color: var(--cor-branco); }
}

/* Hero: parallax suave ligado ao scroll -------------------------------- */
/* --p vai de 0 (topo) a 1 (hero fora do ecrã), calculado em motion.js */

.hl-hero__bg {
	transform: translate3d(0, calc(var(--p, 0) * 60px), 0) scale(calc(1.02 + var(--p, 0) * .08));
	will-change: transform;
}

/* O conteúdo do hero (texto e formulário) fica sempre 100% visível:
   antes esbatia-se ao fazer scroll e, no telemóvel, o formulário ficava
   "apagado" ao preenchê-lo. Agora só o fundo tem parallax. */
.hl-hero__inner {
	opacity: 1;
}

@media (max-width: 900px) {
	.hl-hero__bg {
		transform: none;
		will-change: auto;
	}
}

/* Botões e links: resposta tátil ---------------------------------------- */

.hl-btn,
.hl-form button,
.hl-circle-link,
.hl-footer-social a {
	transition:
		background-color var(--mov-rapido) var(--mov-curva),
		color var(--mov-rapido) var(--mov-curva),
		border-color var(--mov-rapido) var(--mov-curva),
		transform var(--mov-rapido) var(--mov-curva),
		box-shadow var(--mov-rapido) var(--mov-curva);
}

.hl-btn:hover,
.hl-form button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--cor-primaria) 35%, transparent);
}

.hl-btn:active,
.hl-form button:active,
.hl-circle-link:active {
	transform: scale(.97);
	transition-duration: .1s;
}

.hl-circle-link .hl-icon {
	transition: transform var(--mov-rapido) var(--mov-curva);
}

.hl-circle-link:hover .hl-icon {
	transform: translateX(3px);
}

/* Cartões: elevação suave ----------------------------------------------- */

.hl-service,
.hl-post-card,
.hl-testimonial {
	transition:
		transform .6s var(--mov-curva),
		box-shadow .6s var(--mov-curva),
		opacity var(--mov-duracao) var(--mov-curva),
		filter var(--mov-duracao) var(--mov-curva);
}

.hl-post-card__media img {
	transition: transform 1.2s var(--mov-curva);
}

.hl-post-card:hover .hl-post-card__media img {
	transform: scale(1.04);
}

/* E-book: a capa flutua levemente -------------------------------------- */

@keyframes hl-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -10px; }
}

.hl-ebook__img img {
	animation: hl-float 6s var(--mov-curva-suave) infinite;
}

/* Menos movimento -------------------------------------------------------
   Para quem tem "reduzir movimento" ligado no sistema. O comportamento é
   escolhido em Personalizar → HL Marketing Digital → Animações:
     completo  → vê tudo (nenhuma regra abaixo se aplica)
     suave     → os elementos só aparecem (sem deslizar, desfocar ou parallax)
     desligado → tudo aparece logo, sem animação
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/* Suave */
	html.hl-mov-suave [data-reveal]:not(.is-visible),
	html.hl-mov-suave [data-reveal-stagger]:not(.is-visible) > * {
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}

	html.hl-mov-suave [data-reveal="zoom"] img,
	html.hl-mov-suave .hl-hero__bg,
	html.hl-mov-suave .hl-hero__inner {
		transform: none !important;
	}

	html.hl-mov-suave .hl-hero__inner {
		opacity: 1 !important;
	}

	html.hl-mov-suave .hl-ebook__img img {
		animation: none;
	}

	/* Desligado — só anula o efeito de entrada; NÃO mexe nos filtros das
	   imagens (ex.: logótipos de clientes a cinzento). */
	html.hl-mov-desligado [data-reveal],
	html.hl-mov-desligado [data-reveal-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	html.hl-mov-desligado [data-reveal="zoom"] img,
	html.hl-mov-desligado .hl-hero__bg,
	html.hl-mov-desligado .hl-hero__inner {
		transform: none !important;
		opacity: 1 !important;
	}

	html.hl-mov-desligado .hl-ebook__img img {
		animation: none;
	}
}