/**
 * 宇宙奇点悬浮按钮 - 完全重构版
 * Cosmic Singularity Floating Button
 * 基于液态金属球和银河粒子系统设计
 */

/* ========================================================================
   主题变量定义
   ======================================================================== */
:root {
    /* 深色主题（默认） - 蓝-粉-紫 极光配色 */
    --orb-bg: #0F101A;
    --orb-panel-bg: #161824;
    --orb-gradient: linear-gradient(135deg, #1e133e, #6a1a8a, #a24ed0);
    --orb-reflection: #f0c5ff;
    --orb-glow: rgba(220, 50, 220, 0.5);
    --orb-border: rgba(255, 255, 255, 0.1);
    --orb-text-primary: #E2E8F0;
    --orb-text-secondary: #A0AEC0;
    --orb-shadow: rgba(0, 0, 0, 0.5);
    
    /* Aurora UI 色彩 */
    --aurora-blue: #818CF8;
    --aurora-pink: #F472B6;
    --aurora-purple: #E086F0;
}

/* 浅色主题 */
body[data-theme="light"] {
    --orb-bg: #F0F2F5;
    --orb-panel-bg: #FFFFFF;
    --orb-gradient: linear-gradient(135deg, #e0c3fc, #f5d1f8, #c5c8ff);
    --orb-reflection: #ffffff;
    --orb-glow: rgba(200, 150, 255, 0.4);
    --orb-border: #E2E8F0;
    --orb-text-primary: #1A202C;
    --orb-text-secondary: #4A5568;
    --orb-shadow: rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   悬浮按钮容器
   ======================================================================== */
.floating-orb {
    position: fixed;
    width: 70px;
    height: 70px;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    user-select: none;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================================================
   液态金属球核心
   ======================================================================== */
.orb-core {
    width: 85%;
    height: 85%;
    position: relative;
    border-radius: 50%;
    background: var(--orb-gradient);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* 液态变形动画 */
    animation: liquid-morph 10s ease-in-out infinite;
    
    /* 3D阴影效果 */
    box-shadow: 
        0 15px 35px var(--orb-shadow),
        0 5px 15px var(--orb-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* 金属光泽层 */
.orb-core::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, var(--orb-reflection), transparent 50%);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: light-sweep 12s ease-in-out infinite;
}

/* ========================================================================
   银河粒子系统
   ======================================================================== */
.particle-container {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    animation: rotate 40s linear infinite;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px var(--orb-reflection),
        0 0 20px var(--orb-glow);
    animation: twinkle 5s ease-in-out infinite;
}

/* 12颗粒子配置 */
.p1 { width: 2px; height: 2px; top: 20%; left: 15%; animation-duration: 3s; }
.p2 { width: 4px; height: 4px; top: 30%; left: 30%; animation-duration: 5s; animation-delay: -2s; }
.p3 { width: 2px; height: 2px; top: 15%; left: 45%; animation-duration: 4s; animation-delay: -3s; }
.p4 { width: 1px; height: 1px; top: 25%; left: 55%; animation-duration: 6s; animation-delay: -1s; }
.p5 { width: 3px; height: 3px; top: 45%; left: 40%; animation-duration: 3.5s; animation-delay: -2.5s; }
.p6 { width: 2px; height: 2px; top: 60%; left: 20%; animation-duration: 5.5s; }
.p7 { width: 1px; height: 1px; top: 75%; left: 35%; animation-duration: 4.5s; animation-delay: -4s; }
.p8 { width: 4px; height: 4px; top: 85%; left: 50%; animation-duration: 6.5s; animation-delay: -1.5s; }
.p9 { width: 2px; height: 2px; top: 65%; left: 60%; animation-duration: 3s; }
.p10 { width: 3px; height: 3px; top: 80%; left: 75%; animation-duration: 5s; animation-delay: -3s; }
.p11 { width: 1px; height: 1px; top: 50%; left: 85%; animation-duration: 7s; }
.p12 { width: 2px; height: 2px; top: 35%; left: 95%; animation-duration: 4s; animation-delay: -2s; }

/* ========================================================================
   宇宙奇点图标
   ======================================================================== */
.icon-wrapper {
    width: 28px;
    height: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-galaxy {
    width: 100%;
    height: 100%;
}

.icon-galaxy .orbit,
.icon-galaxy .galaxy-core {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform-origin: center;
}

/* ========================================================================
   交互状态
   ======================================================================== */

/* 悬停状态 */
.floating-orb:hover .orb-core {
    animation-play-state: paused;
    transform: scale(1.1);
    border-radius: 50% !important;
}

.floating-orb:hover .particle {
    transform: scale(1.5) translate(calc(var(--x, 0) * -10px), calc(var(--y, 0) * -10px));
    opacity: 0.8;
    box-shadow: 0 0 15px var(--orb-reflection);
}

/* 粒子扩散方向定义 */
.particle:nth-child(1) { --x: 1; --y: 1; }
.particle:nth-child(2) { --x: -1; --y: 1; }
.particle:nth-child(3) { --x: 1; --y: -1; }
.particle:nth-child(4) { --x: -1; --y: -1; }
.particle:nth-child(5) { --x: -1; --y: -1; }
.particle:nth-child(6) { --x: 0; --y: -1; }
.particle:nth-child(7) { --x: 1; --y: 0; }
.particle:nth-child(8) { --x: -1; --y: 1; }
.particle:nth-child(9) { --x: 1; --y: -1; }
.particle:nth-child(10) { --x: -1; --y: -1; }
.particle:nth-child(11) { --x: 1; --y: 0; }
.particle:nth-child(12) { --x: -1; --y: 1; }

/* 拖拽状态 */
.floating-orb.dragging {
    cursor: grabbing;
}

.floating-orb.dragging .orb-core {
    transform: scale(1.15);
    box-shadow: 
        0 30px 70px var(--orb-shadow),
        0 15px 35px var(--orb-glow),
        inset 0 2px 0 rgba(255, 255, 255, 0.8),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

/* 点击效果 */
.floating-orb:active:not(.dragging) .orb-core {
    transform: scale(0.9);
    transition-duration: 0.1s;
}

/* 激活状态（面板打开） */
.floating-orb.active .icon-galaxy .galaxy-core {
    transform: scale(0);
    opacity: 0;
}

.floating-orb.active .icon-galaxy .orbit-1 {
    transform: rotate(45deg) scaleY(0.05);
}

.floating-orb.active .icon-galaxy .orbit-2 {
    transform: rotate(135deg) scaleY(0.05);
}

/* ========================================================================
   动画关键帧
   ======================================================================== */

/* 液态变形动画 */
@keyframes liquid-morph {
    0% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
    25% { border-radius: 40% 60% 70% 30% / 30% 70% 30% 70%; }
    50% { border-radius: 60% 40% 30% 70% / 70% 30% 70% 30%; }
    75% { border-radius: 30% 70% 40% 60% / 60% 40% 60% 40%; }
    100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

/* 光泽扫动 */
@keyframes light-sweep {
    0% { transform: translate(-10%, -10%); }
    50% { transform: translate(10%, 10%); }
    100% { transform: translate(-10%, -10%); }
}

/* 粒子闪烁 */
@keyframes twinkle {
    0%, 100% { 
        transform: scale(0.8); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 1; 
    }
}

/* 粒子容器旋转 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 脉冲效果 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 15px 35px var(--orb-shadow),
            0 5px 15px var(--orb-glow);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 20px 45px var(--orb-shadow),
            0 8px 25px var(--orb-glow);
    }
}

/* ========================================================================
   响应式设计
   ======================================================================== */
@media (max-width: 768px) {
    .floating-orb {
        width: 60px;
        height: 60px;
    }
    
    .icon-wrapper {
        width: 24px;
        height: 24px;
    }
}

/* ========================================================================
   性能优化
   ======================================================================== */
.floating-orb,
.orb-core,
.particle-container {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* 减少动画对低端设备的影响 */
@media (prefers-reduced-motion: reduce) {
    .orb-core,
    .particle-container,
    .particle {
        animation: none !important;
    }
    
    .orb-core::before {
        animation: none !important;
    }
}