/* ==========================================================================
   bl-fx v2 — Parallax + Blur reveal componibles (blomon-base)

   Ambos efectos conviven en el MISMO contenedor: cada uno escribe en su
   propia variable y el transform es la suma de las dos.

   Clases:
     .bl-fx-parallax            -> parallax (el bloque va más lento que el scroll)
     .bl-fx-parallax-up         -> parallax en sentido contrario
     .bl-parallax-40/80/120/160 -> recorrido máximo en px hacia cada lado
     .bl-fx-blur                -> aparición con blur + fade + slide
     .bl-delay-120 / -200 / -320

   Control fino por elemento (Elementor > Avanzado > CSS personalizado):
     selector { --bl-fx-strength: 140px; }
   o directamente en el HTML:
     data-bl-parallax="140"
   ========================================================================== */

@property --bl-fx-reveal-y {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --bl-fx-parallax-y {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/* --------------------------------------------------------------------------
   1) Transform compuesto — común a los dos efectos
   -------------------------------------------------------------------------- */
.bl-fx-parallax,
.bl-fx-parallax-up,
.bl-fx-blur,
.ca-fx-parallax,
.ca-fx-parallax-up,
.ca-fx-blur {
	--bl-fx-reveal-y: 0px;
	--bl-fx-parallax-y: 0px;
	transform: translate3d(0, calc(var(--bl-fx-reveal-y) + var(--bl-fx-parallax-y)), 0);
}

/* --------------------------------------------------------------------------
   2) Parallax — intensidad = recorrido máximo en px hacia cada lado
   -------------------------------------------------------------------------- */
.bl-fx-parallax,
.bl-fx-parallax-up,
.ca-fx-parallax,
.ca-fx-parallax-up {
	--bl-fx-strength: 80px;
	will-change: transform;
}

.bl-parallax-40 { --bl-fx-strength: 40px; }
.bl-parallax-80 { --bl-fx-strength: 80px; }
.bl-parallax-120 { --bl-fx-strength: 120px; }
.bl-parallax-160 { --bl-fx-strength: 160px; }

/* Equivalencias de las clases antiguas */
.ca-parallax-4 { --bl-fx-strength: 40px; }
.ca-parallax-6 { --bl-fx-strength: 60px; }
.ca-parallax-8 { --bl-fx-strength: 80px; }
.ca-parallax-10 { --bl-fx-strength: 100px; }

/* --------------------------------------------------------------------------
   3) Blur reveal
   No se transiciona `transform`, sino la variable --bl-fx-reveal-y. Así el
   parallax escribe en --bl-fx-parallax-y sin que la transition lo suavice.
   -------------------------------------------------------------------------- */
.bl-fx-blur,
.ca-fx-blur {
	--bl-fx-reveal-y: 18px;
	opacity: 0;
	filter: blur(10px);
	transition:
		opacity 1s ease,
		filter 1.1s ease,
		--bl-fx-reveal-y 1s cubic-bezier(.22, 1, .36, 1);
	will-change: transform, opacity, filter;
}

.bl-fx-blur.bl-is-in,
.ca-fx-blur.ca-is-in {
	--bl-fx-reveal-y: 0px;
	opacity: 1;
	filter: blur(0);
}

/* Recorrido del slide del reveal, opcional */
.bl-reveal-8 { --bl-fx-reveal-y: 8px; }
.bl-reveal-32 { --bl-fx-reveal-y: 32px; }
.bl-reveal-48 { --bl-fx-reveal-y: 48px; }

.bl-delay-120,
.ca-delay-120 { transition-delay: 120ms !important; }

.bl-delay-200,
.ca-delay-200 { transition-delay: 200ms !important; }

.bl-delay-320 { transition-delay: 320ms !important; }

/* Libera memoria de GPU al terminar el reveal, si no hay parallax */
.bl-fx-done:not(.bl-fx-parallax):not(.bl-fx-parallax-up):not(.ca-fx-parallax):not(.ca-fx-parallax-up) {
	will-change: auto;
}

/* --------------------------------------------------------------------------
   4) Accesibilidad
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.bl-fx-parallax,
	.bl-fx-parallax-up,
	.bl-fx-blur,
	.ca-fx-parallax,
	.ca-fx-parallax-up,
	.ca-fx-blur {
		transform: none !important;
		will-change: auto;
	}

	.bl-fx-blur,
	.ca-fx-blur {
		opacity: 1 !important;
		filter: none !important;
		transition: none !important;
	}
}