/* GP AI Builder — Librería de efectos curados.
   Cada efecto es una clase gpai-fx-<nombre> + data-attrs opcionales.
   Todo respeta prefers-reduced-motion. */

@media (prefers-reduced-motion: reduce) {
	.gpai-fx-reveal, .gpai-fx-parallax, .gpai-fx-tilt, .gpai-fx-float,
	.gpai-fx-marquee .ghb-inner, .gpai-fx-counter, .gpai-fx-gradient-anim {
		animation: none !important; transition: none !important; transform: none !important;
	}
}

/* reveal: aparece al hacer scroll */
.gpai-fx-reveal { opacity: 0; transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.gpai-fx-reveal[data-gpai-reveal-direction="up"]    { transform: translateY(28px); }
.gpai-fx-reveal[data-gpai-reveal-direction="down"]  { transform: translateY(-28px); }
.gpai-fx-reveal[data-gpai-reveal-direction="left"]  { transform: translateX(28px); }
.gpai-fx-reveal[data-gpai-reveal-direction="right"] { transform: translateX(-28px); }
.gpai-fx-reveal.gpai-in { opacity: 1; transform: none; }

/* parallax: fondo se mueve más lento que el scroll */
.gpai-fx-parallax { position: relative; overflow: hidden; }
.gpai-fx-parallax > * { will-change: transform; }

/* glass: vidrio esmerilado */
.gpai-fx-glass {
	background: rgba(255,255,255,.08) !important;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255,255,255,.16);
}

/* gradient-anim: fondo con gradiente animado */
.gpai-fx-gradient-anim {
	background: linear-gradient(120deg, #4f46e5, #7c3aed, #ec4899, #4f46e5) !important;
	background-size: 300% 300%;
	animation: gpaiGradient 10s ease infinite;
}
@keyframes gpaiGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* tilt: inclinación 3D al pasar el mouse (JS calcula el transform) */
.gpai-fx-tilt { transition: transform .15s ease-out; transform-style: preserve-3d; will-change: transform; }

/* glow: brillo pulsante */
.gpai-fx-glow { animation: gpaiGlow 2.2s ease-in-out infinite; }
@keyframes gpaiGlow {
	0%, 100% { box-shadow: 0 0 0px 0px var(--gpai-glow-color, #4f46e5); }
	50%      { box-shadow: 0 0 24px 6px var(--gpai-glow-color, #4f46e5); }
}

/* float: flotación suave */
.gpai-fx-float { animation: gpaiFloat 4.5s ease-in-out infinite; }
@keyframes gpaiFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* stagger: hijos aparecen escalonados (usado junto con reveal en el padre) */
.gpai-fx-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.gpai-fx-stagger.gpai-in > * { opacity: 1; transform: none; }

/* marquee: contenido deslizando en banda continua */
.gpai-fx-marquee { overflow: hidden; }
.gpai-fx-marquee .ghb-inner { display: flex; gap: 32px; width: max-content; animation: gpaiMarquee linear infinite; animation-duration: var(--gpai-marquee-duration, 20s); }
@keyframes gpaiMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* particles: puntitos animados de fondo, sin JS */
.gpai-fx-particles { position: relative; overflow: hidden; }
.gpai-fx-particles::before {
	content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .5;
	background-image:
		radial-gradient(2px 2px at 20% 30%, #fff, transparent),
		radial-gradient(2px 2px at 60% 70%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 35% 80%, #fff, transparent),
		radial-gradient(2px 2px at 90% 60%, #fff, transparent);
	background-size: 200px 200px;
	animation: gpaiParticles 12s linear infinite;
}
@keyframes gpaiParticles { from { transform: translateY(0); } to { transform: translateY(-200px); } }

/* counter: número que cuenta hacia arriba (JS setea el textContent) */
.gpai-fx-counter { display: inline-block; }