/* =========================================
   关键词混合器 - Keyword Mixer
   背景效果样式
   ========================================= */

/* 整体背景渐变 */
.bg-gradient {
    background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
}

body.dark-mode .bg-gradient {
    background: linear-gradient(135deg, #131313 0%, #1a1a1a 100%);
}

/* 网格背景 */
.bg-grid {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

body.dark-mode .bg-grid {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* 点状背景 */
.bg-dots {
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

body.dark-mode .bg-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

/* 波浪背景 */
.bg-wave {
    position: relative;
    overflow: hidden;
}

.bg-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230071e3' fill-opacity='0.05' d='M0,192L48,181.3C96,171,192,149,288,149.3C384,149,480,171,576,181.3C672,192,768,192,864,181.3C960,171,1056,149,1152,160C1248,171,1344,213,1392,234.7L1440,256L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
    z-index: -1;
}

/* 粒子背景 */
.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

.particle-1 {
    top: 10%;
    left: 15%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.2) 0%, rgba(0, 113, 227, 0) 70%);
    animation: float 15s ease-in-out infinite;
}

.particle-2 {
    top: 25%;
    right: 10%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(94, 92, 230, 0.15) 0%, rgba(94, 92, 230, 0) 70%);
    animation: float 18s ease-in-out 2s infinite;
}

.particle-3 {
    bottom: 15%;
    left: 20%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(90, 200, 250, 0.1) 0%, rgba(90, 200, 250, 0) 70%);
    animation: float 20s ease-in-out 1s infinite;
}

.particle-4 {
    bottom: 25%;
    right: 25%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(158, 41, 255, 0.1) 0%, rgba(158, 41, 255, 0) 70%);
    animation: float 13s ease-in-out 3s infinite;
}

/* 玻璃球效果 */
.glass-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
                rgba(255, 255, 255, 0.4) 0%, 
                rgba(255, 255, 255, 0.1) 30%, 
                rgba(0, 0, 0, 0.05) 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
}

.orb-1 {
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    opacity: 0.7;
    animation: float 25s ease-in-out infinite;
}

.orb-2 {
    bottom: -100px;
    right: -50px;
    width: 400px;
    height: 400px;
    opacity: 0.5;
    animation: float 30s ease-in-out 2s infinite;
}

/* 毛玻璃分隔线 */
.glass-divider {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, 
                transparent 0%, 
                var(--glass-highlight) 50%,
                transparent 100%);
    margin: 40px 0;
    opacity: 0.5;
}

/* 背景颜色主题 */
.theme-blue {
    --bg-accent: rgba(0, 113, 227, 0.03);
}

.theme-purple {
    --bg-accent: rgba(94, 92, 230, 0.03);
}

.theme-gradient {
    --bg-accent: linear-gradient(135deg, 
                rgba(0, 113, 227, 0.03) 0%, 
                rgba(158, 41, 255, 0.03) 100%);
}

/* 应用背景主题 */
.bg-themed {
    background: var(--bg-accent);
}

/* 交互式背景 - 鼠标跟随效果 */
.mouse-follower {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, 
                rgba(0, 113, 227, 0.1) 0%, 
                rgba(0, 113, 227, 0) 70%);
    pointer-events: none;
    transition: transform 0.3s ease-out;
    z-index: -1;
    opacity: 0;
}

/* 背景叠加效果 */
.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230071e3' fill-opacity='0.2'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: -1;
}

body.dark-mode .bg-overlay {
    opacity: 0.03;
}

/* 液态玻璃卡片背景 */
.glass-card-bg {
    position: relative;
    overflow: hidden;
}

.glass-card-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
                rgba(255, 255, 255, 0.15) 0%, 
                rgba(255, 255, 255, 0.05) 30%, 
                transparent 70%);
    opacity: 0.8;
    transform: rotate(-5deg);
    z-index: -1;
    pointer-events: none;
}

/* 视差滚动效果 */
.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    transform: translateY(0);
    transition: transform 0.1s ease-out;
    z-index: -1;
}