:root {
    --spin-duration: 1s;      /* 旋转持续时间 */
    --spin-interval: 5s;      /* 旋转间隔时间 */
    --spin-delay: 3s;         /* 页面加载后延迟 */
}


@keyframes rotate3d {
    0% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1); }
    25% { transform: perspective(1000px) rotateY(5deg) rotateX(2deg) scale(1.05); }
    50% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1); }
    75% { transform: perspective(1000px) rotateY(-5deg) rotateX(-2deg) scale(1.05); }
    100% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1); }
}

@keyframes spin360 {
    0% { transform: perspective(1500px) rotateY(0deg); }
    16.67% { transform: perspective(1500px) rotateY(360deg); }
    100% { transform: perspective(1500px) rotateY(360deg); }
}

@keyframes rainbowGlow {
    0% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 0, 0, 0.8),
            0 0 30px rgba(255, 127, 0, 0.7),
            0 0 40px rgba(255, 255, 0, 0.6),
            0 0 50px rgba(0, 255, 0, 0.5),
            0 0 60px rgba(0, 0, 255, 0.4),
            0 0 70px rgba(75, 0, 130, 0.3),
            0 0 80px rgba(148, 0, 211, 0.2),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    14% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 127, 0, 1),
            0 0 45px rgba(255, 255, 0, 0.9),
            0 0 60px rgba(0, 255, 0, 0.8),
            0 0 75px rgba(0, 0, 255, 0.7),
            0 0 90px rgba(75, 0, 130, 0.6),
            0 0 105px rgba(148, 0, 211, 0.5),
            0 0 120px rgba(255, 0, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    28% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 255, 0, 1),
            0 0 45px rgba(0, 255, 0, 0.9),
            0 0 60px rgba(0, 0, 255, 0.8),
            0 0 75px rgba(75, 0, 130, 0.7),
            0 0 90px rgba(148, 0, 211, 0.6),
            0 0 105px rgba(255, 0, 0, 0.5),
            0 0 120px rgba(255, 127, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    42% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 255, 0, 1),
            0 0 45px rgba(0, 0, 255, 0.9),
            0 0 60px rgba(75, 0, 130, 0.8),
            0 0 75px rgba(148, 0, 211, 0.7),
            0 0 90px rgba(255, 0, 0, 0.6),
            0 0 105px rgba(255, 127, 0, 0.5),
            0 0 120px rgba(255, 255, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    57% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 0, 255, 1),
            0 0 45px rgba(75, 0, 130, 0.9),
            0 0 60px rgba(148, 0, 211, 0.8),
            0 0 75px rgba(255, 0, 0, 0.7),
            0 0 90px rgba(255, 127, 0, 0.6),
            0 0 105px rgba(255, 255, 0, 0.5),
            0 0 120px rgba(0, 255, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    71% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(75, 0, 130, 1),
            0 0 45px rgba(148, 0, 211, 0.9),
            0 0 60px rgba(255, 0, 0, 0.8),
            0 0 75px rgba(255, 127, 0, 0.7),
            0 0 90px rgba(255, 255, 0, 0.6),
            0 0 105px rgba(0, 255, 0, 0.5),
            0 0 120px rgba(0, 0, 255, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    85% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(148, 0, 211, 1),
            0 0 45px rgba(255, 0, 0, 0.9),
            0 0 60px rgba(255, 127, 0, 0.8),
            0 0 75px rgba(255, 255, 0, 0.7),
            0 0 90px rgba(0, 255, 0, 0.6),
            0 0 105px rgba(0, 0, 255, 0.5),
            0 0 120px rgba(75, 0, 130, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    100% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 0, 0, 0.8),
            0 0 30px rgba(255, 127, 0, 0.7),
            0 0 40px rgba(255, 255, 0, 0.6),
            0 0 50px rgba(0, 255, 0, 0.5),
            0 0 60px rgba(0, 0, 255, 0.4),
            0 0 70px rgba(75, 0, 130, 0.3),
            0 0 80px rgba(148, 0, 211, 0.2),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
}


.title-3d {
    position: relative;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Arial Black', sans-serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ffffff;
    transform-style: preserve-3d;
    animation: 
        rotate3d 6s ease-in-out infinite,
        rainbowGlow 7s linear infinite;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
}

.title-3d::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background: linear-gradient(45deg, 
        rgba(255, 0, 0, 0.6),
        rgba(255, 127, 0, 0.6),
        rgba(255, 255, 0, 0.6),
        rgba(0, 255, 0, 0.6),
        rgba(0, 0, 255, 0.6),
        rgba(75, 0, 130, 0.6),
        rgba(148, 0, 211, 0.6)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateZ(-30px);
    filter: blur(2px);
}

.title-3d::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    background: linear-gradient(135deg, 
        rgba(148, 0, 211, 0.4),
        rgba(75, 0, 130, 0.4),
        rgba(0, 0, 255, 0.4),
        rgba(0, 255, 0, 0.4),
        rgba(255, 255, 0, 0.4),
        rgba(255, 127, 0, 0.4),
        rgba(255, 0, 0, 0.4)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateZ(-60px);
    filter: blur(4px);
}

.title-container {
    animation: spin360 calc(var(--spin-duration) + var(--spin-interval)) linear infinite;
    animation-delay: var(--spin-delay);
}


@media (max-width: 768px) {
    .title-3d {
        letter-spacing: 0.1em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-3d,
    .title-container {
        animation: none;
    }
}