/**
 * Scroll Reveal — animación de entrada al hacer scroll.
 * Aplica a secciones del maquetador, bloques, productos y elementos del footer.
 * Universal: todas las páginas (Inicio, Nosotros, Sé distribuidor, Productos, etc.).
 */

/* Estado inicial: oculto y desplazado hacia abajo */
.ss-reveal {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

/* Variantes direccionales (las asigna el JS en función del bloque) */
.ss-reveal--up    { transform: translate3d(0,  32px, 0); }
.ss-reveal--down  { transform: translate3d(0, -32px, 0); }
.ss-reveal--left  { transform: translate3d(-36px, 0, 0); }
.ss-reveal--right { transform: translate3d( 36px, 0, 0); }
.ss-reveal--zoom  { transform: scale(0.94); }
.ss-reveal--fade  { transform: none; }

/* Estado visible */
.ss-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger: cuando un contenedor entra en vista, sus hijos se animan en
   cascada usando --ss-reveal-delay calculado por el JS. */
.ss-reveal {
	transition-delay: var(--ss-reveal-delay, 0s);
}

/* No animar elementos con offset/posicionamiento propio del maquetador
   (imágenes flotantes, columnas absolutas). Solo opacidad, sin transform. */
.oz-pb-has-offset.ss-reveal,
.oz-pb-has-offset .ss-reveal {
	transform: none !important;
}

/* Reduce-motion: respeta la preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
	.ss-reveal,
	.ss-reveal--up,
	.ss-reveal--down,
	.ss-reveal--left,
	.ss-reveal--right,
	.ss-reveal--zoom,
	.ss-reveal--fade {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}