/* ============================================================
   贸客宝全站动态效果 CSS
   版本 1.0.0
   ============================================================ */

/* ---- 全局变量 ---- */
:root {
    --mkb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mkb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mkb-duration: 0.8s;
    --mkb-stagger: 0.1s;
    --mkb-primary: #2563eb;
    --mkb-primary-light: #3b82f6;
    --mkb-glow: rgba(37, 99, 235, 0.4);
}

/* ---- 全局平滑滚动 ---- */
html { scroll-behavior: smooth; }
html.no-smooth { scroll-behavior: auto; }

/* ============================================================
   1. 滚动触发动画 (Scroll-triggered Animations)
   ============================================================ */

/* 淡入向上 */
.mkb-animate-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease);
}
.mkb-animate-up.mkb-animated {
    opacity: 1;
    transform: translateY(0);
}

/* 淡入向下 */
.mkb-animate-down {
    opacity: 0;
    transform: translateY(-60px);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease);
}
.mkb-animate-down.mkb-animated {
    opacity: 1;
    transform: translateY(0);
}

/* 从左滑入 */
.mkb-animate-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease);
}
.mkb-animate-left.mkb-animated {
    opacity: 1;
    transform: translateX(0);
}

/* 从右滑入 */
.mkb-animate-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease);
}
.mkb-animate-right.mkb-animated {
    opacity: 1;
    transform: translateX(0);
}

/* 缩放淡入 */
.mkb-animate-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--mkb-duration) var(--mkb-ease-bounce),
                transform var(--mkb-duration) var(--mkb-ease-bounce);
}
.mkb-animate-scale.mkb-animated {
    opacity: 1;
    transform: scale(1);
}

/* 旋转淡入 */
.mkb-animate-rotate {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease-bounce);
}
.mkb-animate-rotate.mkb-animated {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* 翻转淡入 */
.mkb-animate-flip {
    opacity: 0;
    transform: perspective(800px) rotateY(90deg);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease);
}
.mkb-animate-flip.mkb-animated {
    opacity: 1;
    transform: perspective(800px) rotateY(0);
}

/* 弹性淡入 */
.mkb-animate-bounce {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease-bounce);
}
.mkb-animate-bounce.mkb-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 纯淡入 */
.mkb-animate-fade {
    opacity: 0;
    transition: opacity var(--mkb-duration) ease;
}
.mkb-animate-fade.mkb-animated {
    opacity: 1;
}

/* 宽度展开 */
.mkb-animate-width {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity var(--mkb-duration) var(--mkb-ease),
                transform var(--mkb-duration) var(--mkb-ease);
}
.mkb-animate-width.mkb-animated {
    opacity: 1;
    transform: scaleX(1);
}

/* 交错延迟 (Stagger Delays) */
.mkb-animated[data-delay="1"] { transition-delay: 0.1s; }
.mkb-animated[data-delay="2"] { transition-delay: 0.2s; }
.mkb-animated[data-delay="3"] { transition-delay: 0.3s; }
.mkb-animated[data-delay="4"] { transition-delay: 0.4s; }
.mkb-animated[data-delay="5"] { transition-delay: 0.5s; }
.mkb-animated[data-delay="6"] { transition-delay: 0.6s; }
.mkb-animated[data-delay="7"] { transition-delay: 0.7s; }
.mkb-animated[data-delay="8"] { transition-delay: 0.8s; }

/* ============================================================
   2. 文字逐字浮现 (Character-by-Character Text Reveal)
   ============================================================ */

.mkb-text-reveal {
    opacity: 1;
}
.mkb-text-reveal .mkb-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotate(10deg);
    transition: opacity 0.5s var(--mkb-ease-bounce),
                transform 0.5s var(--mkb-ease-bounce);
}
.mkb-text-reveal.mkb-animated .mkb-char {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* 标题特殊动画 - 渐变光效 */
.mkb-text-reveal.mkb-text-glow .mkb-char {
    transition: opacity 0.5s var(--mkb-ease-bounce),
                transform 0.5s var(--mkb-ease-bounce),
                text-shadow 0.3s ease,
                color 0.3s ease;
}
.mkb-text-reveal.mkb-text-glow.mkb-animated .mkb-char:hover {
    color: var(--mkb-primary-light);
    text-shadow: 0 0 20px var(--mkb-glow);
}

/* ============================================================
   3. 数字递增动画 (Counter Animation)
   ============================================================ */

.mkb-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.mkb-counter.mkb-animated {
    opacity: 1;
}
.mkb-counter-suffix {
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease 0.2s,
                transform 0.4s var(--mkb-ease-bounce) 0.2s;
}
.mkb-counter.mkb-animated + .mkb-counter-suffix,
.mkb-counter.mkb-animated .mkb-counter-suffix {
    opacity: 1;
    transform: translateX(0);
}

/* 数字变化时的脉冲效果 */
.mkb-counter.mkb-pulse {
    animation: mkb-number-pulse 0.3s ease;
}
@keyframes mkb-number-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); color: var(--mkb-primary-light); }
    100% { transform: scale(1); }
}

/* ============================================================
   4. 图片悬浮效果 (Image Hover Effects)
   ============================================================ */

/* 缩放放大 */
.mkb-hover-zoom {
    overflow: hidden;
    position: relative;
}
.mkb-hover-zoom img {
    transition: transform 0.6s var(--mkb-ease), filter 0.6s ease;
    will-change: transform;
}
.mkb-hover-zoom:hover img {
    transform: scale(1.15);
    filter: brightness(1.05);
}

/* 上浮+阴影 */
.mkb-hover-lift {
    transition: transform 0.5s var(--mkb-ease-bounce),
                box-shadow 0.5s ease;
    will-change: transform;
}
.mkb-hover-lift:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 30px var(--mkb-glow);
}

/* 遮罩层浮现 */
.mkb-hover-overlay {
    position: relative;
    overflow: hidden;
}
.mkb-hover-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.85) 0%,
        rgba(59, 130, 246, 0.7) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.mkb-hover-overlay:hover::after {
    opacity: 1;
}

/* 光泽扫过 */
.mkb-hover-shine {
    position: relative;
    overflow: hidden;
}
.mkb-hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%);
    transition: left 0.7s var(--mkb-ease);
    z-index: 2;
    pointer-events: none;
}
.mkb-hover-shine:hover::before {
    left: 130%;
}

/* 3D倾斜卡片 */
.mkb-hover-tilt {
    transform-style: preserve-3d;
    transition: transform 0.3s var(--mkb-ease);
    will-change: transform;
}
.mkb-hover-tilt .mkb-tilt-content {
    transform: translateZ(40px);
    transition: transform 0.3s var(--mkb-ease);
}

/* 边框渐变光圈 */
.mkb-hover-glow-border {
    position: relative;
    transition: box-shadow 0.4s ease;
}
.mkb-hover-glow-border:hover {
    box-shadow: 0 0 20px var(--mkb-glow),
                0 0 40px var(--mkb-glow);
}

/* ============================================================
   5. 按钮动效 (Button Animations)
   ============================================================ */

.mkb-btn-animate {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--mkb-ease-bounce),
                box-shadow 0.3s ease;
    z-index: 1;
}
.mkb-btn-animate::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--mkb-primary), var(--mkb-primary-light));
    transform: translateX(-100%);
    transition: transform 0.4s var(--mkb-ease);
    z-index: -1;
}
.mkb-btn-animate:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px var(--mkb-glow);
}
.mkb-btn-animate:hover::before {
    transform: translateX(0);
}

/* 按钮脉冲光圈 */
.mkb-btn-pulse {
    position: relative;
}
.mkb-btn-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--mkb-primary);
    opacity: 0;
    animation: mkb-btn-pulse-ring 2s infinite;
    pointer-events: none;
}
@keyframes mkb-btn-pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ============================================================
   6. 视差滚动效果 (Parallax Scroll)
   ============================================================ */

.mkb-parallax {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* 背景视差容器 */
.mkb-parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
@media (max-width: 768px) {
    .mkb-parallax-bg {
        background-attachment: scroll;
    }
}

/* ============================================================
   7. 渐变动画背景 (Animated Gradient Background)
   ============================================================ */

.mkb-gradient-anim {
    background: linear-gradient(-45deg, #2563eb, #3b82f6, #6366f1, #8b5cf6);
    background-size: 400% 400%;
    animation: mkb-gradient-shift 8s ease infinite;
}
@keyframes mkb-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 粒子背景容器 */
.mkb-particles {
    position: relative;
    overflow: hidden;
}
.mkb-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: mkb-float-particle linear infinite;
}
@keyframes mkb-float-particle {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ============================================================
   8. 进度条动画 (Progress Bar)
   ============================================================ */

.mkb-progress-bar {
    height: 6px;
    background: rgba(37, 99, 235, 0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.mkb-progress-bar .mkb-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--mkb-primary), var(--mkb-primary-light));
    border-radius: 3px;
    transition: width 1.5s var(--mkb-ease);
    position: relative;
}
.mkb-progress-bar .mkb-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent, rgba(255,255,255,0.4), transparent);
    animation: mkb-progress-shine 2s linear infinite;
}
@keyframes mkb-progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================================
   9. 加载动画 (Loading Animations)
   ============================================================ */

.mkb-page-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.mkb-page-loader.mkb-loaded {
    opacity: 0;
    visibility: hidden;
}
.mkb-page-loader .mkb-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--mkb-primary);
    border-radius: 50%;
    animation: mkb-spin 0.8s linear infinite;
}
@keyframes mkb-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   10. 导航栏动效 (Navigation Effects)
   ============================================================ */

.mkb-nav {
    transition: all 0.4s var(--mkb-ease);
}
.mkb-nav.mkb-nav-scrolled {
    /* 不改变背景色，保持导航原有样式 */
}

/* 下拉菜单平滑展开 */
.mkb-nav .sub-menu,
.mkb-nav .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--mkb-ease),
                visibility 0.3s,
                transform 0.3s var(--mkb-ease-bounce);
}
.mkb-nav li:hover > .sub-menu,
.mkb-nav .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 导航菜单选中状态 (Nav Active State) */
.mkb-dynamic-enabled nav a.mkb-nav-active,
.mkb-dynamic-enabled .menu a.mkb-nav-active,
.mkb-dynamic-enabled .main-menu a.mkb-nav-active,
.mkb-dynamic-enabled .main-navigation a.mkb-nav-active,
.mkb-dynamic-enabled .primary-menu a.mkb-nav-active {
    color: #2563eb !important;
    font-weight: 700;
    position: relative;
}
.mkb-dynamic-enabled nav a.mkb-nav-active::after,
.mkb-dynamic-enabled .menu a.mkb-nav-active::after,
.mkb-dynamic-enabled .main-menu a.mkb-nav-active::after,
.mkb-dynamic-enabled .main-navigation a.mkb-nav-active::after,
.mkb-dynamic-enabled .primary-menu a.mkb-nav-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px;
    animation: mkb-nav-underline 0.4s var(--mkb-ease-bounce);
}
@keyframes mkb-nav-underline {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 深色导航下的选中态 */
.mkb-dynamic-enabled nav.mkb-nav-scrolled a.mkb-nav-active,
.mkb-dynamic-enabled .mkb-nav.mkb-nav-scrolled a.mkb-nav-active {
    color: #2563eb !important;
}
.mkb-dynamic-enabled nav:not(.mkb-nav-scrolled) a.mkb-nav-active,
.mkb-dynamic-enabled .mkb-nav:not(.mkb-nav-scrolled) a.mkb-nav-active {
    color: #60a5fa !important;
}

/* 导航链接 hover 效果（不加透明背景，仅文字变化） */
.mkb-dynamic-enabled nav a:not(.mkb-nav-active),
.mkb-dynamic-enabled .menu a:not(.mkb-nav-active),
.mkb-dynamic-enabled .main-menu a:not(.mkb-nav-active) {
    transition: color 0.3s ease;
}

/* ============================================================
   11. 涟漪点击效果 (Ripple Click Effect)
   ============================================================ */

.mkb-ripple {
    position: relative;
    overflow: hidden;
}
.mkb-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: mkb-ripple-anim 0.6s ease-out;
    pointer-events: none;
}
@keyframes mkb-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   12. 持续浮动动画 (Continuous Floating)
   ============================================================ */

.mkb-float {
    animation: mkb-float 3s ease-in-out infinite;
}
@keyframes mkb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.mkb-float-slow {
    animation: mkb-float 5s ease-in-out infinite;
}

/* 脉动呼吸 */
.mkb-breathe {
    animation: mkb-breathe 4s ease-in-out infinite;
}
@keyframes mkb-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* 旋转 */
.mkb-spin-slow {
    animation: mkb-spin 8s linear infinite;
}

/* ============================================================
   13. 时间线/步骤动画 (Timeline/Step Animations)
   ============================================================ */

.mkb-timeline-item {
    position: relative;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s var(--mkb-ease),
                transform 0.6s var(--mkb-ease-bounce);
}
.mkb-timeline-item.mkb-animated {
    opacity: 1;
    transform: translateX(0);
}
.mkb-timeline-item::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mkb-primary);
    transform: scale(0);
    transition: transform 0.4s var(--mkb-ease-bounce) 0.3s;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}
.mkb-timeline-item.mkb-animated::before {
    transform: scale(1);
}

/* ============================================================
   14. 鼠标跟随光标 (Custom Cursor Glow)
   ============================================================ */

.mkb-cursor-glow {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, opacity 0.3s ease;
    mix-blend-mode: screen;
    opacity: 0;
}
.mkb-cursor-glow.mkb-cursor-active {
    opacity: 1;
}
@media (max-width: 768px) {
    .mkb-cursor-glow { display: none; }
}

/* ============================================================
   15. 返回顶部按钮 (Back to Top)
   ============================================================ */

.mkb-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mkb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: opacity 0.4s var(--mkb-ease),
                transform 0.4s var(--mkb-ease-bounce),
                box-shadow 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px var(--mkb-glow);
    border: none;
    font-size: 20px;
}
.mkb-back-to-top.mkb-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.mkb-back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 25px var(--mkb-glow);
}
.mkb-back-to-top svg {
    width: 22px;
    height: 22px;
}

/* ============================================================
   16. 通用辅助类 (Utility Classes)
   ============================================================ */

.mkb-transition-all {
    transition: all 0.4s var(--mkb-ease);
}

.mkb-will-change {
    will-change: transform, opacity;
}

/* 渐变文字 */
.mkb-text-gradient {
    background: linear-gradient(135deg, var(--mkb-primary), #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 玻璃拟态 */
.mkb-glass {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
    .mkb-glass {
        background: rgba(17, 24, 39, 0.7);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* ============================================================
   17. WordPress 主题适配 (WP Theme Adaptations)
   ============================================================ */

/* 给所有图片添加默认悬浮 */
.mkb-dynamic-enabled img.mkb-auto-hover {
    transition: transform 0.5s var(--mkb-ease), filter 0.5s ease;
}
.mkb-dynamic-enabled img.mkb-auto-hover:hover {
    transform: scale(1.05);
}

/* 卡片默认悬浮效果 */
.mkb-dynamic-enabled .card.mkb-auto-hover,
.mkb-dynamic-enabled .elementor-widget.mkb-auto-hover {
    transition: transform 0.4s var(--mkb-ease-bounce),
                box-shadow 0.4s ease;
}
.mkb-dynamic-enabled .card.mkb-auto-hover:hover,
.mkb-dynamic-enabled .elementor-widget.mkb-auto-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* 链接下划线动画 */
.mkb-dynamic-enabled a.mkb-link-underline {
    position: relative;
    text-decoration: none;
}
.mkb-dynamic-enabled a.mkb-link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s var(--mkb-ease);
}
.mkb-dynamic-enabled a.mkb-link-underline:hover::after {
    width: 100%;
}

/* ============================================================
   18. 尊重 reduce-motion 偏好 (Accessibility)
   ============================================================ */

@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;
    }

    [class*="mkb-animate"] {
        opacity: 1 !important;
        transform: none !important;
    }

    .mkb-counter { opacity: 1 !important; }
    .mkb-page-loader { display: none !important; }
}