/* ========================================
   云靖网络 - 高级视觉效果样式
   包含粒子背景、流动渐变、光效等
   ======================================== */

/* ========================================
   1. 粒子网络背景
   ======================================== */
#particleNetwork {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ========================================
   2. 流动渐变背景
   ======================================== */
.flowing-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.gradient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.gradient-blob.blob-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(249, 115, 22, 0.2) 100%);
    top: -10%;
    left: -10%;
    animation: blob-float-1 15s ease-in-out infinite;
}

.gradient-blob.blob-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%);
    bottom: -5%;
    right: -5%;
    animation: blob-float-2 20s ease-in-out infinite;
}

.gradient-blob.blob-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: blob-float-3 25s ease-in-out infinite;
}

@keyframes blob-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, 30px) scale(1.1); }
    50% { transform: translate(20px, 60px) scale(0.95); }
    75% { transform: translate(-30px, 30px) scale(1.05); }
}

@keyframes blob-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, -50px) scale(1.15); }
    66% { transform: translate(-60px, -20px) scale(0.9); }
}

@keyframes blob-float-3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-40%, -60%) scale(1.2); }
}

/* ========================================
   3. 鼠标跟随光效
   ======================================== */
#mouseGlow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, rgba(249, 115, 22, 0.08) 30%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    filter: blur(40px);
}

/* ========================================
   4. 浮动装饰元素
   ======================================== */
.floating-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

@keyframes float-shape {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-30px) rotate(180deg); 
        opacity: 0.3;
    }
}

/* ========================================
   5. 文字 scramble 效果
   ======================================== */
.scramble-char {
    color: var(--primary-color);
    font-weight: bold;
    animation: scramble-blink 0.1s ease;
}

@keyframes scramble-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   6. 霓虹灯边框效果
   ======================================== */
.neon-border {
    position: relative;
}

.neon-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #dc2626, #f97316, #dc2626, #f97316);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: neon-glow 3s ease infinite;
    filter: blur(8px);
    opacity: 0.7;
}

@keyframes neon-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================
   7. 3D卡片效果增强
   ======================================== */
.service-card,
.pricing-card,
.case-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.service-card:hover,
.pricing-card:hover,
.case-card:hover {
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(220, 38, 38, 0.1);
}

/* ========================================
   8. 磁吸按钮效果
   ======================================== */
.btn-primary,
.btn-outline {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

/* ========================================
   9. 高级光晕效果
   ======================================== */
.glow-effect {
    position: relative;
}

.glow-effect::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.glow-effect:hover::after {
    opacity: 1;
}

/* ========================================
   10. 扫描线效果
   ======================================== */
.scanline-effect {
    position: relative;
    overflow: hidden;
}

.scanline-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(220, 38, 38, 0.02) 50%
    );
    background-size: 100% 4px;
    animation: scanline 8s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* ========================================
   11. 脉冲光环效果
   ======================================== */
.pulse-ring {
    position: relative;
}

.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-radius: inherit;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

/* ========================================
   12. 渐变文字动画
   ======================================== */
.gradient-text-animate {
    background: linear-gradient(
        -45deg,
        #dc2626,
        #f97316,
        #dc2626,
        #f97316
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================
   13. 浮动动画增强
   ======================================== */
.float-enhanced {
    animation: float-enhanced 4s ease-in-out infinite;
}

@keyframes float-enhanced {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-10px) rotate(2deg); 
    }
    50% { 
        transform: translateY(-20px) rotate(0deg); 
    }
    75% { 
        transform: translateY(-10px) rotate(-2deg); 
    }
}

/* ========================================
   14. 闪烁星星效果
   ======================================== */
.star-twinkle {
    position: relative;
}

.star-twinkle::before,
.star-twinkle::after {
    content: '✦';
    position: absolute;
    color: rgba(220, 38, 38, 0.4);
    font-size: 12px;
    animation: twinkle 2s ease-in-out infinite;
}

.star-twinkle::before {
    top: -10px;
    right: -10px;
    animation-delay: 0s;
}

.star-twinkle::after {
    bottom: -10px;
    left: -10px;
    animation-delay: 1s;
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
}

/* ========================================
   15. 边框流动效果
   ======================================== */
.border-flow {
    position: relative;
    overflow: hidden;
}

.border-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--primary-color),
        var(--secondary-color),
        transparent
    );
    animation: border-flow 3s linear infinite;
}

@keyframes border-flow {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ========================================
   16. 玻璃态效果增强
   ======================================== */
.glass-enhanced {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.37),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* ========================================
   17. 能量波效果
   ======================================== */
.energy-wave {
    position: relative;
    overflow: hidden;
}

.energy-wave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: energy-wave 3s ease-out infinite;
}

@keyframes energy-wave {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* ========================================
   18. 全息效果
   ======================================== */
.holographic {
    position: relative;
    overflow: hidden;
}

.holographic::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    animation: holographic-shine 3s ease-in-out infinite;
}

@keyframes holographic-shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* ========================================
   19. 响应式调整
   ======================================== */
@media (max-width: 768px) {
    #mouseGlow {
        display: none;
    }
    
    .gradient-blob {
        opacity: 0.2;
    }
    
    .floating-decorations {
        display: none;
    }
}

/* ========================================
   20. 性能优化
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .gradient-blob,
    .floating-decorations,
    #mouseGlow,
    .neon-border::before,
    .pulse-ring::before,
    .scanline-effect::before {
        animation: none;
    }
}