/* Paquete "Premium Extravagantes" — Animaciones Globales para Elementor */

/* ★ 1. Glitch RGB */
.egm-run[data-egm-anim="glitch-rgb"] { animation-name: egm-glitch-rgb; }
@keyframes egm-glitch-rgb {
	0%   { opacity: 0; }
	6%   { opacity: 1; clip-path: inset(42% -20px 50% -20px); transform: translate(-22px, 0); filter: drop-shadow(-7px 0 0 rgba(255, 0, 90, .95)) drop-shadow(7px 0 0 rgba(0, 235, 255, .95)); }
	14%  { clip-path: inset(8% -20px 78% -20px); transform: translate(16px, -2px); }
	22%  { clip-path: inset(70% -20px 4% -20px); transform: translate(-12px, 3px) skewX(-14deg); }
	30%  { clip-path: inset(22% -20px 46% -20px); transform: translate(10px, 0); filter: drop-shadow(-5px 0 0 rgba(255, 0, 90, .9)) drop-shadow(5px 0 0 rgba(0, 235, 255, .9)); }
	38%  { clip-path: inset(0 -20px 82% -20px); transform: translate(-7px, 0) skewX(9deg); }
	46%  { clip-path: inset(52% -20px 18% -20px); transform: translate(6px, 1px); }
	54%  { clip-path: inset(-20px -20px -20px -20px); transform: translate(-4px, 0); filter: drop-shadow(-3px 0 0 rgba(255, 0, 90, .8)) drop-shadow(3px 0 0 rgba(0, 235, 255, .8)); }
	62%  { clip-path: inset(30% -20px 58% -20px); transform: translate(5px, 0); }
	70%  { clip-path: inset(-20px -20px -20px -20px); transform: translate(-2px, 0); }
	82%  { filter: drop-shadow(-2px 0 0 rgba(255, 0, 90, .6)) drop-shadow(2px 0 0 rgba(0, 235, 255, .6)); transform: translate(1px, 0); }
	100% { opacity: 1; clip-path: inset(-20px -20px -20px -20px); transform: none; filter: none; }
}

/* ★ 2. Persianas venecianas */
@property --egm-slat { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.egm-run[data-egm-anim="venetian"] {
	animation-name: egm-venetian;
	-webkit-mask-image: linear-gradient(to bottom, #000 var(--egm-slat), transparent var(--egm-slat));
	        mask-image: linear-gradient(to bottom, #000 var(--egm-slat), transparent var(--egm-slat));
	-webkit-mask-size: 100% 10%;
	        mask-size: 100% 10%;
	-webkit-mask-repeat: repeat;
	        mask-repeat: repeat;
}
@keyframes egm-venetian {
	from { --egm-slat: 0%; transform: perspective(900px) rotateX(12deg) scale(1.03); filter: brightness(1.4); }
	to   { --egm-slat: 100%; transform: none; filter: none; }
}

/* ★ 3. Vórtice */
.egm-run[data-egm-anim="vortex"] { animation-name: egm-vortex; }
@keyframes egm-vortex {
	0%   { opacity: 0; transform: rotate(-540deg) scale(0); filter: blur(22px) hue-rotate(200deg) saturate(3); }
	55%  { opacity: 1; transform: rotate(18deg) scale(1.1); filter: blur(3px) hue-rotate(50deg) saturate(1.6); }
	75%  { transform: rotate(-5deg) scale(.97); filter: blur(0) hue-rotate(0) saturate(1); }
	100% { opacity: 1; transform: none; filter: none; }
}

/* ★ 4. Decodificador (JS): el contenedor aparece rápido y el texto se descifra. */
.egm-run[data-egm-anim="decoder"] { animation-name: egm-fade; animation-duration: 180ms; }
.egm-decoding { text-shadow: 0 0 10px currentColor; }

/* ★ 5. Lluvia de letras 3D (JS): las letras se animan una a una. */
.egm-run[data-egm-anim="letter-rain"] { animation-name: none; opacity: 1; }
.egm-split-word { display: inline-block; white-space: nowrap; }
.egm-split-char { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; }