/* ========= 仅隐藏默认光标（不影响其他全局样式） ========= */
* {
    cursor: none !important;
}

/* 动态全息视差背景层 - 蓝色系 */
.bg-parallax {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.10) 0%, rgba(96, 165, 250, 0.07) 30%, rgba(29, 78, 216, 0.05) 55%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
    z-index: 0;
    transition: background-position 0.08s linear;
}

/* ========= 全息量子光标核心样式 - 蓝色系玻璃拟态 ========= */
.quantum-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    will-change: transform;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.6))
            drop-shadow(0 0 12px rgba(96, 165, 250, 0.4))
            drop-shadow(0 0 16px rgba(29, 78, 216, 0.3));
}

/* ---- 外轨道环 - 蓝色渐变边框 + 玻璃模糊 ---- */
.orbit-ring-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbitRotateCCW 8s linear infinite;
    background: conic-gradient(
        from 0deg,
        rgba(37, 99, 235, 0.9),
        rgba(59, 89, 152, 0.9),
        rgba(96, 165, 250, 0.9),
        rgba(147, 197, 253, 0.9),
        rgba(191, 219, 254, 0.9),
        rgba(96, 165, 250, 0.9),
        rgba(29, 78, 216, 0.9),
        rgba(37, 99, 235, 0.9)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.5px;
    border-radius: 50%;
    backdrop-filter: blur(3px) saturate(1.8);
    -webkit-backdrop-filter: blur(3px) saturate(1.8);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.7), 0 0 25px rgba(96, 165, 250, 0.5), 0 0 35px rgba(29, 78, 216, 0.3);
}
.orbit-ring-outer::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(191, 219, 254, 0.8), transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.9), 0 0 20px rgba(37, 99, 235, 0.4);
    transform: translateX(-50%);
}
.orbit-ring-outer::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(147, 197, 253, 0.7));
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(59, 89, 152, 0.7);
    transform: translateX(-50%);
}

/* ---- 内轨道环 ---- */
.orbit-ring-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbitRotateCW 3s linear infinite;
    background: conic-gradient(
        from 90deg,
        rgba(96, 165, 250, 0.95),
        rgba(59, 89, 152, 0.95),
        rgba(29, 78, 216, 0.95),
        rgba(37, 99, 235, 0.95),
        rgba(147, 197, 253, 0.95),
        rgba(191, 219, 254, 0.95),
        rgba(96, 165, 250, 0.95),
        rgba(96, 165, 250, 0.95)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    border-radius: 50%;
    backdrop-filter: blur(4px) saturate(1.6);
    -webkit-backdrop-filter: blur(4px) saturate(1.6);
    border: 1.2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.8), 0 0 28px rgba(37, 99, 235, 0.6), 0 0 38px rgba(29, 78, 216, 0.4);
}

/* ---- 核心圆点 ---- */
.quantum-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #2563eb, #3b82f6, #60a5fa, #93c5fd,
        #bfdbfe, #60a5fa, #1d4ed8, #2563eb
    );
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.9), 0 0 35px rgba(96, 165, 250, 0.7),
                0 0 50px rgba(29, 78, 216, 0.5), 0 0 65px rgba(147, 197, 253, 0.3),
                inset 0 0 8px rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(1px) saturate(1.3);
    -webkit-backdrop-filter: blur(1px) saturate(1.3);
    transition: all 0.12s ease-out;
    animation: corePulse 1.8s infinite alternate, coreHueShift 6s linear infinite;
}
.quantum-core::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2) 60%, transparent 70%);
    border-radius: 50%;
    filter: blur(0.5px);
}
@keyframes coreHueShift {
    0% { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(360deg) brightness(1); }
}

.core-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
}
.core-crosshair::before, .core-crosshair::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}
.core-crosshair::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.core-crosshair::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }

/* 自旋量子光环 - 蓝色系 */
.quantum-spin-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    animation: auraSpin 3s linear infinite;
    background: conic-gradient(
        from 0deg,
        rgba(37, 99, 235, 0.7),
        rgba(59, 89, 152, 0.65),
        rgba(96, 165, 250, 0.6),
        rgba(147, 197, 253, 0.65),
        rgba(191, 219, 254, 0.7),
        rgba(96, 165, 250, 0.7),
        rgba(29, 78, 216, 0.7),
        rgba(37, 99, 235, 0.7)
    );
    backdrop-filter: blur(4px) saturate(1.6) brightness(1.2);
    -webkit-backdrop-filter: blur(4px) saturate(1.6) brightness(1.2);
    mask: radial-gradient(circle, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.15) 60%, transparent 75%);
    -webkit-mask: radial-gradient(circle, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.15) 60%, transparent 75%);
    filter: blur(3px) drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
    animation: auraSpin 3s linear infinite, auraRotate 6s linear infinite;
}
.quantum-spin-aura::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(191, 219, 254, 0.8), transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.9), 0 0 24px rgba(29, 78, 216, 0.5);
    transform: translateX(-50%);
}

/* 悬停扩展效果 - 蓝色系 */
.quantum-cursor.hovering .orbit-ring-outer {
    width: 70px; height: 70px;
    animation-duration: 5s;
    background: conic-gradient(
        from 0deg,
        rgba(37, 99, 235, 1),
        rgba(59, 89, 152, 1),
        rgba(96, 165, 250, 1),
        rgba(147, 197, 253, 1),
        rgba(191, 219, 254, 1),
        rgba(96, 165, 250, 1),
        rgba(29, 78, 216, 1),
        rgba(37, 99, 235, 1)
    );
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.9), 0 0 40px rgba(96, 165, 250, 0.7), 0 0 55px rgba(29, 78, 216, 0.5);
}
.quantum-cursor.hovering .orbit-ring-inner {
    width: 46px; height: 46px;
    animation-duration: 1.8s;
}
.quantum-cursor.hovering .quantum-core {
    width: 24px; height: 24px;
    box-shadow: 0 0 35px rgba(37, 99, 235, 1), 0 0 55px rgba(96, 165, 250, 0.8), 0 0 75px rgba(29, 78, 216, 0.6), inset 0 0 12px rgba(255, 255, 255, 1);
}
.quantum-cursor.clicking .quantum-core {
    width: 8px; height: 8px;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.95), 0 0 38px rgba(37, 99, 235, 0.8);
    animation: none;
}
.quantum-cursor.clicking .orbit-ring-outer,
.quantum-cursor.clicking .orbit-ring-inner { opacity: 0.3; }

/* 拖尾粒子、冲击波环样式 - 蓝色系 */
.energy-trail, .shockwave-ring {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 99998;
}
.energy-trail {
    border-radius: 50%;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 15px currentColor, 0 0 25px rgba(37, 99, 235, 0.6);
}
.shockwave-ring {
    border-radius: 50%;
    backdrop-filter: blur(3px);
    border: 2px solid rgba(37, 99, 235, 0.9);
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.8), 0 0 40px rgba(96, 165, 250, 0.6), 0 0 55px rgba(29, 78, 216, 0.4);
}

/* 卫星粒子容器 */
.satellite-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
}
.satellite-dot {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* 动画 */
@keyframes orbitRotateCW {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbitRotateCCW {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes corePulse {
    0% { box-shadow: 0 0 8px rgba(37, 99, 235, 0.65), 0 0 18px rgba(29, 78, 216, 0.45), inset 0 0 4px rgba(255, 255, 255, 0.85); }
    100% { box-shadow: 0 0 14px rgba(37, 99, 235, 0.85), 0 0 26px rgba(29, 78, 216, 0.6), inset 0 0 6px rgba(255, 255, 255, 1); }
}
@keyframes auraSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes auraRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 演示区域样式（非光标核心，仅用于触发交互） */
.demo-area {
    position: relative;
    z-index: 10;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    border-radius: 40px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 700px;
    margin: 20px;
    color: white;
}
.demo-area h2 { margin-bottom: 1rem; background: linear-gradient(135deg, #2563eb, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.button-group { display: flex; gap: 1rem; justify-content: center; margin: 1.5rem 0; }
.interactive-btn, .interactive-link {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.6rem 1.5rem;
    border-radius: 40px;
    color: white;
    text-decoration: none;
    transition: 0.2s;
    cursor: pointer;
}
.interactive-btn:hover, .interactive-link:hover {
    background: rgba(37, 99, 235, 0.3);
    transform: scale(1.05);
}
.info { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; font-size: 0.8rem; }
.info span { background: rgba(255,255,255,0.1); padding: 0.2rem 0.8rem; border-radius: 30px; }
#quantumCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99990; }