* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 视频背景容器 */
#video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 视频元素样式 */
#video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 隐藏所有播放控件 */
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    transition: opacity 0.1s ease-in-out;
    /* 优化视频渲染性能 */
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 主视频 */
#bg-video {
    z-index: -2;
}

/* 预加载视频 */
#preload-video {
    z-index: -1;
}

/* 隐藏视频控件 */
video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* 内容层 */
.content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    color: white;
    text-align: center;
    padding: 0 10%;
}

/* API文字容器 */
#api-text {
    max-width: 1200px;
    width: 100%;
    position: relative;
}

/* 加载中样式 */
.loading {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.7;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.3;
    }
}

/* 引用文字样式 */
.quote-text {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 3px;
    opacity: 0;
    font-family: 'Arial', 'Helvetica', sans-serif;
    position: relative;
    text-transform: uppercase;

    /* 霓虹渐变效果 - 多色流动 */
    background: linear-gradient(
        90deg,
        #ff0000 0%,
        #ff7300 10%,
        #fffb00 20%,
        #48ff00 30%,
        #00ffd5 40%,
        #002bff 50%,
        #7a00ff 60%,
        #ff00c8 70%,
        #ff0000 80%,
        #ff7300 90%,
        #fffb00 100%
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* 多彩发光效果 */
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8))
            drop-shadow(0 0 10px rgba(255, 115, 0, 0.6))
            drop-shadow(0 0 15px rgba(255, 251, 0, 0.6))
            drop-shadow(0 0 20px rgba(0, 255, 213, 0.6))
            drop-shadow(0 0 25px rgba(0, 43, 255, 0.6))
            drop-shadow(0 0 30px rgba(122, 0, 255, 0.6))
            drop-shadow(0 0 35px rgba(255, 0, 200, 0.6));

    /* 多重动画 */
    animation:
        textGlow 3s ease-out forwards,
        rainbowMove 3s linear infinite,
        colorShift 6s ease-in-out infinite;
}

@keyframes textGlow {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5))
                drop-shadow(0 0 10px rgba(255, 115, 0, 0.4))
                drop-shadow(0 0 15px rgba(255, 251, 0, 0.4))
                drop-shadow(0 0 20px rgba(0, 255, 213, 0.4))
                drop-shadow(0 0 25px rgba(0, 43, 255, 0.4));
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8))
                drop-shadow(0 0 10px rgba(255, 115, 0, 0.6))
                drop-shadow(0 0 15px rgba(255, 251, 0, 0.6))
                drop-shadow(0 0 20px rgba(0, 255, 213, 0.6))
                drop-shadow(0 0 25px rgba(0, 43, 255, 0.6))
                drop-shadow(0 0 30px rgba(122, 0, 255, 0.6))
                drop-shadow(0 0 35px rgba(255, 0, 200, 0.6));
    }
}

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

@keyframes colorShift {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(30deg) brightness(1.2);
    }
}

/* 移除光晕和边框背景效果 */

/* 错误信息样式 */
.error {
    font-size: 1.2rem;
    color: #ff6b6b;
    font-weight: 400;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .content {
        padding: 0 8%;
    }

    .quote-text {
        font-size: 2.3rem;
        letter-spacing: 2px;
    }
}

@media (max-width: 768px) {
    .content {
        padding: 0 6%;
    }

    .quote-text {
        font-size: 1.8rem;
        line-height: 1.8;
        letter-spacing: 1.5px;
    }

    .loading {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .content {
        padding: 0 5%;
    }

    .quote-text {
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 1px;
    }
}