/* Hero高级背景样式 - 参考顶级科技公司网站设计 */

/* 基础背景渐变 */
.hero {
    background: linear-gradient(140deg, #001428 0%, #002952 40%, #003B73 80%, #0353A4 100%) !important;
}

/* 高科技线条效果 */
.tech-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 3;
}

.tech-lines::before, 
.tech-lines::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    animation: techlinesMove 120s linear infinite;
}

.tech-lines::after {
    background-size: 80px 80px;
    background-position: 10px 10px;
    opacity: 0.5;
    animation-duration: 180s;
}

@keyframes techlinesMove {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 多层次渐变效果 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(217deg, rgba(3, 83, 164, 0.4), rgba(0, 0, 0, 0) 70.71%),
        linear-gradient(127deg, rgba(0, 120, 212, 0.3), rgba(0, 0, 0, 0) 70.71%),
        linear-gradient(336deg, rgba(0, 45, 115, 0.5), rgba(0, 0, 0, 0) 70.71%);
    z-index: 1;
}

/* 微妙的纹理图案 */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230353a4' fill-opacity='0.09'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
    z-index: 2;
}

/* 光效背景增强 */
.hero .light-effect {
    background: radial-gradient(
        ellipse at center,
        rgba(0, 162, 255, 0.15) 0%,
        rgba(0, 102, 204, 0.08) 25%,
        rgba(0, 61, 122, 0.03) 50%,
        transparent 70%
    ) !important;
    animation: rotate 60s linear infinite !important;
}

/* 网格效果增强 */
.hero .grid-overlay {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 35px 35px !important;
}

/* 粒子效果增强 */
.particles::before,
.particles::after {
    opacity: 0.25 !important;
}

/* 波浪效果设计 */
.wave-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 80px;
    z-index: 15;
    overflow: hidden;
}

.wave {
    position: absolute;
    width: 200%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23f5f5f7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: repeat-x;
    animation: wave 25s linear infinite;
}

.wave-1 {
    animation: wave-reverse 20s linear infinite;
    opacity: 0.3;
    bottom: 0;
}

.wave-2 {
    animation-delay: -5s;
    bottom: 0;
    opacity: 0.5;
}

.wave-3 {
    animation-delay: -2s;
    bottom: 0;
    opacity: 0.7;
}

@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0);
    }
    50% {
        transform: translateX(-25%) translateZ(0);
    }
    100% {
        transform: translateX(-50%) translateZ(0);
    }
}

@keyframes wave-reverse {
    0% {
        transform: translateX(-50%) translateZ(0);
    }
    50% {
        transform: translateX(-25%) translateZ(0);
    }
    100% {
        transform: translateX(0) translateZ(0);
    }
}

/* 标题美化 */
.hero__title {
    background: linear-gradient(to right, #ffffff 0%, #e0f7ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    font-size: 4.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    animation: glowTitle 3s ease-in-out infinite alternate !important;
}

.hero__subtitle {
    background: linear-gradient(to right, #e0f7ff 0%, #b4e0fd 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
    font-size: 2.3rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
}

@keyframes glowTitle {
    0% {
        text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    }
    100% {
        text-shadow: 0 5px 25px rgba(79, 174, 255, 0.5) !important;
    }
}

/* 媒体查询优化 */
@media (max-width: 768px) {
    .hero__title {
        font-size: 3.2rem !important;
    }
    
    .hero__subtitle {
        font-size: 1.8rem !important;
        margin-bottom: 2rem !important;
        white-space: nowrap !important;
    }
    
    .wave-container {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: 2.5rem !important;
    }
    
    .hero__subtitle {
        font-size: 1.3rem !important;
        margin-bottom: 1.5rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
    }
}

@media (max-width: 360px) {
    .hero__title {
        font-size: 2.2rem !important;
    }
    
    .hero__subtitle {
        font-size: 1.1rem !important;
        letter-spacing: -0.02em !important;
    }
}

/* 按钮美化 */
.btn--primary {
    background: linear-gradient(to right, #0066cc, #0099ff) !important;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.5) !important;
}

.btn--outline {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

/* 鼠标跟随光效 */
.mouse-follow-light {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(3, 123, 252, 0.2) 0%, rgba(0, 83, 162, 0.1) 40%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
}