/* ===== 变幻球体特效样式 ===== */
/* 基于Canvas球体粒子变幻颜色特效的样式适配 */

/* 主容器样式 - 定位在CTA卡片右下角和理念对话区块2右上角之间 */
.particle-sphere-decoration-section {
    position: fixed; /* 改为fixed定位，相对于视口定位 */
    top: 0; /* 重置top值，由JavaScript动态计算 */
    right: 80px; /* 向左移动100px：-20px + 100px = 80px，与页面右侧保持距离 */
    width: 352px; /* 增加100px：252px + 100px = 352px */
    height: 370px; /* 增加80px：290px + 80px = 370px */
    transform: none; /* 移除transform，由JavaScript控制位置 */
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    pointer-events: none; /* 确保不阻挡其他元素的交互 */
    /* 变幻球体层级设置为最高 */
    z-index: 9999;
    /* 初始隐藏状态，防止刷新时在右上角一闪而过 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 特效定位完成后的显示状态 */
.particle-sphere-decoration-section.positioned {
    opacity: 1;
    visibility: visible;
}

/* 特效容器样式 */
.particle-sphere-container {
    position: relative;
    width: 352px; /* 增加100px：252px + 100px = 352px */
    height: 370px; /* 增加80px：290px + 80px = 370px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    /* 去掉边框装饰 */
    border: none;
    /* 变幻球体特效在最上层 */
    z-index: 100;
}

/* Canvas画布样式 */
.particle-sphere-container canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto; /* 允许画布接收交互事件 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 去掉阴影效果，保持纯净的画布 */
    box-shadow: none;
}

/* Canvas悬停效果 */
.particle-sphere-container canvas:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    /* 去掉悬停阴影效果 */
    box-shadow: none;
}

/* 特效加载状态 */
.particle-sphere-container.loading canvas {
    opacity: 0.5;
    filter: grayscale(0.3);
}

.particle-sphere-container.loaded canvas {
    opacity: 1;
    filter: none;
}

/* 特效错误状态 */
.particle-sphere-container.error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px; /* 缩小字体：18px ÷ 1.5 = 12px */
    text-align: center;
    padding: 20px; /* 缩小padding：30px ÷ 1.5 = 20px */
}

.particle-sphere-container.error::before {
    content: "⚠️";
    font-size: 24px; /* 缩小图标：36px ÷ 1.5 = 24px */
    margin-right: 10px; /* 缩小间距：15px ÷ 1.5 = 10px */
    opacity: 0.7;
}

/* 响应式设计 - 保持位置固定(45%, 80px)，只调整大小 */
/* 超大屏幕优化 (1920px以上) */
@media (min-width: 1920px) {
    .particle-sphere-decoration-section {
        width: 436px; /* 增加100px：336px + 100px = 436px */
        height: 440px; /* 增加80px：360px + 80px = 440px */
        /* top值由JavaScript动态控制 */
        right: 120px; /* 大屏幕保持较大距离 */
    }
    
    .particle-sphere-container {
        width: 436px; /* 增加100px：336px + 100px = 436px */
        height: 440px; /* 增加80px：360px + 80px = 440px */
    }
}

/* 大屏幕优化 (1400px-1919px) */
@media (min-width: 1400px) and (max-width: 1919px) {
    .particle-sphere-decoration-section {
        width: 394px; /* 增加100px：294px + 100px = 394px */
        height: 405px; /* 增加80px：325px + 80px = 405px */
        /* top值由JavaScript动态控制 */
        right: 100px; /* 中等大屏幕适当减少距离 */
    }
    
    .particle-sphere-container {
        width: 394px; /* 增加100px：294px + 100px = 394px */
        height: 405px; /* 增加80px：325px + 80px = 405px */
    }
}

/* 超宽屏幕优化 (21:9 比例等) */
@media (min-aspect-ratio: 21/9) {
    .particle-sphere-decoration-section {
        width: 415px; /* 增加100px：315px + 100px = 415px */
        height: 422px; /* 增加80px：342px + 80px = 422px */
        /* top值由JavaScript动态控制 */
        right: 110px; /* 超宽屏幕保持适中距离 */
    }
    
    .particle-sphere-container {
        width: 415px; /* 增加100px：315px + 100px = 415px */
        height: 422px; /* 增加80px：342px + 80px = 422px */
    }
}

/* 平板端适配 (768px-1199px) */
@media (max-width: 1199px) {
    .particle-sphere-decoration-section {
        width: 380px; /* 增加50px：331px + 50px = 380px，减少缩小程度 */
        height: 353px; /* 增加80px：273px + 80px = 353px */
        /* top值由JavaScript动态控制 */
        right: 80px; /* 平板端保持基础距离 */
    }
    
    .particle-sphere-container {
        width: 380px; /* 增加50px：331px + 50px = 380px，减少缩小程度 */
        height: 353px; /* 增加80px：273px + 80px = 353px */
    }
}

/* 平板端适配 (768px-968px) */
@media (max-width: 968px) {
    .particle-sphere-decoration-section {
        width: 350px; /* 增加48px：302px + 48px = 350px，减少缩小程度 */
        height: 328px; /* 增加80px：248px + 80px = 328px */
        /* top值由JavaScript动态控制 */
        right: 60px; /* 小平板减少距离 */
    }
    
    .particle-sphere-container {
        width: 350px; /* 增加48px：302px + 48px = 350px，减少缩小程度 */
        height: 328px; /* 增加80px：248px + 80px = 328px */
    }
    
    .particle-sphere-container canvas:hover {
        transform: scale(1.01); /* 移动端减小hover效果 */
    }
}

/* 手机横屏适配 (481px-768px) */
@media (max-width: 768px) {
    .particle-sphere-decoration-section {
        width: 320px; /* 增加44px：276px + 44px = 320px，减少缩小程度 */
        height: 307px; /* 增加80px：227px + 80px = 307px */
        /* top值由JavaScript动态控制 */
        right: 40px; /* 手机横屏进一步减少距离 */
    }
    
    .particle-sphere-container {
        width: 320px; /* 增加44px：276px + 44px = 320px，减少缩小程度 */
        height: 307px; /* 增加80px：227px + 80px = 307px */
    }
    
    .particle-sphere-container canvas:hover {
        transform: scale(1.01); /* 移动端减小hover效果 */
    }
}

/* 手机竖屏适配 (320px-480px) */
@media (max-width: 480px) {
    .particle-sphere-decoration-section {
        width: 380px; /* 增加28px：352px + 28px = 380px，减少缩小程度 */
        height: 370px; /* 增加80px：290px + 80px = 370px */
        /* top值由JavaScript动态控制 */
        right: 20px; /* 手机竖屏最小距离 */
    }
    
    .particle-sphere-container {
        width: 380px; /* 增加28px：352px + 28px = 380px，减少缩小程度 */
        height: 370px; /* 增加80px：290px + 80px = 370px */
    }
    
    .particle-sphere-container canvas:hover {
        transform: none; /* 小屏幕禁用hover效果 */
        filter: none;
        /* 去掉小屏幕的阴影效果 */
        box-shadow: none;
    }
}

/* 超小屏幕适配 (320px以下) */
@media (max-width: 360px) {
    .particle-sphere-decoration-section {
        width: 300px; /* 增加74px：226px + 74px = 300px，减少缩小程度 */
        height: 265px; /* 增加80px：185px + 80px = 265px */
        /* top值由JavaScript动态控制 */
        right: 15px; /* 超小屏幕最小距离 */
    }
    
    .particle-sphere-container {
        width: 300px; /* 增加74px：226px + 74px = 300px，减少缩小程度 */
        height: 265px; /* 增加80px：185px + 80px = 265px */
    }
}

/* 极小屏幕适配 (280px以下) */
@media (max-width: 320px) {
    .particle-sphere-decoration-section {
        width: 280px; /* 增加79px：201px + 79px = 280px，减少缩小程度 */
        height: 244px; /* 增加80px：164px + 80px = 244px */
        /* top值由JavaScript动态控制 */
        right: 10px; /* 极小屏幕最小距离 */
    }
    
    .particle-sphere-container {
        width: 280px; /* 增加79px：201px + 79px = 280px，减少缩小程度 */
        height: 244px; /* 增加80px：164px + 80px = 244px */
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .particle-sphere-container canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .particle-sphere-container {
        /* 去掉深色模式的边框 */
        border: none;
    }
    
    .particle-sphere-container canvas {
        /* 去掉深色模式的阴影 */
        box-shadow: none;
    }
    
    .particle-sphere-container canvas:hover {
        /* 去掉深色模式悬停阴影 */
        box-shadow: none;
    }
}

/* 浅色模式适配 */
@media (prefers-color-scheme: light) {
    .particle-sphere-container {
        /* 去掉浅色模式的边框 */
        border: none;
    }
    
    .particle-sphere-container canvas {
        /* 去掉浅色模式的阴影 */
        box-shadow: none;
    }
    
    .particle-sphere-container canvas:hover {
        /* 去掉浅色模式悬停阴影 */
        box-shadow: none;
    }
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
    .particle-sphere-container canvas {
        transition: none;
    }
    
    .particle-sphere-container canvas:hover {
        transform: none;
        filter: none;
    }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
    .particle-sphere-container {
        /* 去掉高对比度模式的边框 */
        border: none;
    }
    
    .particle-sphere-container canvas {
        /* 去掉高对比度模式的阴影 */
        box-shadow: none;
    }
}

/* 打印样式 */
@media print {
    .particle-sphere-decoration-section {
        display: none; /* 打印时隐藏特效 */
    }
}

/* 无障碍支持 */
.particle-sphere-container canvas[aria-label] {
    /* 为屏幕阅读器提供更好的支持 */
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.particle-sphere-container canvas[aria-label]:focus-visible {
    outline-color: rgba(59, 90, 244, 0.8);
}

/* 竖屏设备优化 */
@media (orientation: portrait) and (max-width: 768px) {
    .particle-sphere-decoration-section {
        width: 200px !important; /* 增加66px：134px + 66px = 200px，减少缩小程度 */
        height: 192px !important; /* 增加80px：112px + 80px = 192px */
        /* top值由JavaScript动态控制 */
        right: 80px; /* 向左移动100px，与页面右侧保持距离 */
    }
    
    .particle-sphere-container {
        width: 200px !important;
        height: 192px !important;
    }
}

/* 横屏设备优化 */
@media (orientation: landscape) and (max-height: 600px) {
    .particle-sphere-decoration-section {
        width: 220px !important; /* 增加52px：168px + 52px = 220px，减少缩小程度 */
        height: 220px !important; /* 增加80px：140px + 80px = 220px */
        /* top值由JavaScript动态控制 */
        right: 80px; /* 向左移动100px，与页面右侧保持距离 */
    }
    
    .particle-sphere-container {
        width: 220px !important;
        height: 220px !important;
    }
}

/* 特效性能优化 */
.particle-sphere-container canvas {
    /* 启用硬件加速 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* 低性能设备优化 */
@media (max-width: 480px), (max-height: 600px) {
    .particle-sphere-container canvas {
        /* 降低性能消耗 */
        will-change: auto;
        transform: none;
    }
    
    .particle-sphere-container canvas:hover {
        transform: none !important;
        filter: none !important;
        /* 确保低性能设备无阴影 */
        box-shadow: none !important;
    }
}

/* 特效容器动画 */
@keyframes particleSphereFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.particle-sphere-container {
    animation: particleSphereFadeIn 0.6s ease-out;
}

/* 特效加载指示器 */
.particle-sphere-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px; /* 增大加载指示器：原始20px × 1.5 = 30px */
    height: 30px; /* 增大加载指示器：原始20px × 1.5 = 30px */
    margin: -15px 0 0 -15px; /* 调整margin以适应更大的尺寸 */
    border: 3px solid rgba(59, 90, 244, 0.3); /* 增大边框：原始2px × 1.5 = 3px */
    border-top: 3px solid rgba(59, 90, 244, 0.8); /* 增大边框：原始2px × 1.5 = 3px */
    border-radius: 50%;
    animation: particleSphereSpin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.particle-sphere-container.loading::after {
    opacity: 1;
}

.particle-sphere-container.loaded::after {
    opacity: 0;
}

@keyframes particleSphereSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 特效状态指示器 */
.particle-sphere-status {
    position: absolute;
    bottom: 20px; /* 缩小位置：30px ÷ 1.5 = 20px */
    right: 20px; /* 缩小位置：30px ÷ 1.5 = 20px */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 11px; /* 缩小padding：8px ÷ 1.5 = 5px, 16px ÷ 1.5 = 11px */
    border-radius: 11px; /* 缩小圆角：16px ÷ 1.5 = 11px */
    font-size: 9px; /* 缩小字体：14px ÷ 1.5 = 9px */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.particle-sphere-container:hover .particle-sphere-status {
    opacity: 1;
}

/* 特效控制按钮 */
.particle-sphere-controls {
    position: absolute;
    top: 20px; /* 缩小位置：30px ÷ 1.5 = 20px */
    right: 20px; /* 缩小位置：30px ÷ 1.5 = 20px */
    display: flex;
    gap: 5px; /* 缩小按钮间距：8px ÷ 1.5 = 5px */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.particle-sphere-container:hover .particle-sphere-controls {
    opacity: 1;
}

.particle-sphere-control-btn {
    width: 24px; /* 缩小按钮尺寸：36px ÷ 1.5 = 24px */
    height: 24px; /* 缩小按钮尺寸：36px ÷ 1.5 = 24px */
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* 缩小字体：16px ÷ 1.5 = 11px */
    transition: all 0.2s ease;
}

.particle-sphere-control-btn:hover {
    background: rgba(59, 90, 244, 0.8);
    transform: scale(1.1);
}

/* 特效信息提示 */
.particle-sphere-tooltip {
    position: absolute;
    bottom: -30px; /* 缩小位置：-45px ÷ 1.5 = -30px */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 11px; /* 缩小padding：8px ÷ 1.5 = 5px, 16px ÷ 1.5 = 11px */
    border-radius: 5px; /* 缩小圆角：8px ÷ 1.5 = 5px */
    font-size: 9px; /* 缩小字体：14px ÷ 1.5 = 9px */
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.particle-sphere-container:hover .particle-sphere-tooltip {
    opacity: 1;
}

.particle-sphere-tooltip::before {
    content: '';
    position: absolute;
    top: -4px; /* 缩小位置：-6px ÷ 1.5 = -4px */
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent; /* 缩小箭头：6px ÷ 1.5 = 4px */
    border-bottom-color: rgba(0, 0, 0, 0.8);
}