/**
 * Asta Mobili — Sistema de Motion (piloto).
 *
 * Camada de animações sutis (opacity + transform, IntersectionObserver via
 * asta-motion.js) inspirada em interfaces premium/Apple-like. Primitivas
 * genéricas, escopadas por classes/data-attributes — nenhuma regra aqui é
 * escrita "para" um título ou card específico da Home; cada seção apenas
 * marca seus elementos com os hooks abaixo (ver docs/motion-system.md).
 *
 * ETAPA ATUAL: piloto aplicado SOMENTE na Home (enfileirado por
 * includes/class-asta-motion.php apenas quando a página contém os
 * shortcodes das seções da Home). Estrutura pronta para, no futuro, ser
 * reaproveitada em PDP/Loja/Sobre/Licitações/Contato/Setores sem duplicar
 * este arquivo.
 *
 * Progressive enhancement: com JavaScript desabilitado no navegador, um
 * <noscript> impresso por Asta_Motion (só nas páginas em que o motion está
 * ativo) força opacity/transform finais em [data-asta-reveal] — o conteúdo
 * nunca depende do IntersectionObserver para aparecer.
 *
 * prefers-reduced-motion: reduce → todo o sistema (reveal, stagger, hover,
 * entrada do Hero) é neutralizado; o conteúdo aparece imediatamente.
 */

:root {
	--asta-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--asta-motion-duration-reveal: 800ms;
	--asta-motion-duration-hover: 320ms;
	--asta-motion-duration-image: 620ms;
	--asta-motion-distance: 24px;
	--asta-motion-stagger-step: 90ms;
	--asta-motion-item-delay: 0ms;
}

@media (max-width: 767px) {
	:root {
		--asta-motion-duration-reveal: 620ms;
		--asta-motion-duration-hover: 260ms;
		--asta-motion-duration-image: 500ms;
		--asta-motion-distance: 16px;
		--asta-motion-stagger-step: 60ms;
	}
}

/* ----------------------------------------------------------------------- *
 * Reveal — primitiva principal ("up"), variantes "fade" e "image".
 * Hooks: [data-asta-reveal], [data-asta-reveal="fade"], [data-asta-reveal="image"]
 * ----------------------------------------------------------------------- */

[data-asta-reveal] {
	opacity: 0;
	transform: translateY(var(--asta-motion-distance));
	transition:
		opacity var(--asta-motion-duration-reveal) var(--asta-motion-ease),
		transform var(--asta-motion-duration-reveal) var(--asta-motion-ease);
	transition-delay: var(--asta-motion-item-delay);
}

[data-asta-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fade — sem deslocamento (ou mínimo), para elementos com muita informação
   visual (ex.: mídia de blocos institucionais). */
[data-asta-reveal="fade"] {
	transform: none;
}
[data-asta-reveal="fade"].is-visible {
	transform: none;
}

/* Image — leve escala + fade, para mídia/figuras. */
[data-asta-reveal="image"] {
	transform: scale(1.015);
}
[data-asta-reveal="image"].is-visible {
	transform: scale(1);
}

/* ----------------------------------------------------------------------- *
 * Stagger — grupos com entrada sequencial.
 * Hook: [data-asta-stagger] no container; delay calculado em JS via
 * --asta-motion-item-delay em cada filho [data-asta-reveal] (respeitando
 * --asta-motion-stagger-step, já responsivo acima).
 * ----------------------------------------------------------------------- */

[data-asta-stagger] {
	/* Sem regra visual própria — apenas o hook lido pelo JS. */
}

/* ----------------------------------------------------------------------- *
 * Scroll motion (piloto) — efeito contínuo ligado ao progresso da rolagem
 * (`--asta-scroll-progress`, 0 → 1, escrita pelo JS via
 * requestAnimationFrame enquanto o elemento está próximo/visível — ver
 * asta-motion.js). Infraestrutura genérica (observer + RAF compartilhados);
 * cada variante abaixo interpola suas próprias propriedades a partir do
 * mesmo progresso, com seu próprio fallback no var() para a posição/estado
 * "natural" antes do primeiro cálculo, sem no-JS, em mobile/coarse pointer
 * e em prefers-reduced-motion.
 *
 * Intensidade padrão aprovada (referência para toda variante): distância de
 * translate ~44-48px→0. Nenhuma variante abaixo ultrapassa essa amplitude.
 *
 * SOMENTE TRANSFORM (v2.47.6): o fade ligado ao scroll foi removido de
 * todas as variantes após avaliação visual — opacity permanece 1 durante
 * todo o percurso; o movimento é percebido só pelo deslocamento. Os
 * reveals tradicionais (`[data-asta-reveal]`, acima) continuam usando
 * opacity + transform normalmente — esta regra vale só para
 * `[data-asta-scroll-motion]`.
 *
 * Hooks:
 *   [data-asta-scroll-motion="content-soft"] — translateX (48px→0, entra
 *     pela direita). Único nome ativo para esse sentido (o alias
 *     "content-right", sem uso, foi removido — ver histórico abaixo).
 *   [data-asta-scroll-motion="content-left"] — espelho horizontal:
 *     translateX (-48px→0, entra pela esquerda).
 *   [data-asta-scroll-motion="content-up"] — translateY (44px→0, entra de
 *     baixo para cima).
 *
 * Aplicadas SOMENTE em wrappers internos dedicados (nunca no mesmo elemento
 * que já recebe `data-asta-reveal`, nem no mesmo que já escreve `transform`
 * no hover, como `.asta-hover-lift`). Desktop only — ver medias abaixo.
 * ----------------------------------------------------------------------- */

[data-asta-scroll-motion="content-soft"] {
	--asta-scroll-x: calc(48px - (var(--asta-scroll-progress, 1) * 48px));
	transform: translateX(var(--asta-scroll-x));
}

[data-asta-scroll-motion="content-left"] {
	--asta-scroll-x: calc(-48px + (var(--asta-scroll-progress, 1) * 48px));
	transform: translateX(var(--asta-scroll-x));
}

[data-asta-scroll-motion="content-up"] {
	--asta-scroll-y: calc(44px - (var(--asta-scroll-progress, 1) * 44px));
	transform: translateY(var(--asta-scroll-y));
}

/* Mobile / touch — desabilitado nesta primeira versão (posição natural;
   o motion já aprovado de reveal/stagger/hover continua intacto). */
@media (max-width: 767px), (pointer: coarse) {
	[data-asta-scroll-motion] {
		transform: none !important;
	}
}

/* ----------------------------------------------------------------------- *
 * Hero — entrada inicial independente do IntersectionObserver (acima da
 * dobra: nunca deve depender de scroll nem ficar invisível aguardando JS).
 * Sequência: eyebrow / título / texto / ações, na ordem em que existirem no
 * DOM (elementos ausentes não deixam buraco na sequência).
 * ----------------------------------------------------------------------- */

@keyframes asta-motion-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.asta-hero:not(.asta-hero--slider) .asta-hero__col > *,
.asta-hero__slide.is-active .asta-hero__col > * {
	animation: asta-motion-hero-in var(--asta-motion-duration-reveal) var(--asta-motion-ease) both;
}
.asta-hero:not(.asta-hero--slider) .asta-hero__col > *:nth-child(1),
.asta-hero__slide.is-active .asta-hero__col > *:nth-child(1) { animation-delay: 0ms; }
.asta-hero:not(.asta-hero--slider) .asta-hero__col > *:nth-child(2),
.asta-hero__slide.is-active .asta-hero__col > *:nth-child(2) { animation-delay: 90ms; }
.asta-hero:not(.asta-hero--slider) .asta-hero__col > *:nth-child(3),
.asta-hero__slide.is-active .asta-hero__col > *:nth-child(3) { animation-delay: 170ms; }
.asta-hero:not(.asta-hero--slider) .asta-hero__col > *:nth-child(4),
.asta-hero__slide.is-active .asta-hero__col > *:nth-child(4) { animation-delay: 250ms; }

/* Mídia de fundo do Hero — entrada muito discreta, sem parallax. */
@keyframes asta-motion-hero-media-in {
	from { transform: scale(1.025); }
	to   { transform: scale(1); }
}
.asta-hero__image,
.asta-hero__video {
	animation: asta-motion-hero-media-in 1400ms var(--asta-motion-ease) both;
}

/* ----------------------------------------------------------------------- *
 * Hover — cards.
 * Hook: .asta-hover-lift
 * ----------------------------------------------------------------------- */

.asta-hover-lift {
	transition:
		transform var(--asta-motion-duration-hover) var(--asta-motion-ease),
		box-shadow var(--asta-motion-duration-hover) var(--asta-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
	.asta-hover-lift:hover,
	.asta-hover-lift:focus-visible {
		transform: translateY(-3px);
		box-shadow: 0 14px 28px -16px rgba(23, 22, 26, 0.24);
	}
}

/* ----------------------------------------------------------------------- *
 * Hover — imagem interna (dentro de um container com overflow apropriado).
 * Hook: .asta-hover-image (no wrapper da mídia); ativa via hover do próprio
 * wrapper OU do ancestral .asta-hover-lift (card inteiro).
 * ----------------------------------------------------------------------- */

.asta-hover-image img,
.asta-hover-image video {
	transition: transform var(--asta-motion-duration-image) var(--asta-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
	.asta-hover-image:hover img,
	.asta-hover-image:hover video,
	.asta-hover-lift:hover .asta-hover-image img,
	.asta-hover-lift:hover .asta-hover-image video,
	.asta-hover-lift:focus-visible .asta-hover-image img,
	.asta-hover-lift:focus-visible .asta-hover-image video {
		transform: scale(1.02);
	}
}

/* ----------------------------------------------------------------------- *
 * Hover — seta dos CTAs existentes da Home. Reaproveita as classes BEM já
 * emitidas por cada seção (nenhum markup novo necessário) — lista fechada,
 * escopada a este piloto da Home.
 * ----------------------------------------------------------------------- */

.asta-hero__btn-arrow,
.asta-about-intro__cta-arrow,
.asta-solutions__cta-arrow,
.asta-sectors-intro__cta-arrow,
.asta-home-products__cta-arrow,
.asta-feature-split__cta-arrow,
.asta-home-cta-final__arrow {
	display: inline-block;
	transition: transform var(--asta-motion-duration-hover) var(--asta-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
	.asta-hero__btn:hover .asta-hero__btn-arrow,
	.asta-hero__btn:focus-visible .asta-hero__btn-arrow,
	.asta-about-intro__cta:hover .asta-about-intro__cta-arrow,
	.asta-about-intro__cta:focus-visible .asta-about-intro__cta-arrow,
	.asta-solutions__cta:hover .asta-solutions__cta-arrow,
	.asta-solutions__cta:focus-visible .asta-solutions__cta-arrow,
	.asta-sectors-intro__cta:hover .asta-sectors-intro__cta-arrow,
	.asta-sectors-intro__cta:focus-visible .asta-sectors-intro__cta-arrow,
	.asta-home-products__cta:hover .asta-home-products__cta-arrow,
	.asta-home-products__cta:focus-visible .asta-home-products__cta-arrow,
	.asta-feature-split__cta:hover .asta-feature-split__cta-arrow,
	.asta-feature-split__cta:focus-visible .asta-feature-split__cta-arrow,
	.asta-home-cta-final__button:hover .asta-home-cta-final__arrow,
	.asta-home-cta-final__button:focus-visible .asta-home-cta-final__arrow {
		transform: translateX(4px);
	}
}

/* ----------------------------------------------------------------------- *
 * prefers-reduced-motion — neutraliza todo o sistema. Conteúdo some?
 * Nunca: some é a opacidade inicial; aqui garantimos opacidade/posição
 * finais imediatas, sem transição/animação.
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[data-asta-reveal],
	[data-asta-reveal].is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.asta-hero:not(.asta-hero--slider) .asta-hero__col > *,
	.asta-hero__slide.is-active .asta-hero__col > *,
	.asta-hero__image,
	.asta-hero__video {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	[data-asta-scroll-motion] {
		transform: none !important;
	}

	.asta-hover-lift,
	.asta-hover-image img,
	.asta-hover-image video,
	.asta-hero__btn-arrow,
	.asta-about-intro__cta-arrow,
	.asta-solutions__cta-arrow,
	.asta-sectors-intro__cta-arrow,
	.asta-home-products__cta-arrow,
	.asta-feature-split__cta-arrow,
	.asta-home-cta-final__arrow {
		transition: none !important;
	}

	.asta-hover-lift:hover,
	.asta-hover-lift:focus-visible,
	.asta-hover-image:hover img,
	.asta-hover-image:hover video,
	.asta-hover-lift:hover .asta-hover-image img,
	.asta-hover-lift:hover .asta-hover-image video {
		transform: none !important;
	}
}