/* ============================================
 * 课粒工坊 · 高级质感增强系统
 * Premium Glassmorphism + Silk Animations
 *
 * 设计理念：
 * 1. 微光玻璃拟态 — 高光描边 + 光扫过 + 内阴影立体感
 * 2. 丝滑交互动效 — 按压反馈 + 依次进入 + 弹出缩放
 * 3. 骨架屏加载系统 — 减少白屏焦虑
 * 4. 弥散光晕背景层 — 科技感流动色彩（由 JS 驱动）
 *
 * v5 变更：
 *  - hover 上浮/光扫动画 仅日间模式生效
 *  - 夜间模式由 ambient-effects.js card-shine 接管（静止菲涅尔反光），此处零位移
 *
 * 使用方式：在所有页面 <link rel="stylesheet" href="/css/premium-enhance.css">
 * 依赖：theme.css（变量）、common.js（骨架屏辅助函数）
 * ============================================ */

/* ========== P0: 微光玻璃拟态卡片 ========== */
.glass-card,
.glass-premium {
    background: rgba(15, 18, 35, 0.92);
    /* [性能优化] 移除 backdrop-filter:blur(20px) — 每卡片GPU模糊合成是最大卡顿源 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg, 20px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    /* [性能优化] 移除 will-change — 全局滥用导致合成层爆炸 */
}

/* 悬停上浮效果 — 仅日间模式 */
[data-theme="day"] .glass-card:hover,
[data-theme="day"] .glass-premium:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 110, 246, 0.20);
    box-shadow:
        0 16px 48px rgba(100, 116, 139, 0.12),
        0 4px 16px rgba(100, 116, 139, 0.06),
        0 0 40px rgba(79, 110, 246, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(148, 163, 184, 0.10);
}

/* 悬停状态 — 夜间模式：仅边框微亮 + 阴影加深，零位移 */
body:not([data-theme="day"]) .glass-card:hover,
body:not([data-theme="day"]) .glass-premium:hover {
    transform: none !important;
    border-color: rgba(167, 139, 250, 0.18);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.28),
        0 2px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

/* ========== P0: 夜间模式玻璃侧面打光激活 ========== */
/* 已由 theme.css 接管，此处不再重复定义 */

/* ========== P0: 全局按钮按压反馈 ========== */
button:not(:disabled),
.btn,
.btn-primary,
.action-btn,
.toolbar-btn,
.tab-btn,
.card-btn,
.mini-btn,
.page-btn,
.logout-btn,
.dropdown-item,
.theme-toggle-btn,
.add-annotation-btn {
    transition:
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.15s ease,
        background 0.2s ease;
    /* [性能优化] 移除 will-change — 数百个按钮各自创建合成层 = GPU内存爆炸 */
}

button:active:not(:disabled),
.btn:active,
.btn-primary:active:not(:disabled),
.action-btn:active,
.toolbar-btn:active,
.tab-btn:active,
.card-btn:active,
.page-btn:active:not(:disabled),
.logout-btn:active,
.dropdown-item:active,
.theme-toggle-btn:active,
.add-annotation-btn:active {
    transform: scale(0.96) !important;
    transition-duration: 0.08s;
}

.nav-links a:active {
    transform: scale(0.95) translateY(0) !important;
}

/* ========== P1: 列表依次进入动画 ========== */
.stagger-children > *,
[data-stagger] > * {
    opacity: 0;
    animation: premiumFadeInUp 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* [性能优化] 移除 will-change — 子元素过多时合成层爆炸 */
}

.stagger-children > *:nth-child(1), [data-stagger] > *:nth-child(1) { animation-delay: 0.03s; }
.stagger-children > *:nth-child(2), [data-stagger] > *:nth-child(2) { animation-delay: 0.06s; }
.stagger-children > *:nth-child(3), [data-stagger] > *:nth-child(3) { animation-delay: 0.09s; }
.stagger-children > *:nth-child(4), [data-stagger] > *:nth-child(4) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(5), [data-stagger] > *:nth-child(5) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(6), [data-stagger] > *:nth-child(6) { animation-delay: 0.18s; }
.stagger-children > *:nth-child(7), [data-stagger] > *:nth-child(7) { animation-delay: 0.21s; }
.stagger-children > *:nth-child(8), [data-stagger] > *:nth-child(8) { animation-delay: 0.24s; }
.stagger-children > *:nth-child(9), [data-stagger] > *:nth-child(9) { animation-delay: 0.27s; }
.stagger-children > *:nth-child(10), [data-stagger] > *:nth-child(10) { animation-delay: 0.30s; }
.stagger-children > *:nth-child(n+11), [data-stagger] > *:nth-child(n+11) { animation-delay: 0.33s; }
.stagger-children > *:nth-child(n+16), [data-stagger] > *:nth-child(n+16) { animation-delay: 0.48s; }

@keyframes premiumFadeInUp {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

body { animation: pageEnter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== P1: 增强模态框弹出动效 ========== */
.modal.show, .modal-overlay.show { animation: modalBackdropIn 0.25s ease both; }
.modal-content, .modal-box { animation: modalContentIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

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

@keyframes modalContentIn {
    from { opacity: 0; transform: translateY(-24px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-dropdown.show { animation: dropdownPremium 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes dropdownPremium {
    from { opacity: 0; transform: translateY(-12px) scale(0.94); transform-origin: top right; }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== P2: 骨架屏系统 ========== */
.skeleton, .skeleton-text, .skeleton-avatar, .skeleton-card {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 40%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s infinite ease-in-out;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton::after, .skeleton-text::after, .skeleton-avatar::after, .skeleton-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: skeletonSweep 2s infinite ease-in-out;
}
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes skeletonSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-text { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.skeleton-text.short { width: 50%; } .skeleton-text.medium { width: 72%; } .skeleton-text.long { width: 90%; }
.skeleton-title { height: 20px; width: 55%; margin-bottom: 14px; border-radius: 8px; }
.skeleton-card { padding: 16px; min-height: 90px; border-radius: 14px; }

/* ========== P2: 弥散光晕背景层容器 ========== */
#diffuseGlowCanvas {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: 0.65; mix-blend-mode: screen;
}

/* ========== 聚焦光环 ========== */
input:focus, select:focus, textarea:focus, .input-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15), 0 0 20px rgba(124, 58, 237, 0.08);
}
[data-theme="day"] input:focus,
[data-theme="day"] select:focus,
[data-theme="day"] textarea:focus,
[data-theme="day"] .input-field:focus {
    box-shadow: 0 0 0 2px rgba(79, 110, 246, 0.15), 0 0 20px rgba(79, 110, 246, 0.06);
}
tbody tr { transition: background 0.2s ease; }
img { transition: opacity 0.3s ease; }
img[data-loading="true"] { opacity: 0; }

/* 数字跳动 */
.stat-value { animation: countUp 0.5s both; }
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 白天模式适配 — 干净冷色调 ========== */
[data-theme="day"] .glass-card,
[data-theme="day"] .glass-premium {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: var(--day-border-light) !important;
    border-top-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow:
        0 4px 16px rgba(100, 116, 139, 0.06),
        0 1px 4px rgba(100, 116, 139, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(148, 163, 184, 0.08) !important;
}

[data-theme="day"] .glass-card:hover,
[data-theme="day"] .glass-premium:hover {
    /* 日间上浮已在上方统一定义，此处仅覆盖 !important 的全局规则 */
}

/* 日间模式光扫过减弱 */
[data-theme="day"] .glass-card::before,
[data-theme="day"] .glass-premium::before {
    background: linear-gradient(115deg, transparent 25%, rgba(0,0,0,0.02) 48%, transparent 75%);
}

/* 日间模式骨架屏 — 冷灰蓝 */
[data-theme="day"] .skeleton, [data-theme="day"] .skeleton-text,
[data-theme="day"] .skeleton-avatar, [data-theme="day"] .skeleton-card {
    background: linear-gradient(
        90deg, rgba(148,163,184,0.10) 0%, rgba(148,163,184,0.18) 40%,
        rgba(148,163,184,0.12) 60%, rgba(148,163,184,0.10) 100%
    );
    background-size: 200% 100%;
}