/* 增强发光流动粒子效果样式 */

/* =================================
   粒子Canvas容器基础样式
   ================================= */

/* 粒子Canvas容器 */
.particles-container,
.particles-canvas-container {
    /* 使用固定定位作为全屏背景效果 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;

    /* 层级设置：在背景层之上，但在轮播内容之下 */
    z-index: 6; /* 调整到6，在背景渐变层(3)之上，但在轮播内容(10)之下 */

    /* 确保容器可见和不影响交互 */
    display: block;
    visibility: visible;
    overflow: hidden;
    pointer-events: none; /* 确保不影响页面交互 */

    /* 初始状态和过渡效果 */
    opacity: 0.8; /* 直接设置为合适的透明度，避免淡入问题 */
    transition: opacity 0.5s ease-in-out;

    /* 性能优化 */
    will-change: opacity;
    backface-visibility: hidden;
}

/* 简化版Canvas样式 */
.particles-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 容器加载状态 */
.particles-canvas-container.loading {
    opacity: 0;
}

.particles-canvas-container.loaded {
    opacity: 1;
}

/* 容器错误状态 */
.particles-canvas-container.error {
    display: none;
}

/* =================================
   各层Canvas基础样式
   ================================= */

/* 各层Canvas通用样式 */
.particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* 性能优化属性 */
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform, opacity; /* 提示浏览器优化 */
    backface-visibility: hidden; /* 避免闪烁 */
    perspective: 1000; /* 启用3D加速 */
}

/* 环境粒子层 - 背景层 */
.layer-environment {
    z-index: 1;
    opacity: 0.5; /* 降低不透明度，减少视觉干扰 */
    mix-blend-mode: screen; /* 混合模式，使粒子与背景融合 */
}

/* 流动粒子层 - 流动轨迹层 */
.layer-flow {
    z-index: 2;
    opacity: 0.6; /* 降低不透明度，优化视觉层次 */
    mix-blend-mode: screen;
}

/* 核心粒子层 - 主要发光粒子层 */
.layer-core {
    z-index: 3;
    opacity: 0.8; /* 微调不透明度，增强发光效果 */
    mix-blend-mode: screen;
}

/* 连接粒子层 - 粒子间连接线层 */
.layer-connection {
    z-index: 4;
    opacity: 0.4; /* 降低不透明度，减少视觉干扰 */
    mix-blend-mode: screen;
}

/* 电流效果层 - 电流和光效层 */
.layer-electric {
    z-index: 5;
    opacity: 0.5; /* 降低不透明度，优化性能 */
    mix-blend-mode: screen;
}

/* =================================
   性能模式样式
   ================================= */

/* 自适应性能模式 */
.particles-canvas-container[data-performance-mode="adaptive"] {
    /* 自适应性能模式下的基础设置 */
    transform: translateZ(0);
    will-change: transform;
}

/* 高性能模式 */
.particles-canvas-container[data-performance-mode="high-performance"] {
    /* 高性能模式设置 */
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* 省电模式 */
.particles-canvas-container[data-performance-mode="battery-saver"] {
    /* 省电模式设置 */
    will-change: auto; /* 减少不必要的重绘 */
    transform: none;
}

/* 省电模式下降低各层透明度 */
.particles-canvas-container[data-performance-mode="battery-saver"] .layer-environment {
    opacity: 0.3;
}

.particles-canvas-container[data-performance-mode="battery-saver"] .layer-flow {
    opacity: 0.4;
}

.particles-canvas-container[data-performance-mode="battery-saver"] .layer-core {
    opacity: 0.6;
}

.particles-canvas-container[data-performance-mode="battery-saver"] .layer-connection {
    opacity: 0.2;
}

.particles-canvas-container[data-performance-mode="battery-saver"] .layer-electric {
    opacity: 0.3;
}

/* =================================
   响应式设计
   ================================= */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .particles-canvas-container {
        transform: translateZ(0); /* 启用硬件加速 */
        will-change: transform;
    }
    
    /* 平板设备上适当降低粒子层透明度 */
    .layer-environment {
        opacity: 0.7;
    }
    
    .layer-flow {
        opacity: 0.8;
    }
    
    .layer-core {
        opacity: 0.9;
    }
    
    .layer-connection {
        opacity: 0.6;
    }
    
    .layer-electric {
        opacity: 0.7;
    }
}

/* 移动设备 (最大768px) */
@media (max-width: 768px) {
    .particles-canvas-container {
        /* 移动端优化 */
        transform: translateZ(0); /* 启用硬件加速 */
        will-change: transform; /* 提示浏览器优化 */
    }
    
    /* 移动端降低某些层的透明度以提高性能 */
    .layer-environment {
        opacity: 0.6;
    }
    
    .layer-flow {
        opacity: 0.7;
    }
    
    .layer-core {
        opacity: 0.8;
    }
    
    .layer-connection {
        opacity: 0.5;
    }
    
    .layer-electric {
        opacity: 0.6;
    }
}

/* 小屏移动设备 (最大480px) */
@media (max-width: 480px) {
    /* 小屏幕设备进一步优化 */
    .layer-environment {
        opacity: 0.4;
    }
    
    .layer-flow {
        opacity: 0.5;
    }
    
    .layer-core {
        opacity: 0.7;
    }
    
    .layer-connection {
        opacity: 0.3;
    }
    
    .layer-electric {
        opacity: 0.4;
    }
}

/* =================================
   高DPI屏幕优化
   ================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .particles-canvas {
        /* 在高DPI屏幕上提供更清晰的渲染 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        /* 防止高DPI屏幕上的模糊 */
        transform: translateZ(0);
    }
}

/* =================================
   用户偏好支持
   ================================= */

/* 减少动画效果的用户偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .particles-canvas-container {
        /* 为选择减少动画的用户提供简化版本 */
        opacity: 0.5 !important;
    }
    
    .particles-canvas {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* 在减少动画模式下禁用某些效果层 */
    .layer-flow,
    .layer-electric {
        display: none;
    }
}

/* 深色/浅色主题支持 */
@media (prefers-color-scheme: dark) {
    .particles-canvas-container {
        /* 深色主题下的调整 */
        filter: brightness(1.1) contrast(1.1);
    }
}

@media (prefers-color-scheme: light) {
    .particles-canvas-container {
        /* 浅色主题下的调整 */
        filter: brightness(0.9) contrast(0.9);
    }
}

/* 省电模式支持 */
@media (prefers-reduced-data: reduce) {
    .particles-canvas-container {
        /* 为节省数据的用户提供简化版本 */
        opacity: 0.5;
    }
    
    /* 只保留核心粒子层 */
    .layer-environment,
    .layer-flow,
    .layer-connection,
    .layer-electric {
        display: none;
    }
}

/* =================================
   粒子效果基础样式
   ================================= */

/* 粒子发光效果 - 优化后的发光 */
.particle-glow {
    filter: drop-shadow(0 0 2px rgba(77, 255, 234, 0.9))  /* 减小发光半径，提高性能 */
            drop-shadow(0 0 4px rgba(77, 255, 234, 0.7))
            drop-shadow(0 0 8px rgba(77, 255, 234, 0.3));
    /* 优化性能 */
    will-change: transform;
    transform: translateZ(0);
}

/* 粒子流动效果 - 优化后的流动 */
.particle-flow {
    filter: blur(0.3px); /* 减小模糊，提高清晰度 */
    opacity: 0.85;
    /* 优化性能 */
    will-change: transform;
    transform: translateZ(0);
}

/* 粒子连接线效果 - 优化后的连接 */
.particle-connection {
    filter: blur(0.2px); /* 减小模糊，提高清晰度 */
    opacity: 0.65;
    /* 优化性能 */
    will-change: transform;
    transform: translateZ(0);
}

/* 粒子电流效果 - 优化后的电流 */
.particle-electric {
    filter: blur(0.8px) brightness(1.3); /* 减小模糊，调整亮度 */
    opacity: 0.75;
    /* 优化性能 */
    will-change: transform;
    transform: translateZ(0);
}

/* =================================
   过渡和动画效果
   ================================= */

/* 粒子容器加载动画 - 优化后的动画 */
@keyframes particlesFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.98); /* 减小初始缩放，提高性能 */
    }
    50% {
        opacity: 0.6;
        transform: scale(0.99);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.particles-canvas-container.loaded {
    animation: particlesFadeIn 1.2s ease-out forwards; /* 缩短动画时间，提高响应性 */
}

/* 粒子层淡入效果 - 优化后的分层动画 */
@keyframes layerFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.layer-environment {
    animation: layerFadeIn 1.5s ease-out 0.1s forwards; /* 缩短动画时间，优化性能 */
}

.layer-flow {
    animation: layerFadeIn 1.5s ease-out 0.3s forwards;
}

.layer-core {
    animation: layerFadeIn 1.5s ease-out 0.5s forwards;
}

.layer-connection {
    animation: layerFadeIn 1.5s ease-out 0.7s forwards;
}

.layer-electric {
    animation: layerFadeIn 1.5s ease-out 0.9s forwards; /* 最后加载，避免干扰 */
}

/* =================================
   降级方案 - Canvas不支持时的替代效果
   ================================= */

/* Canvas不支持时的提示 */
.no-canvas .particles-canvas-container {
    display: none;
}

/* 降级DOM粒子效果 */
.no-canvas .particles-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

/* 降级粒子 */
.no-canvas .fallback-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(77, 255, 234, 0.6);
    box-shadow: 0 0 10px rgba(77, 255, 234, 0.8);
    animation: fallbackFloat 15s infinite linear;
}

@keyframes fallbackFloat {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

/* =================================
   打印样式
   ================================= */

@media print {
    .particles-canvas-container,
    .particles-fallback {
        display: none !important;
    }
}

/* =================================
   可访问性考虑
   ================================= */

/* 屏幕阅读器专用样式 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .particles-canvas-container {
        filter: contrast(1.5);
    }
    
    .layer-environment,
    .layer-flow,
    .layer-core,
    .layer-connection,
    .layer-electric {
        opacity: 1 !important;
    }
}

/* =================================
   性能优化和兼容性
   ================================= */

/* 硬件加速优化 */
.particles-canvas {
    /* 启用硬件加速 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    /* 减少重绘 */
    will-change: transform, opacity;
}

/* 低性能设备优化 */
.low-performance .particles-canvas-container {
    transform: none;
    will-change: auto;
}

.low-performance .particles-canvas {
    transform: none;
    will-change: auto;
}

/* 浏览器兼容性 */
/* IE11不支持某些CSS属性，提供降级方案 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .particles-canvas-container {
        /* IE11降级样式 */
        opacity: 0.7;
        filter: alpha(opacity=70);
    }
    
    .particles-canvas {
        /* IE11不支持的属性降级 */
        transform: none;
        will-change: auto;
        backface-visibility: visible;
        perspective: none;
    }
}

/* 旧版Safari兼容性 */
@supports not (mix-blend-mode: screen) {
    .layer-environment,
    .layer-flow,
    .layer-core,
    .layer-connection,
    .layer-electric {
        /* 不支持混合模式时的降级 */
        opacity: 0.6;
        mix-blend-mode: normal;
    }
}

/* =================================
   交互状态样式
   ================================= */

/* 鼠标悬停时的增强效果 */
.particles-canvas-container:hover {
    /* 鼠标悬停时轻微增强效果 */
    filter: brightness(1.1);
}

/* 焦点状态 */
.particles-canvas-container:focus {
    outline: none;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .particles-canvas-container {
        /* 触摸设备上减少交互效果 */
        filter: none;
    }
}

/* =================================
   特殊效果
   ================================= */

/* 粒子脉冲效果 */
.particle-pulse {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 粒子闪烁效果 */
.particle-blink {
    animation: blink 3s infinite ease-in-out;
}

@keyframes blink {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.3;
    }
}

/* 粒子旋转效果 */
.particle-rotate {
    animation: rotate 20s infinite linear;
}

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

/* =================================
   调试模式样式
   ================================= */

/* 调试模式 - 仅在开发环境中使用 */
.debug-mode .particles-canvas-container {
    border: 1px dashed rgba(255, 0, 0, 0.5);
}

.debug-mode .particles-canvas {
    border: 1px dashed rgba(0, 255, 0, 0.3);
}

.debug-mode .layer-environment {
    border-color: rgba(255, 255, 0, 0.3);
}

.debug-mode .layer-flow {
    border-color: rgba(0, 255, 255, 0.3);
}

.debug-mode .layer-core {
    border-color: rgba(255, 0, 255, 0.3);
}

.debug-mode .layer-connection {
    border-color: rgba(255, 165, 0, 0.3);
}

.debug-mode .layer-electric {
    border-color: rgba(0, 128, 255, 0.3);
}

/* =================================
   主题变体
   ================================= */

/* 环保主题 - 绿色调 */
.eco-theme .particles-canvas-container {
    filter: hue-rotate(60deg) saturate(1.2);
}

/* 科技主题 - 蓝色调 */
.tech-theme .particles-canvas-container {
    filter: hue-rotate(180deg) saturate(1.3);
}

/* 能源主题 - 橙色调 */
.energy-theme .particles-canvas-container {
    filter: hue-rotate(30deg) saturate(1.4);
}

/* =================================
   科技感背景网格效果
   ================================= */

/* 科技感网格背景 */
.tech-grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
    opacity: 0.3;
    overflow: hidden;
}

/* 水平网格线 */
.grid-lines-horizontal::before,
.grid-lines-horizontal::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg, transparent 98%, rgba(77, 255, 234, 0.1) 99%, transparent 100%),
        linear-gradient(0deg, transparent 98%, rgba(77, 255, 234, 0.1) 99%, transparent 100%);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

.grid-lines-horizontal::after {
    animation-delay: -10s;
    opacity: 0.5;
}

/* 垂直网格线 */
.grid-lines-vertical::before,
.grid-lines-vertical::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg, transparent 98%, rgba(82, 239, 187, 0.1) 99%, transparent 100%),
        linear-gradient(0deg, transparent 98%, rgba(82, 239, 187, 0.1) 99%, transparent 100%);
    background-size: 80px 80px;
    animation: gridMove 30s linear infinite reverse;
}

.grid-lines-vertical::after {
    animation-delay: -15s;
    opacity: 0.3;
}

/* 网格点阵 */
.grid-dots::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(77, 255, 234, 0.2) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* =================================
   科技感几何元素
   ================================= */

.tech-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
}

/* 科技圆环 */
.tech-circle {
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    animation: circleRotate 20s linear infinite;
}

.tech-circle-1 {
    top: 10%;
    left: 15%;
    width: 120px;
    height: 120px;
    border-color: rgba(77, 255, 234, 0.3);
    animation-duration: 25s;
}

.tech-circle-2 {
    top: 70%;
    right: 20%;
    width: 80px;
    height: 80px;
    border-color: rgba(82, 239, 187, 0.4);
    animation-duration: 30s;
    animation-direction: reverse;
}

.tech-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border: 1px solid;
    border-color: inherit;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

/* 科技三角形 */
.tech-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    animation: triangleFloat 15s ease-in-out infinite;
}

.tech-triangle-1 {
    top: 60%;
    left: 10%;
    border-width: 0 30px 52px 30px;
    border-color: transparent transparent rgba(102, 217, 255, 0.3) transparent;
    animation-delay: -5s;
}

/* 科技六边形 */
.tech-hexagon {
    position: absolute;
    width: 60px;
    height: 34.64px;
    background-color: rgba(77, 255, 234, 0.2);
    margin: 17.32px 0;
    animation: hexagonPulse 8s ease-in-out infinite;
}

.tech-hexagon-1 {
    top: 20%;
    right: 15%;
    animation-delay: -3s;
}

.tech-hexagon:before,
.tech-hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

.tech-hexagon:before {
    bottom: 100%;
    border-bottom: 17.32px solid rgba(77, 255, 234, 0.2);
}

.tech-hexagon:after {
    top: 100%;
    border-top: 17.32px solid rgba(77, 255, 234, 0.2);
}

/* 科技线条 */
.tech-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(82, 239, 187, 0.6), transparent);
    animation: lineMove 8s linear infinite;
}

.tech-line-1 {
    top: 30%;
    left: 0;
    width: 200px;
    height: 1px;
    animation-delay: -2s;
}

.tech-line-2 {
    top: 50%;
    right: 0;
    width: 150px;
    height: 1px;
    animation-direction: reverse;
    animation-delay: -4s;
}

/* 科技脉冲圆 */
.tech-pulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
    animation: pulseExpand 3s ease-out infinite;
}

.tech-pulse-1 {
    top: 40%;
    left: 25%;
    width: 40px;
    height: 40px;
    border-color: rgba(77, 255, 234, 0.8);
    animation-delay: -1s;
}

.tech-pulse-2 {
    top: 15%;
    right: 35%;
    width: 30px;
    height: 30px;
    border-color: rgba(82, 239, 187, 0.8);
    animation-delay: -2s;
}

/* 科技元素动画 */
@keyframes circleRotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes triangleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes hexagonPulse {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

@keyframes lineMove {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes pulseExpand {
    0% {
        transform: scale(1);
        opacity: 1;
        border-width: 2px;
    }
    100% {
        transform: scale(3);
        opacity: 0;
        border-width: 0.5px;
    }
}

/* =================================
   响应式科技感元素
   ================================= */

/* 移动端优化 */
@media (max-width: 768px) {
    .tech-grid-background {
        opacity: 0.2;
    }

    .tech-circle-1 {
        width: 80px;
        height: 80px;
    }

    .tech-circle-2 {
        width: 60px;
        height: 60px;
    }

    .tech-hexagon-1 {
        width: 40px;
        height: 23px;
        margin: 11.5px 0;
    }

    .tech-hexagon:before,
    .tech-hexagon:after {
        border-left-width: 20px;
        border-right-width: 20px;
    }

    .tech-hexagon:before {
        border-bottom-width: 11.5px;
    }

    .tech-hexagon:after {
        border-top-width: 11.5px;
    }
}