/**
 * Elementor Image Animator — Widget Styles
 *
 * 纯 CSS 驱动动画，通过 CSS 自定义属性（变量）控制动画参数。
 * Elementor 在渲染时通过内联 style 注入变量值，无需 JS。
 *
 * 支持的动画：
 *   float-up-down   — 上下浮动
 *   float-left-right — 左右浮动
 *   rotate          — 旋转
 *   flip-x          — X 轴翻转 (rotateY)
 *   flip-y          — Y 轴翻转 (rotateX)
 *   scale-pulse     — 缩放脉冲
 *   shake           — 摇晃
 *
 * CSS 变量（由 Elementor selectors 注入）：
 *   --eia-duration   — 动画时长，如 3s
 *   --eia-delay      — 延迟时间，如 0s
 *   --eia-amplitude  — 浮动幅度，如 30px
 *   --eia-easing     — 缓动函数，如 ease-in-out
 */

/* ==========================================================
   1. 基础布局
   ========================================================== */

.eia-image-wrapper {
    line-height: 0;
}

.eia-image-inner {
    display: inline-block;
    vertical-align: middle;
}

.eia-image-inner img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   2. 动画核心（CSS 变量驱动）
   ========================================================== */

.eia-image-inner {

    /* ---- 默认值（会被 Elementor selectors 覆盖） ---- */
    --eia-duration: 3s;
    --eia-delay: 0s;
    --eia-amplitude: 30px;
    --eia-easing: ease-in-out;

    /* ---- 应用变量 ---- */
    animation-duration: var(--eia-duration);
    animation-delay: var(--eia-delay);
    animation-timing-function: var(--eia-easing);
    animation-fill-mode: both;
}

/* ==========================================================
   3. 循环模式
   ========================================================== */

/* 永久循环 */
.eia-loop-infinite {
    animation-iteration-count: infinite;
}

/* 播放一次后停止 */
.eia-loop-once {
    animation-iteration-count: 1;
}

/* ==========================================================
   4. 触发模式
   ========================================================== */

/*
 * Hover 触发：默认暂停，鼠标悬停时播放。
 * 用 animation-play-state 控制，不重置动画 — 每次 hover
 * 都从暂停位置继续，体验流畅。
 */
.eia-trigger-hover .eia-image-inner {
    animation-play-state: paused;
}

.eia-trigger-hover:hover .eia-image-inner {
    animation-play-state: running;
}

/* ==========================================================
   5. 动画 ① — 上下浮动
   图片沿 Y 轴上下漂移，幅度由 --eia-amplitude 控制。
   ========================================================== */

.eia-anim-float-up-down {
    animation-name: eia-float-up-down;
}

@keyframes eia-float-up-down {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(-1 * var(--eia-amplitude)));
    }
}

/* ==========================================================
   6. 动画 ② — 左右浮动
   图片沿 X 轴左右漂移。
   ========================================================== */

.eia-anim-float-left-right {
    animation-name: eia-float-left-right;
}

@keyframes eia-float-left-right {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--eia-amplitude));
    }
}

/* ==========================================================
   7. 动画 ③ — 旋转
   顺时针匀速旋转 360°。
   ========================================================== */

.eia-anim-rotate {
    animation-name: eia-rotate;
}

@keyframes eia-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   8. 动画 ④ — X 轴翻转 (rotateY)
   沿 Y 轴翻转（水平方向翻转）。
   ========================================================== */

.eia-anim-flip-x {
    animation-name: eia-flip-x;
}

@keyframes eia-flip-x {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* ==========================================================
   9. 动画 ⑤ — Y 轴翻转 (rotateX)
   沿 X 轴翻转（垂直方向翻转）。
   ========================================================== */

.eia-anim-flip-y {
    animation-name: eia-flip-y;
}

@keyframes eia-flip-y {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

/* ==========================================================
   10. 动画 ⑥ — 缩放脉冲
   图片周期性放大缩小，呼吸式效果。
   ========================================================== */

.eia-anim-scale-pulse {
    animation-name: eia-scale-pulse;
}

@keyframes eia-scale-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ==========================================================
   11. 动画 ⑦ — 摇晃
   小幅度左右平移 + 微旋转，适合提醒注意。
   ========================================================== */

.eia-anim-shake {
    animation-name: eia-shake;
}

@keyframes eia-shake {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-5px) rotate(-2deg);
    }
    75% {
        transform: translateX(5px) rotate(2deg);
    }
}

/* ==========================================================
   12. 无障碍 — 尊重用户"减少动画"偏好
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .eia-image-inner {
        animation: none !important;
    }
}