/* =============================================
   动画样式 — 按需加载
   media="(prefers-reduced-motion: no-preference)"
   ============================================= */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}
@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95%            { transform: scaleY(0.05); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25%, 75%  { transform: scale(1.12); }
    50%       { transform: scale(1); }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(29,155,240,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(29,155,240,0); }
    100% { box-shadow: 0 0 0 0 rgba(29,155,240,0); }
}

/* ── 工具类 ── */
.animate-fadeIn  { animation: fadeIn  0.5s ease-out both; will-change: opacity, transform; }
.animate-scaleIn { animation: scaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; will-change: opacity, transform; }
.animate-float   { animation: float 3.2s ease-in-out infinite; will-change: transform; }
.animate-spin    { animation: spin 0.7s linear infinite; will-change: transform; }
.animate-blink   { animation: blink 5s infinite; will-change: transform; }
.animate-pulse   { animation: pulse-ring 2s ease-in-out infinite; }
.animate-heartbeat { animation: heartbeat 0.5s ease; will-change: transform; }
.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* 延迟 */
.delay-300ms { animation-delay: 0.3s; }
.delay-600ms { animation-delay: 0.6s; }
.delay-1s    { animation-delay: 1s; }
.delay-2s    { animation-delay: 2s; }

/* 骨架屏 shimmer */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card, #1a1d21) 25%,
        var(--border-color, #2f3336) 50%,
        var(--bg-card, #1a1d21) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

/* 怪兽眨眼 */
.monster-eye-blink { animation: blink 5s infinite; will-change: transform; }