/* ========================================
   Bee Repair — Motion Enhancements
   全局动效层：入场动画 / 微交互 / 滚动渐显 / 加载反馈
   设计原则：微妙、专业、不打扰业务操作；
   尊重 prefers-reduced-motion；无 JS 时页面保持完全可用。
   ======================================== */

/* ===== 1. 页面内容入场 =====
   仅 .bee-soft-enter 驱动入场（见 §22），避免与 soft-enter 双重 opacity/transform */

/* ===== 2. 卡片阶梯入场（JS 渐进增强：无 JS 时不可见性从不生效） ===== */
.bee-stagger > * {
    opacity: 1;
}
.bee-stagger.will-animate > * {
    opacity: 0;
    animation: bee-fade-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.bee-stagger.will-animate > *:nth-child(1) { animation-delay: 0.03s; }
.bee-stagger.will-animate > *:nth-child(2) { animation-delay: 0.07s; }
.bee-stagger.will-animate > *:nth-child(3) { animation-delay: 0.11s; }
.bee-stagger.will-animate > *:nth-child(4) { animation-delay: 0.15s; }
.bee-stagger.will-animate > *:nth-child(5) { animation-delay: 0.19s; }
.bee-stagger.will-animate > *:nth-child(n+6) { animation-delay: 0.23s; }

@keyframes bee-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ===== 3. 滚动渐显（IntersectionObserver 驱动，类名由 JS 添加） ===== */
.bee-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.bee-reveal.is-revealed {
    opacity: 1;
    /* none 等价 identity，可从 translateY(18px) 平滑过渡，且不创建 containing block */
    transform: none;
}

/* ===== 4. 顶部加载进度条 ===== */
#bee-top-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    z-index: 2000;
    background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 50%, #34d399 100%);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}
#bee-top-progress.is-active { opacity: 1; }

/* ===== 5. 回到顶部按钮 ===== */
#bee-back-top {
    position: fixed;
    right: 22px;
    bottom: 84px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-soft, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-size: 0.95rem;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05));
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15),
                background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 1200;
    pointer-events: none;
    text-decoration: none;
}
#bee-back-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#bee-back-top:hover {
    background: #fff;
    color: var(--primary, #2563eb);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05));
    transform: translateY(-3px) scale(1.05);
}
#bee-back-top:active {
    transform: translateY(-1px) scale(0.96);
}

/* ===== 6. 侧边栏动效 ===== */
.sidebar .nav-link {
    position: relative;
}
/* hover：图标向右滑动 + 左侧指示条滑入 */
.sidebar .nav-link:not(.bg-primary)::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #2563eb, #0ea5e9);
    opacity: 0;
    transform: scaleY(0.3);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.sidebar .nav-link:not(.bg-primary):hover::before {
    opacity: 1;
    transform: scaleY(1);
}
.sidebar .nav-link .sidebar-icon,
.sidebar .nav-link i {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.sidebar .nav-link:hover .sidebar-icon,
.sidebar .nav-link:hover i {
    transform: translateX(3px) scale(1.08);
}
.sidebar .nav-link.bg-primary .sidebar-icon,
.sidebar .nav-link.bg-primary i {
    animation: bee-icon-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15) both;
}
@keyframes bee-icon-pop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.15); }
    100% { transform: none; }
}

/* ===== 7. 按钮微交互 ===== */
.btn,
.btn-solid,
button.btn {
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.15),
                box-shadow 0.25s ease,
                background 0.25s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}
.btn:hover,
.btn-solid:hover {
    transform: translateY(-1px);
}
.btn:active:not(.btn-submit),
.btn-solid:active {
    transform: translateY(0) scale(0.97);
}

/* 主按钮 hover 微光 */
.btn-primary:hover {
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
}

/* 按钮内图标 hover 位移（仅对含文字的按钮生效，避免纯图标按钮位移怪异） */
.btn:hover > i,
.btn-solid:hover > i,
.btn-header-outline:hover > i {
    transform: translateX(2px);
}
.btn i {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    display: inline-block;
}

/* ===== 8. 表格与列表行 ===== */
.table tbody tr {
    transition: background-color 0.15s ease;
}
/* 表格行 hover：仅背景，避免每行 box-shadow 促发额外绘制 */
.table-hover tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.03);
}

/* 长列表离屏行跳过布局/绘制（支持 content-visibility 的浏览器） */
@supports (content-visibility: auto) {
    .content-container .table tbody tr {
        content-visibility: auto;
        contain-intrinsic-size: auto 52px;
    }
}

/* 列表卡片 hover 图标动效 */
.g-item .g-icon i,
.ql-card .ql-icon i,
.apt-card .apt-icon i,
.kpi-card .kpi-icon i,
.metric-card .metric-icon i {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    display: inline-block;
}
.g-item:hover .g-icon i,
.ql-card:hover .ql-icon i,
.apt-card:hover .apt-icon i,
.kpi-card:hover .kpi-icon i,
.metric-card:hover .metric-icon i {
    transform: scale(1.12) rotate(-4deg);
}

/* ===== 9. 状态徽标 pulse 提示（新数据提醒类） ===== */
@keyframes bee-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.bee-pulse {
    animation: bee-badge-pulse 2s infinite;
}

/* ===== 10. 空状态图标动效 ===== */
.empty-state .empty-icon {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    display: inline-block;
}
.empty-state:hover .empty-icon {
    transform: scale(1.1) rotate(6deg);
}

/* ===== 11. 页脚微光（site_footer 无 <a> 链接，无需额外规则） ===== */

/* ===== 12. 下拉菜单动效 ===== */
.dropdown-menu {
    transform-origin: top center;
    animation: bee-drop-in 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes bee-drop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ===== 13. Toast 增强入场 ===== */
.bee-toast {
    animation: bee-toast-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15) both;
}
@keyframes bee-toast-in {
    from { opacity: 0; transform: translateX(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* ===== 14. 尊重系统「减少动态效果」设置 ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .bee-reveal,
    .bee-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    #bee-back-top {
        transition: none;
    }
}

/* ===== 15. 移动端适配：回顶按钮位置避让 ===== */
@media (max-width: 768px) {
    #bee-back-top {
        right: 16px;
        bottom: 72px;
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
}

/* ===== 16. Premium: 顶栏进度条光扫 ===== */
#bee-top-progress.is-active::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75));
    filter: blur(2px);
    animation: bee-progress-sheen 0.9s linear infinite;
}
@keyframes bee-progress-sheen {
    from { transform: translateX(-120%); opacity: 0.2; }
    to   { transform: translateX(40%); opacity: 1; }
}

/* ===== 17. Premium: 侧栏指示条左侧竖条微光 ===== */
.sidebar-indicator::before {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.55);
}

/* ===== 18. Premium: 主按钮光扫（仅 primary） ===== */
.btn-primary:not(.no-gradient) {
    position: relative;
    overflow: hidden;
}
.btn-primary:not(.no-gradient)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.btn-primary:not(.no-gradient):hover::after {
    transform: translateX(120%);
}

/* ===== 19. Premium: 卡片边缘高光呼吸（极轻） ===== */
@keyframes bee-card-edge {
    0%, 100% { border-color: rgba(15, 23, 42, 0.06); }
    50% { border-color: rgba(37, 99, 235, 0.14); }
}
.kpi-card,
.metric-card {
    animation: none;
}
.kpi-card:hover,
.metric-card:hover {
    border-color: rgba(37, 99, 235, 0.18) !important;
}

/* ===== 20. Premium: 聚焦环统一 ===== */
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.35) !important;
}

/* ===== 21. Premium: 表格操作图标按钮 ===== */
.btn-icon,
.table .btn-sm.btn-outline-primary,
.table .btn-sm.btn-outline-secondary,
.table .btn-sm.btn-outline-danger {
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.15),
                box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-icon:hover,
.table .btn-sm:hover {
    transform: translateY(-2px);
}

/* ===== 22. Premium: 页面切换时内容轻微上移入场（配合入场） =====
   注意：不要用 filter:blur —— filter/transform 会创建 containing block，
   导致内容区内 Bootstrap modal 的 position:fixed 失效（只见遮罩）。 */
@keyframes bee-soft-focus-in {
    from { opacity: 0; transform: translateY(10px); }
    /* 结束帧用 none，避免残留 transform 困住 fixed 后代 */
    to   { opacity: 1; transform: none; }
}
.content-wrapper .content-container.bee-soft-enter {
    animation: bee-soft-focus-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 动画结束后标记：禁止回落到上面的 bee-page-in，避免二次入场 / 残留层叠上下文 */
.content-wrapper .content-container.bee-soft-enter-done {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:not(.no-gradient)::after,
    #bee-top-progress.is-active::after {
        display: none !important;
    }
    .content-wrapper .content-container.bee-soft-enter {
        animation: none !important;
    }
}