/**
 * 科技感动态背景样式
 * Tech Background Styles
 */

/* 科技感背景容器 */
.tech-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 动态网格 */
.tech-grid {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background-image: 
        linear-gradient(rgba(255, 70, 85, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 70, 85, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    transform: perspective(500px) rotateX(60deg);
}

@keyframes gridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
}

/* 扫描线效果 */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 70, 85, 0.5), transparent);
    animation: scanMove 4s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes scanMove {
    0%, 100% { top: 0; opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* 浮动的科技圆环 */
.tech-ring {
    position: absolute;
    border: 1px solid rgba(255, 70, 85, 0.1);
    border-radius: 50%;
    animation: ringPulse 4s ease-out infinite;
}

.tech-ring:nth-child(1) {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.tech-ring:nth-child(2) {
    width: 200px;
    height: 200px;
    bottom: 20%;
    left: 5%;
    animation-delay: 1.3s;
}

.tech-ring:nth-child(3) {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 20%;
    animation-delay: 2.6s;
}

@keyframes ringPulse {
    0% { transform: scale(0.8); opacity: 0; border-width: 3px; }
    50% { opacity: 0.3; }
    100% { transform: scale(1.5); opacity: 0; border-width: 1px; }
}

/* 科技粒子 */
.tech-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 70, 85, 0.4);
    border-radius: 50%;
    animation: particleFloat 15s infinite;
}

.particle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 70, 85, 0.3), transparent);
    transform-origin: left center;
    transform: translateY(-50%) rotate(var(--angle, 0deg));
}

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

/* 数字雨效果 */
.digital-rain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.03;
}

.rain-column {
    position: absolute;
    top: -100%;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #FF4655;
    writing-mode: vertical-rl;
    text-orientation: upright;
    animation: rainFall linear infinite;
}

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

/* 科技光标 */
#techCursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease-out;
}

#techCursor .cursor-dot {
    width: 6px;
    height: 6px;
    background: #FF4655;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    left: -3px;
    box-shadow: 0 0 10px #FF4655;
}

#techCursor .cursor-ring {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 70, 85, 0.5);
    border-radius: 50%;
    position: absolute;
    top: -15px;
    left: -15px;
    transition: all 0.2s ease-out;
}

@media (pointer: coarse) {
    #techCursor { display: none; }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .tech-grid {
        background-size: 30px 30px;
    }
    
    .tech-ring {
        display: none;
    }
    
    .digital-rain {
        opacity: 0.02;
    }
}