/*
 * Movimento do site (todas as páginas, menos a landing do Zafarie CRM).
 * Os estados iniciais só valem com html.zf-mo (JS ativo, sem "reduzir
 * movimento"). Com html.zf-mo-falhou ou sem JS, tudo aparece parado.
 */

:root {
	--zf-mo-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--zf-mo-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Barra de progresso de leitura ---------- */

.zf-mo-progresso {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #6109d7, #9a54f8 60%, #d9bffc);
	box-shadow: 0 0 12px rgba(154, 84, 248, 0.7);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
	contain: strict;
	pointer-events: none;
}
.admin-bar .zf-mo-progresso { top: 32px; }
@media (max-width: 782px) { .admin-bar .zf-mo-progresso { top: 46px; } }

/* ---------- Leveza ---------- */

/* Desfoque de fundo (backdrop-filter) em barras fixas obriga o navegador a
   redesenhar o desfoque a cada quadro enquanto o conteúdo anima por baixo.
   Troca por fundo quase opaco: visual igual, rolagem bem mais leve. */
.wp-site-blocks > header.wp-block-template-part::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(10, 10, 11, 0.96);
}
.zf-hub-nav {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(12, 11, 17, 0.97);
}

/* ---------- Entrada da página ---------- */

/* Cabeçalho: só opacidade (transform quebraria o menu fixo). */
html.zf-mo:not(.zf-mo-falhou) body > .wp-site-blocks > header,
html.zf-mo:not(.zf-mo-falhou) body > .wp-site-blocks > .wp-block-template-part:first-child {
	animation: zf-mo-aparece 0.8s var(--zf-mo-ease) both;
}
@keyframes zf-mo-aparece { from { opacity: 0; } to { opacity: 1; } }

/* Topo: cada linha sobe e ganha foco em cascata. Opacidade inicial mínima
   (não zero) para o título continuar contando como LCP. */
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo-linha] {
	transition: opacity 1s var(--zf-mo-ease), transform 1.1s var(--zf-mo-ease), filter 1s var(--zf-mo-ease);
	transition-delay: calc(var(--zf-k, 0) * 90ms + 60ms);
}
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo-topo]:not(.zf-mo-in) [data-zf-mo-linha] {
	opacity: 0.01;
	transform: translate3d(0, 30px, 0);
	filter: blur(10px);
}

/* Antes do JS: o topo (coluna do título e a coluna vizinha) já nasce no
   estado inicial, sem piscar. Depois o JS assume (html.zf-mo-js). */
html.zf-mo:not(.zf-mo-js):not(.zf-mo-falhou) main :has(> h1):not([data-zf-segh] *):not([data-zf-topo-proprio] *) > :not(img, picture, video, canvas, iframe):not(:has(img, picture, video, canvas, iframe)) {
	opacity: 0.01;
	transform: translate3d(0, 30px, 0);
	filter: blur(10px);
}
html.zf-mo:not(.zf-mo-js):not(.zf-mo-falhou) main :has(> * > h1):not([data-zf-segh] *):not([data-zf-topo-proprio] *) > :not(:has(> h1)):not(img, picture, video, canvas, iframe):not(:has(img, picture, video, canvas, iframe)) {
	opacity: 0.01;
	transform: perspective(1400px) rotateX(12deg) rotateY(-10deg) translate3d(30px, 40px, 0) scale(0.95);
	filter: blur(6px);
}

/* Visual ao lado do título (imagem, painel, mapa): assenta em 3D. */
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo-visual] {
	transition: opacity 1.2s var(--zf-mo-ease) 0.25s, transform 1.4s var(--zf-mo-ease) 0.25s, filter 1.2s var(--zf-mo-ease) 0.25s;
}
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo-topo]:not(.zf-mo-in) [data-zf-mo-visual] {
	opacity: 0.01;
	transform: perspective(1400px) rotateX(12deg) rotateY(-10deg) translate3d(30px, 40px, 0) scale(0.95);
	filter: blur(6px);
}

/* ---------- Ao rolar ---------- */

/* Esconder é instantâneo; a transição só existe na entrada (sem piscar). */
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo] {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
}
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="escala"] { transform: translate3d(0, 28px, 0) scale(0.95); }
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="direita"] { transform: translate3d(48px, 0, 0); }
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="etapa"] { transform: translate3d(0, 24px, 0) scale(0.9); }

html.zf-mo:not(.zf-mo-falhou) [data-zf-mo].zf-mo-in {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity 0.8s var(--zf-mo-ease), transform 0.9s var(--zf-mo-ease);
	transition-delay: var(--zf-atraso, 0ms);
}
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="etapa"].zf-mo-in { transition-timing-function: var(--zf-mo-ease), var(--zf-mo-mola); }

/* Depois de entrar, o hover dos cards volta a funcionar normalmente. */
html.zf-mo:not(.zf-mo-falhou) a.zf-int-card.zf-mo-in:hover { transform: translateY(-2px); }

/* Linhas das etapas se desenham quando o grupo aparece. */
html.zf-mo:not(.zf-mo-falhou) :is(.zf-int-faixa--processo .zf-secao ol, .zf-home-metodo__etapas, .zf-sol-jornada__lista, .zf-area-metodo__lista, .zf-hub-jornada__lista)[data-zf-mo-grupo]::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.4s var(--zf-mo-ease) 0.2s;
}
html.zf-mo:not(.zf-mo-falhou) :is(.zf-int-faixa--processo .zf-secao ol, .zf-home-metodo__etapas, .zf-sol-jornada__lista, .zf-area-metodo__lista, .zf-hub-jornada__lista).zf-mo-visivel::before { transform: none; }
@media (max-width: 767px) {
	html.zf-mo:not(.zf-mo-falhou) :is(.zf-int-faixa--processo .zf-secao ol, .zf-sol-jornada__lista, .zf-area-metodo__lista, .zf-hub-jornada__lista)[data-zf-mo-grupo]::before { transform: scaleY(0); transform-origin: center top; }
	html.zf-mo:not(.zf-mo-falhou) :is(.zf-int-faixa--processo .zf-secao ol, .zf-sol-jornada__lista, .zf-area-metodo__lista, .zf-hub-jornada__lista).zf-mo-visivel::before { transform: none; }
	html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="direita"] { transform: translate3d(0, 30px, 0); }
}

/* Ícone das etapas "acende" com mola. */
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="etapa"] :is(.zf-hub-jornada__marca, .zf-int-icone) {
	transition: transform 0.7s var(--zf-mo-mola), box-shadow 0.7s;
	transition-delay: calc(var(--zf-atraso, 0ms) + 120ms);
}
html.zf-mo:not(.zf-mo-falhou) [data-zf-mo="etapa"]:not(.zf-mo-in) :is(.zf-hub-jornada__marca, .zf-int-icone) { transform: scale(0.5); box-shadow: none; }

/* Destaque roxo dos títulos: um brilho passa uma vez quando aparece. */
html.zf-mo:not(.zf-mo-falhou) :is([data-zf-mo-topo], .zf-int-cabeca, .zf-hub-area__intro, .zf-segp-ajuda__intro) .zf-int-destaque {
	background-image: linear-gradient(100deg, currentColor 0%, currentColor 42%, #f3e8ff 50%, currentColor 58%, currentColor 100%);
	background-size: 260% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
html.zf-mo:not(.zf-mo-falhou) :is([data-zf-mo-topo].zf-mo-in, .zf-int-cabeca.zf-mo-visivel, .zf-int-cabeca .zf-mo-in, .zf-hub-area__intro .zf-mo-in, .zf-segp-ajuda__intro .zf-mo-in) .zf-int-destaque {
	animation: zf-mo-brilho 1.6s var(--zf-mo-ease) 0.5s both;
}
@keyframes zf-mo-brilho {
	from { background-position: 100% 0; }
	to { background-position: 0% 0; }
}

/* Brilho que segue o cursor nos cards (só com mouse). */
[data-zf-mo-luz]:hover {
	background-image: radial-gradient(280px circle at var(--zf-mx, 50%) var(--zf-my, 0%), rgba(154, 84, 248, 0.14), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
	[data-zf-mo], [data-zf-mo-linha], [data-zf-mo-visual] { opacity: 1 !important; transform: none !important; filter: none !important; }
	.zf-mo-progresso { display: none; }
}