/* css/animations.css - 通用动效系统 */

/* ===== 入场动画 keyframes ===== */

/* 从下方淡入 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 从上方淡入 */
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 从左侧淡入 */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-20px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 从右侧淡入 */
@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(20px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 缩放淡入 */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* 弹性缩放淡入 */
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.04); }
    80%  { transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* 旋转淡入 */
@keyframes rotateIn {
    from { opacity: 0; transform: rotate(-8deg) scale(0.95); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* 模糊淡入 */
@keyframes blurIn {
    from { opacity: 0; filter: blur(8px); transform: scale(1.02); }
    to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* 搜索结果淡入 */
@keyframes searchFadeIn {
    from { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.98); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Tab 内容淡入 */
@keyframes tabFadeIn {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ===== 持续动画 keyframes ===== */

/* 扫光效果 */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 涟漪扩散 */
@keyframes ripple {
    to { transform: scale(2.5); opacity: 0; }
}

/* Logo 呼吸 */
@keyframes logoBreath {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.08); }
}

/* 搜索框光环旋转 */
@keyframes searchAura {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 加载旋转 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 星星逐颗亮起 */
@keyframes starTwinkle {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* 轻微浮动 */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* 脉冲发光 */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--el-rgb, 92 107 192), 0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--el-rgb, 92 107 192), 0); }
}

/* 骨架屏闪烁 */
@keyframes skeletonPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

/* ===== 滚动触发动画类 ===== */

/* 基础：滚动时淡入上移 */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1.2, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 滚动时从左侧滑入 */
.scroll-reveal-left {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1.2, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 滚动时从右侧滑入 */
.scroll-reveal-right {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1.2, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 滚动时缩放淡入 */
.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.93);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1.2, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ===== 交错延迟工具类 ===== */
.delay-1  { animation-delay: 40ms;  transition-delay: 40ms;  }
.delay-2  { animation-delay: 80ms;  transition-delay: 80ms;  }
.delay-3  { animation-delay: 120ms; transition-delay: 120ms; }
.delay-4  { animation-delay: 160ms; transition-delay: 160ms; }
.delay-5  { animation-delay: 200ms; transition-delay: 200ms; }
.delay-6  { animation-delay: 240ms; transition-delay: 240ms; }
.delay-7  { animation-delay: 280ms; transition-delay: 280ms; }
.delay-8  { animation-delay: 320ms; transition-delay: 320ms; }
.delay-9  { animation-delay: 360ms; transition-delay: 360ms; }
.delay-10 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-11 { animation-delay: 440ms; transition-delay: 440ms; }
.delay-12 { animation-delay: 480ms; transition-delay: 480ms; }

/* ===== Hover 微交互 ===== */

/* 上浮 + 阴影扩散 */
.hover-lift {
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
    will-change: transform;
}
.hover-lift:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.hover-lift:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: 0.1s;
}

/* 轻微放大 */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.hover-scale:hover {
    transform: scale(1.03);
}
.hover-scale:active {
    transform: scale(0.99);
    transition-duration: 0.1s;
}

/* 边框高光 */
.hover-glow {
    transition:
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}
.hover-glow:hover {
    box-shadow:
        0 0 0 1px rgba(var(--el-rgb, 92 107 192), 0.15),
        0 8px 24px rgba(var(--el-rgb, 92 107 192), 0.1);
    border-color: rgba(var(--el-rgb, 92 107 192), 0.2);
}

/* ===== 按钮动效 ===== */
.btn-press {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-press:active {
    transform: scale(0.95);
    transition-duration: 0.08s;
}

/* ===== 骨架屏 ===== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* ===== 退场动画 ===== */
.fade-out {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.97);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 1, 1),
        transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}

/* ===== Tab 按钮 active 反馈 ===== */
.tab-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}