/**
 * Hero 页面围绕动画效果
 * 大圆环摆动 + 斜线动画 + 中心旋转装饰
 */

/* ==================== 大圆环摆动动画 ==================== */
.wheel-outer {
    position: absolute;
    z-index: 6; /* 圈环动画层：在粒子(5)上方 */
    top: 50%;
    left: 50%;
    margin: -500px 0 0 -500px;
    width: 1000px;
    height: 1000px;
    border-left: 1px solid rgba(255,255,255,0.7);
    border-right: 1px solid rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 100%;
    transform: rotate(90deg);
    animation: wheelRotate 8s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes wheelRotate {
    from { transform: rotate(90deg); }
    to { transform: rotate(0deg); }
}

.wheel-line-left {
    position: absolute;
    top: 50%;
    left: 0;
    background: rgba(255,255,255,0.6);
    width: 200px;
    height: 1px;
    margin-top: -0.5px;
}

.wheel-line-right {
    position: absolute;
    top: 50%;
    right: 0;
    background: rgba(255,255,255,0.6);
    width: 200px;
    height: 1px;
    margin-top: -0.5px;
}

.wheel-dot {
    position: absolute;
    background: #fff;
    width: 6px;
    height: 6px;
    border-radius: 100%;
}

.wheel-dot1 { top: 50%; left: -3px; margin-top: -3px; }
.wheel-dot2 { top: 50%; right: -3px; margin-top: -3px; }
.wheel-dot3 { top: 50%; left: 100px; margin-top: -3px; }
.wheel-dot4 { top: 50%; right: 100px; margin-top: -3px; }

.wheel-inner {
    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    border-left: 1px solid rgba(255,255,255,0.4);
    border-right: 1px solid rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-top: 1px solid rgba(255,255,255,.1);
    border-radius: 100%;
}

/* ==================== 斜线动画 ==================== */
.hero-line-container {
    position: absolute;
    z-index: 7; /* 斜线动画层：在圈环(6)上方 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-line {
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255,255,255,0.6);
    height: 1px;
}

.hero-line1 {
    margin: -220px 0 0 230px;
    width: 200px;
    transform: rotate(-45deg);
    transform-origin: 0 0;
    animation: heroLine1move 1.5s infinite alternate;
    animation-delay: 1s;
}
@keyframes heroLine1move { from { width: 200px; } to { width: 0px; } }

.hero-line2 {
    margin: -250px 0 0 190px;
    width: 80px;
    transform: rotate(-45deg);
    transform-origin: 0 0;
    animation: heroLine2move 1.2s infinite alternate;
    animation-delay: 1s;
}
@keyframes heroLine2move { from { width: 80px; } to { width: 0px; } }

.hero-line3 {
    margin: -180px 0 0 260px;
    width: 60px;
    transform: rotate(-45deg);
    transform-origin: 0 0;
    animation: heroLine3move 1s infinite alternate;
    animation-delay: 1s;
}
@keyframes heroLine3move { from { width: 60px; } to { width: 0px; } }

.hero-line4 {
    margin: 230px 0 0 -210px;
    width: 220px;
    transform: rotate(135deg);
    transform-origin: 0 0;
    animation: heroLine4move 1.5s infinite alternate;
    animation-delay: 1s;
}
@keyframes heroLine4move { from { width: 0px; } to { width: 220px; } }

.hero-line5 {
    margin: 190px 0 0 -250px;
    width: 100px;
    transform: rotate(135deg);
    transform-origin: 0 0;
    animation: heroLine5move 1.2s infinite alternate;
    animation-delay: 1s;
}
@keyframes heroLine5move { from { width: 0px; } to { width: 100px; } }

.hero-line6 {
    margin: 270px 0 0 -160px;
    width: 70px;
    transform: rotate(135deg);
    transform-origin: 0 0;
    animation: heroLine6move 1s infinite alternate;
    animation-delay: 1s;
}
@keyframes heroLine6move { from { width: 0px; } to { width: 70px; } }

/* ==================== 中心旋转装饰 ==================== */
.rotate-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 550px;
    z-index: 8; /* 旋转装饰层：在斜线(7)上方 */
    pointer-events: none;
}

.rotate-outer svg {
    width: 100%;
    height: 100%;
    animation: rotateClockwise 90s infinite linear;
}

@keyframes rotateClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 550px;
    z-index: 7; /* 内圈旋转层：在斜线(7)同层 */
    opacity: 0.4;
    pointer-events: none;
}

.rotate-inner svg {
    width: 100%;
    height: 100%;
    animation: rotateCounterClockwise 60s infinite linear;
}

@keyframes rotateCounterClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* ==================== 响应式 ==================== */
@media screen and (max-width: 1200px) {
    .wheel-outer {
        margin: -400px 0 0 -400px;
        width: 800px;
        height: 800px;
    }
    .wheel-inner {
        top: 80px;
        left: 80px;
        right: 80px;
        bottom: 80px;
    }
    .wheel-line-left,
    .wheel-line-right {
        width: 160px;
    }
    .wheel-dot3 { left: 80px; }
    .wheel-dot4 { right: 80px; }
    .rotate-outer, .rotate-inner {
        width: 450px;
        height: 450px;
    }
}

@media screen and (max-width: 768px) {
    .wheel-outer {
        margin: -300px 0 0 -300px;
        width: 600px;
        height: 600px;
    }
    .wheel-inner {
        top: 60px;
        left: 60px;
        right: 60px;
        bottom: 60px;
    }
    .wheel-line-left,
    .wheel-line-right {
        width: 120px;
    }
    .wheel-dot3 { left: 60px; }
    .wheel-dot4 { right: 60px; }
    .rotate-outer, .rotate-inner {
        width: 320px;
        height: 320px;
    }
    .hero-line-container {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .wheel-outer {
        margin: -220px 0 0 -220px;
        width: 440px;
        height: 440px;
    }
    .wheel-inner {
        top: 45px;
        left: 45px;
        right: 45px;
        bottom: 45px;
    }
    .wheel-line-left,
    .wheel-line-right {
        width: 90px;
    }
    .wheel-dot3 { left: 45px; }
    .wheel-dot4 { right: 45px; }
    .rotate-outer, .rotate-inner {
        width: 260px;
        height: 260px;
    }
}