/* IMX Elementos Animados v1.1.0 */
.imx-ae{display:flex;width:100%;justify-content:center;line-height:0}
.imx-ae--passthrough,.imx-ae--passthrough *{pointer-events:none}
.imx-ae__stage{position:relative;width:100%;display:flex;justify-content:inherit}
.imx-ae__item{position:relative;display:flex;flex-direction:column;align-items:center;flex:none;width:var(--imx-size,200px);max-width:100%}
.imx-ae__thread{flex:none;width:2px;height:80px;background:#b9b9b9}
.imx-ae__body{position:relative;width:100%}
.imx-ae__motion{width:100%}
.imx-ae .imx-ae__img{display:block;width:100%;height:auto;max-width:none;border:0;box-shadow:none;-webkit-user-select:none;user-select:none}

/* Girar sobre su eje (bola disco) */
@keyframes imx-rotate{to{transform:rotate(360deg)}}
.imx-ae--rotate .imx-ae__motion{animation:imx-rotate var(--imx-speed) linear var(--imx-delay) infinite var(--imx-dir);will-change:transform}

/* Girar 3D vertical */
@keyframes imx-rotate3d{from{transform:perspective(900px) rotateY(0)}to{transform:perspective(900px) rotateY(360deg)}}
.imx-ae--rotate3d .imx-ae__motion{animation:imx-rotate3d var(--imx-speed) linear var(--imx-delay) infinite var(--imx-dir);will-change:transform}

/* Flotar */
@keyframes imx-float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--imx-amp) * -1))}}
@keyframes imx-float-x{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--imx-amp))}}
.imx-ae--float .imx-ae__body{animation:imx-float-y var(--imx-speed) ease-in-out var(--imx-delay) infinite;will-change:transform}
.imx-ae--float-x .imx-ae__body{animation-name:imx-float-x}

/* Columpio */
@keyframes imx-swing{0%,100%{transform:rotate(var(--imx-swing))}50%{transform:rotate(calc(var(--imx-swing) * -1))}}
.imx-ae--swing .imx-ae__item{transform-origin:50% 0;animation:imx-swing var(--imx-speed) ease-in-out var(--imx-delay) infinite;will-change:transform}

/* Latido */
@keyframes imx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(var(--imx-scale))}}
.imx-ae--pulse .imx-ae__body{animation:imx-pulse var(--imx-speed) ease-in-out var(--imx-delay) infinite;will-change:transform}

/* Volar */
.imx-ae--fly .imx-ae__stage{display:block;height:var(--imx-fly-h,400px)}
.imx-ae--fly .imx-ae__item{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity .6s}
.imx-ae--fly .imx-ae__item.is-ready{opacity:1}
.imx-ae--fly .imx-ae__body{transition:transform .35s ease}
.imx-ae--fly .imx-ae__item.is-left .imx-ae__body{transform:scaleX(-1)}
@keyframes imx-flap{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
.imx-ae--flap .imx-ae__img{animation:imx-flap var(--imx-flap) ease-in-out infinite alternate;will-change:transform}

/* Destellos */
.imx-ae__sparkles{position:absolute;inset:0;mix-blend-mode:screen}
.imx-ae__sparkle{--imx-sparkle-color:#fff;position:absolute;transform:translate(-50%,-50%) scale(0);opacity:0;
	background:radial-gradient(circle,#fff 0 10%,var(--imx-sparkle-color) 18%,transparent 40%);
	animation:imx-twinkle var(--imx-sparkle-dur) ease-in-out infinite}
.imx-ae__sparkle::before,.imx-ae__sparkle::after{content:"";position:absolute;inset:0;
	background:radial-gradient(ellipse at center,#fff 0,var(--imx-sparkle-color) 25%,transparent 70%)}
.imx-ae__sparkle::before{transform:scaleY(.12)}
.imx-ae__sparkle::after{transform:scaleX(.12)}
@keyframes imx-twinkle{
	0%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}
	20%{transform:translate(-50%,-50%) scale(1) rotate(45deg);opacity:1}
	40%,100%{transform:translate(-50%,-50%) scale(0) rotate(90deg);opacity:0}
}

/* Brillo de espejos (bola disco) */
.imx-ae__motion{position:relative}
.imx-ae__mirror{--imx-mirror-color:#fff;position:absolute;inset:0;overflow:hidden;opacity:.9;
	-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.imx-ae__tile{position:absolute;opacity:0;border-radius:12%;
	background:radial-gradient(circle at 40% 40%,#fff 0,var(--imx-mirror-color) 45%,transparent 100%);
	mix-blend-mode:screen;animation:imx-tile 3s ease-out infinite}
@keyframes imx-tile{0%{opacity:0}6%{opacity:1}18%{opacity:.25}26%,100%{opacity:0}}
.imx-ae__band{position:absolute;inset:0;mix-blend-mode:screen}
.imx-ae__band::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;
	background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.08) 25%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.08) 75%,transparent 100%);
	animation:imx-band var(--imx-band-dur,4s) linear infinite;will-change:transform}
@keyframes imx-band{from{transform:translateX(-110%) skewX(-8deg)}to{transform:translateX(250%) skewX(-8deg)}}

/* Bola disco 3D */
.imx-ae__canvas{display:block;width:100%;height:auto;aspect-ratio:1/1}
