/**
 * SEI Integra — Animaciones tecnológicas
 * Solo transform/opacity para no penalizar Core Web Vitals.
 */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes sei-shimmer {
	0% {
		background-position: 200% center;
	}
	100% {
		background-position: -200% center;
	}
}

@keyframes sei-glow-pulse {
	0%,
	100% {
		opacity: 0.35;
		transform: scaleX(0.6);
	}
	50% {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes sei-scan {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	10% {
		opacity: 0.5;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		transform: translateY(100vh);
		opacity: 0;
	}
}

@keyframes sei-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes sei-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes sei-line-grow {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes sei-line-grow-y {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

@keyframes sei-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes sei-border-glow {
	0%,
	100% {
		box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	}
	50% {
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
	}
}

/* --------------------------------------------------------------------------
   Scan line sutil (tech feel)
   -------------------------------------------------------------------------- */
body.sei-ready::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 120px;
	pointer-events: none;
	z-index: 9997;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(192, 192, 192, 0.04),
		transparent
	);
	animation: sei-scan 9s linear infinite;
	animation-delay: 2s;
	will-change: transform;
}

/* --------------------------------------------------------------------------
   Títulos metalizados animados
   -------------------------------------------------------------------------- */
.elementor-heading-title,
.sei-metal-text {
	animation: sei-shimmer 6s linear infinite;
}

.elementor-location-header .elementor-heading-title {
	animation: none;
	-webkit-text-fill-color: var(--sei-silver-bright);
	color: var(--sei-silver-bright) !important;
	background: none;
}

/* --------------------------------------------------------------------------
   Visibilidad — Elementor no debe ocultar contenido
   -------------------------------------------------------------------------- */
.elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

.elementor-motion-effects-element,
.elementor-element[class*="motion-fx"] {
	transform: none !important;
	opacity: 1 !important;
}

.animated,
.elementor-animated-content {
	animation: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.sei-reveal,
.sei-reveal-left,
.sei-reveal-scale {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Stagger children */
.sei-stagger > .sei-reveal:nth-child(1) { transition-delay: 0.05s; }
.sei-stagger > .sei-reveal:nth-child(2) { transition-delay: 0.12s; }
.sei-stagger > .sei-reveal:nth-child(3) { transition-delay: 0.19s; }
.sei-stagger > .sei-reveal:nth-child(4) { transition-delay: 0.26s; }
.sei-stagger > .sei-reveal:nth-child(5) { transition-delay: 0.33s; }
.sei-stagger > .sei-reveal:nth-child(6) { transition-delay: 0.4s; }
.sei-stagger > .sei-reveal:nth-child(7) { transition-delay: 0.47s; }
.sei-stagger > .sei-reveal:nth-child(8) { transition-delay: 0.54s; }

/* Widgets Elementor como targets de reveal */
.elementor-widget.sei-reveal,
.e-con.sei-reveal,
.elementor-element.sei-reveal {
	/* hereda de .sei-reveal */
}

/* --------------------------------------------------------------------------
   Hover glow en cards / icon boxes / productos
   -------------------------------------------------------------------------- */
.elementor-icon-box,
.elementor-image-box,
.woocommerce ul.products li.product {
	position: relative;
}

.elementor-icon-box::after,
.elementor-image-box::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sei-silver-mid, #a8a8a8), transparent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.elementor-icon-box:hover::after,
.elementor-image-box:hover::after {
	transform: scaleX(1);
}

/* Glow tipo "iluminación" en iconos al hover */
.elementor-icon-box:hover .elementor-icon i,
.elementor-icon-box:hover .elementor-icon svg {
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
	transition: filter 0.45s ease;
}

/* --------------------------------------------------------------------------
   Imágenes — entrada suave
   -------------------------------------------------------------------------- */
.elementor-widget-image img,
.woocommerce ul.products li.product img,
.wp-post-image {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease, opacity 0.6s ease;
}

.elementor-widget-image:hover img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
	filter: brightness(1.08) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Page load — header entra desde arriba (sin afectar el fondo opaco)
   -------------------------------------------------------------------------- */
.elementor-location-header {
	animation: sei-fade-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* El scan line y spotlight nunca pasan por encima del header */
body.sei-ready::after,
.sei-spotlight {
	z-index: 50 !important;
}

/* --------------------------------------------------------------------------
   Cursor spotlight (capa ligera, solo desktop)
   -------------------------------------------------------------------------- */
.sei-spotlight {
	position: fixed;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9996;
	background: radial-gradient(circle, rgba(192, 192, 192, 0.07) 0%, transparent 70%);
	transform: translate3d(-50%, -50%, 0);
	opacity: 0;
	transition: opacity 0.35s ease;
	will-change: transform;
	mix-blend-mode: screen;
}

body.sei-pointer-active .sei-spotlight {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Línea decorativa animada (utilidad)
   -------------------------------------------------------------------------- */
.sei-line {
	display: block;
	height: 1px;
	width: 100%;
	background: linear-gradient(90deg, transparent, var(--sei-silver-mid, #a8a8a8), transparent);
	transform-origin: left center;
}

.sei-line.is-visible {
	animation: sei-line-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sei-reveal,
	.sei-reveal-left,
	.sei-reveal-scale {
		opacity: 1 !important;
		transform: none !important;
	}

	body.sei-ready::after,
	.sei-spotlight {
		display: none !important;
	}

	.elementor-heading-title {
		animation: none !important;
	}
}

/* Sin spotlight en touch / pantallas pequeñas */
@media (max-width: 1024px), (hover: none) {
	.sei-spotlight,
	body.sei-ready::after {
		display: none !important;
	}

	html {
		scroll-behavior: auto !important;
	}

	.elementor-heading-title,
	.sei-metal-text {
		animation: none !important;
	}

	/* Evita repintado al scroll en iOS/Android */
	body::before {
		display: none !important;
	}

	.elementor-location-header:not(.sei-header) {
		animation: none !important;
	}
}