/*!
 * Animaciones EPYA - estilos front-end
 * Las variables --epya-* se generan dinámicamente desde el panel de configuración.
 */

:root {
	--epya-duration: 800ms;
	--epya-delay-step: 100ms;
	--epya-distance: 40px;
	--epya-easing: cubic-bezier(0.16, 1, 0.3, 1);
	--epya-accent: #c9a24b;
	--epya-underline-color: #c9a24b;
	--epya-btn-fill-color: #1a1a1a;
	--epya-btn-text-hover-color: #ffffff;
	--epya-counter-color: #1a1a1a;
	--epya-overlay-bg: #111111;
	--epya-preloader-bg: #ffffff;
	--epya-marquee-speed: 30s;
}

/* ==========================================================================
   1. Fade / slide / zoom al hacer scroll
   Estado inicial (oculto) + estado .epya-in-view (visible), añadido por JS
   con IntersectionObserver.
   ========================================================================== */

/* !important en opacity/transform: varios page builders (Spectra/UAGB,
   Elementor, Divi...) generan su propio CSS por bloque que puede cargarse
   después del nuestro con la misma especificidad y dejar el elemento
   siempre visible. Forzamos con !important para garantizar que el estado
   oculto/visible del plugin siempre gane. La transición en sí NO lleva
   !important para no romper integraciones legítimas que la personalicen. */
.epya-fade-up,
.epya-fade-down,
.epya-fade-left,
.epya-fade-right,
.epya-zoom-in {
	opacity: 0 !important;
	transition: opacity var(--epya-duration) var(--epya-easing),
		transform var(--epya-duration) var(--epya-easing) !important;
	will-change: opacity, transform;
}

.epya-fade-up {
	transform: translateY(var(--epya-distance)) !important;
}
.epya-fade-down {
	transform: translateY(calc(var(--epya-distance) * -1)) !important;
}
.epya-fade-left {
	transform: translateX(var(--epya-distance)) !important;
}
.epya-fade-right {
	transform: translateX(calc(var(--epya-distance) * -1)) !important;
}
.epya-zoom-in {
	transform: scale(1.08) !important;
}

.epya-fade-up.epya-in-view,
.epya-fade-down.epya-in-view,
.epya-fade-left.epya-in-view,
.epya-fade-right.epya-in-view,
.epya-zoom-in.epya-in-view {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
}

/* Cascada: el índice --epya-child-index lo asigna el JS directamente sobre
   el elemento animable (epya-fade-up/etc.), sin importar cuántos <div> de
   envoltura use el builder (Spectra/UAGB, Elementor, Divi...) entre el
   contenedor .epya-stagger y la tarjeta real. Por eso el retraso se aplica
   aquí, sobre las propias clases animables, y no sobre ".epya-stagger > *"
   (que solo mira hijos directos y no llega a tarjetas anidadas). */
.epya-fade-up,
.epya-fade-down,
.epya-fade-left,
.epya-fade-right,
.epya-zoom-in {
	/* Si el elemento trae un retraso manual (data-epya-delay), la variable
	   --epya-manual-delay gana; si no, se usa el cálculo de cascada del
	   stagger. Todo por variable CSS (y no como estilo inline directo)
	   porque la regla de arriba usa !important y eso anularía un
	   transition-delay puesto como estilo inline normal. */
	transition-delay: var(
		--epya-manual-delay,
		calc(var(--epya-delay-step) * var(--epya-child-index, 0))
	) !important;
}

/* ==========================================================================
   2. Contadores numéricos
   ========================================================================== */

.epya-counter {
	color: var(--epya-counter-color);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. Marquee infinito (logos, texto en bucle)
   ========================================================================== */

.epya-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.epya-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: epya-marquee-scroll var(--epya-marquee-speed) linear infinite;
}

.epya-marquee:hover .epya-marquee__track {
	animation-play-state: paused;
}

@keyframes epya-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   4. Subrayado animado en enlaces (hover)
   ========================================================================== */

.epya-underline {
	position: relative;
	display: inline-block;
	text-decoration: none;
	background-image: linear-gradient(var(--epya-underline-color), var(--epya-underline-color));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size var(--epya-duration) var(--epya-easing);
	padding-bottom: 2px;
}

.epya-underline:hover,
.epya-underline:focus-visible {
	background-size: 100% 1px;
}

/* ==========================================================================
   5. Relleno de color en botones (hover)
   ========================================================================== */

.epya-btn-fill {
	position: relative;
	display: inline-block;
	overflow: hidden;
	z-index: 0;
	text-decoration: none;
	transition: color var(--epya-duration) var(--epya-easing);
}

.epya-btn-fill::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--epya-btn-fill-color);
	transform: scaleX(0);
	transform-origin: left;
	z-index: -1;
	transition: transform var(--epya-duration) var(--epya-easing);
}

.epya-btn-fill:hover,
.epya-btn-fill:focus-visible {
	color: var(--epya-btn-text-hover-color);
}

.epya-btn-fill:hover::before,
.epya-btn-fill:focus-visible::before {
	transform: scaleX(1);
}

/* ==========================================================================
   6. Rotación de icono "+" en hover
   ========================================================================== */

.epya-icon-rotate {
	display: inline-block;
	transition: transform var(--epya-duration) var(--epya-easing);
	transform-origin: center;
}

a:hover > .epya-icon-rotate,
a:focus-visible > .epya-icon-rotate,
.epya-icon-rotate:hover,
.epya-icon-rotate:focus-visible {
	transform: rotate(45deg);
}

/* ==========================================================================
   7. Menú overlay a pantalla completa
   ========================================================================== */

.epya-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--epya-overlay-bg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-16px);
	transition: opacity var(--epya-duration) var(--epya-easing),
		transform var(--epya-duration) var(--epya-easing),
		visibility 0s linear var(--epya-duration);
}

.epya-menu-overlay.epya-menu-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--epya-duration) var(--epya-easing),
		transform var(--epya-duration) var(--epya-easing),
		visibility 0s linear 0s;
}

body.epya-menu-lock {
	overflow: hidden;
}

/* ==========================================================================
   8. Cabecera fija que se encoge al hacer scroll
   ========================================================================== */

.epya-sticky-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: padding var(--epya-duration) var(--epya-easing),
		box-shadow var(--epya-duration) var(--epya-easing),
		background-color var(--epya-duration) var(--epya-easing);
}

.epya-sticky-header.epya-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.epya-sticky-header.epya-scrolled .epya-shrink-target {
	transform: scale(0.9);
}

.epya-shrink-target {
	transition: transform var(--epya-duration) var(--epya-easing);
	transform-origin: left center;
}

/* ==========================================================================
   9. Preloader
   ========================================================================== */

.epya-anim-preloader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--epya-preloader-bg);
	opacity: 1;
	transition: opacity var(--epya-duration) var(--epya-easing);
	pointer-events: none;
}

.epya-anim-preloader.epya-preloader-hidden {
	opacity: 0;
}

/* ==========================================================================
   10. Accesibilidad: reducir movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.epya-anim-reduced .epya-fade-up,
	.epya-anim-reduced .epya-fade-down,
	.epya-anim-reduced .epya-fade-left,
	.epya-anim-reduced .epya-fade-right,
	.epya-anim-reduced .epya-zoom-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.epya-anim-reduced .epya-marquee__track {
		animation: none !important;
	}
}