/* ═══════════════════════════════════════════════════════════════
   FireworkFlow Base Styles
   重置 + 全局排版 + 动画关键帧
   依赖：variables.css（必须在之前加载）
   ═══════════════════════════════════════════════════════════════ */

/* ── 全局工具类 ── */
.font-mono { font-family: var(--font-mono); }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════════
   动画关键帧（全局共享）
   ═══════════════════════════════════════════════════════════════ */

/* Toast 淡入淡出 */
@keyframes fadeInOut {
    0%   { opacity: 0; transform: translateY(10px); }
    15%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fadeOutUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* 脉冲 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* 呼吸 */
@keyframes breath {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50%      { transform: scale(1.15); opacity: 0.5; }
}

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

/* 骨架屏闪动 */
@keyframes skeleton-flash {
    0%   { opacity: 0.3; background-size: 200% 100%; }
    50%  { opacity: 1; background-size: 200% 100%; }
    100% { opacity: 0.3; background-size: 200% 100%; }
}

/* 进度条闪光 */
@keyframes progress-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── 动画工具类 ── */
.fade-in-up { animation: fadeInUp 0.6s var(--ease-out) forwards; }
.fade-out   { animation: fadeOut 0.3s var(--ease-out) forwards; }
.fade-out-up { animation: fadeOutUp 0.3s var(--ease-out) forwards; }
.animate-breath { animation: breath 3s ease-in-out infinite; }
.spinning { animation: spin 1s linear infinite; }

.skeleton-flash {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: skeleton-flash 2s ease-in-out infinite;
}
.skeleton-flash:nth-child(2) { animation-delay: 0.15s; }
.skeleton-flash:nth-child(3) { animation-delay: 0.3s; }
.skeleton-flash:nth-child(4) { animation-delay: 0.45s; }
.skeleton-flash:nth-child(5) { animation-delay: 0.6s; }
.skeleton-flash:nth-child(6) { animation-delay: 0.75s; }

/* ── Copy Toast ── */
.copy-toast {
    position: fixed; background: #0f172a; color: white;
    padding: 8px 16px; border-radius: 12px; font-size: 12px;
    font-weight: bold; z-index: 1000; pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}