/* ========== 星空背景 ========== */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
}

.stars:nth-child(1) {
    animation: animateStars 20s linear infinite;
}

.stars:nth-child(2) {
    animation: animateStars 30s linear infinite;
}

.stars:nth-child(3) {
    animation: animateStars 40s linear infinite;
}

.stars::after {
    content: "";
    position: absolute;
    top: -100vh;
    left: -100vh;
    width: 300vw;
    height: 300vh;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 40px 80px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 80px 120px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 100px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 150px 80px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 190px 160px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 230px 120px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 270px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 300px 80px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 350px 160px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 400px 120px, #ffffff, rgba(0, 0, 0, 0));
    background-repeat: repeat;
    background-size: 500px 500px;
}

.stars:nth-child(1)::after {
    opacity: 0.3;
    background-size: 400px 400px;
}

.stars:nth-child(2)::after {
    opacity: 0.4;
    background-size: 300px 300px;
}

.stars:nth-child(3)::after {
    opacity: 0.5;
    background-size: 200px 200px;
}

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

/* ========== 故障文字效果 ========== */
.glitch-text {
    position: relative;
    display: inline-block;
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(91px, 9999px, 94px, 0);
        transform: skew(0.02deg);
    }
    5% {
        clip: rect(58px, 9999px, 30px, 0);
        transform: skew(0.94deg);
    }
    10% {
        clip: rect(87px, 9999px, 71px, 0);
        transform: skew(0.98deg);
    }
    15% {
        clip: rect(48px, 9999px, 8px, 0);
        transform: skew(0.74deg);
    }
    20% {
        clip: rect(89px, 9999px, 91px, 0);
        transform: skew(0.75deg);
    }
    25% {
        clip: rect(7px, 9999px, 35px, 0);
        transform: skew(0.15deg);
    }
    30% {
        clip: rect(6px, 9999px, 92px, 0);
        transform: skew(0.72deg);
    }
    35% {
        clip: rect(11px, 9999px, 47px, 0);
        transform: skew(0.25deg);
    }
    40% {
        clip: rect(40px, 9999px, 30px, 0);
        transform: skew(0.39deg);
    }
    45% {
        clip: rect(83px, 9999px, 63px, 0);
        transform: skew(0.76deg);
    }
    50% {
        clip: rect(7px, 9999px, 51px, 0);
        transform: skew(0.07deg);
    }
    55% {
        clip: rect(1px, 9999px, 35px, 0);
        transform: skew(0.85deg);
    }
    60% {
        clip: rect(69px, 9999px, 53px, 0);
        transform: skew(0.59deg);
    }
    65% {
        clip: rect(26px, 9999px, 39px, 0);
        transform: skew(0.42deg);
    }
    70% {
        clip: rect(77px, 9999px, 100px, 0);
        transform: skew(0.08deg);
    }
    75% {
        clip: rect(75px, 9999px, 59px, 0);
        transform: skew(0.85deg);
    }
    80% {
        clip: rect(40px, 9999px, 73px, 0);
        transform: skew(0.93deg);
    }
    85% {
        clip: rect(74px, 9999px, 95px, 0);
        transform: skew(0.12deg);
    }
    90% {
        clip: rect(60px, 9999px, 8px, 0);
        transform: skew(0.44deg);
    }
    95% {
        clip: rect(8px, 9999px, 78px, 0);
        transform: skew(0.08deg);
    }
    100% {
        clip: rect(34px, 9999px, 65px, 0);
        transform: skew(0.01deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(95px, 9999px, 6px, 0);
        transform: skew(0.33deg);
    }
    5% {
        clip: rect(4px, 9999px, 10px, 0);
        transform: skew(0.09deg);
    }
    10% {
        clip: rect(38px, 9999px, 46px, 0);
        transform: skew(0.2deg);
    }
    15% {
        clip: rect(43px, 9999px, 45px, 0);
        transform: skew(0.97deg);
    }
    20% {
        clip: rect(35px, 9999px, 95px, 0);
        transform: skew(0.4deg);
    }
    25% {
        clip: rect(72px, 9999px, 88px, 0);
        transform: skew(0.34deg);
    }
    30% {
        clip: rect(51px, 9999px, 92px, 0);
        transform: skew(0.62deg);
    }
    35% {
        clip: rect(20px, 9999px, 71px, 0);
        transform: skew(0.55deg);
    }
    40% {
        clip: rect(80px, 9999px, 33px, 0);
        transform: skew(0.8deg);
    }
    45% {
        clip: rect(95px, 9999px, 72px, 0);
        transform: skew(0.77deg);
    }
    50% {
        clip: rect(69px, 9999px, 46px, 0);
        transform: skew(0.49deg);
    }
    55% {
        clip: rect(5px, 9999px, 100px, 0);
        transform: skew(0.51deg);
    }
    60% {
        clip: rect(17px, 9999px, 24px, 0);
        transform: skew(0.96deg);
    }
    65% {
        clip: rect(90px, 9999px, 98px, 0);
        transform: skew(0.27deg);
    }
    70% {
        clip: rect(70px, 9999px, 31px, 0);
        transform: skew(0.81deg);
    }
    75% {
        clip: rect(83px, 9999px, 25px, 0);
        transform: skew(0.13deg);
    }
    80% {
        clip: rect(59px, 9999px, 21px, 0);
        transform: skew(0.35deg);
    }
    85% {
        clip: rect(36px, 9999px, 54px, 0);
        transform: skew(0.56deg);
    }
    90% {
        clip: rect(26px, 9999px, 80px, 0);
        transform: skew(0.94deg);
    }
    95% {
        clip: rect(86px, 9999px, 36px, 0);
        transform: skew(0.37deg);
    }
    100% {
        clip: rect(91px, 9999px, 90px, 0);
        transform: skew(0.17deg);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(-1deg);
    }
    10% {
        transform: skew(0.5deg);
    }
    20% {
        transform: skew(0.8deg);
    }
    30% {
        transform: skew(0.3deg);
    }
    40% {
        transform: skew(-0.4deg);
    }
    50% {
        transform: skew(-0.7deg);
    }
    60% {
        transform: skew(0.6deg);
    }
    70% {
        transform: skew(0.1deg);
    }
    80% {
        transform: skew(-0.2deg);
    }
    90% {
        transform: skew(0.5deg);
    }
    100% {
        transform: skew(-0.1deg);
    }
}

/* ========== 打字机效果 ========== */
.typewriter-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid;
    width: 0;
    animation: 
        typing 3.5s steps(40, end) forwards,
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white }
}

/* ========== 渐变背景动画 ========== */
.gradient-bg-animation {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========== 悬浮效果 ========== */
.hover-float {
    transition: transform 0.3s ease;
}

.hover-float:hover {
    transform: translateY(-10px);
}

/* ========== 脉冲效果 ========== */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(108, 92, 231, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
    }
}

/* ========== 淡入动画 ========== */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos="fade-right"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos="fade-left"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos="zoom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

/* 延迟类 */
[data-aos-delay="100"] {
    transition-delay: 0.1s;
}

[data-aos-delay="200"] {
    transition-delay: 0.2s;
}

[data-aos-delay="300"] {
    transition-delay: 0.3s;
}

/* ========== 悬停图片缩放效果 ========== */
.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 0.5s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.1);
}

/* ========== 3D 卡片效果 ========== */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s;
}

.card-3d-content {
    transform: translateZ(40px);
}

/* ========== 图像悬停效果 ========== */
.image-hover-effect {
    position: relative;
    overflow: hidden;
}

.image-hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(108, 92, 231, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-hover-effect:hover::before {
    opacity: 1;
}

/* ========== 波浪动画 ========== */
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('path/to/wave.png');
    background-size: 1000px 100px;
    animation: wave 10s linear infinite;
    opacity: 0.6;
}

.wave:nth-child(2) {
    animation: wave-reverse 8s linear infinite;
    opacity: 0.3;
}

@keyframes wave {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 1000px;
    }
}

@keyframes wave-reverse {
    0% {
        background-position-x: 1000px;
    }
    100% {
        background-position-x: 0;
    }
}

/* ========== 闪光按钮效果 ========== */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.7s;
}

.btn-shine:hover::before {
    left: 100%;
}

/* ========== 文字渐变效果 ========== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ========== 分割线动画 ========== */
.animated-divider {
    position: relative;
    height: 2px;
    background-color: var(--border-color);
    margin: 30px 0;
}

.animated-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: width 0.5s ease;
}

.animated-divider:hover::before {
    width: 100%;
}

/* ========== 进度条动画 ========== */
.progress-bar {
    height: 6px;
    background-color: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin: 10px 0;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--primary-light));
    width: 0;
    transition: width 1s ease;
}

.progress-bar.animate .progress-bar-fill {
    width: var(--progress);
}

/* ========== 滚动指示器 ========== */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10000;
}