/* music.css - 音乐页面特有样式 */

/* 1. 英雄区样式 */
.music-hero {
    background: linear-gradient(to bottom,
            rgba(5, 15, 30, 0) 0%,
            rgba(5, 15, 30, 0.3) 20%,
            rgba(5, 15, 30, 0.3) 100%);
}

/* 2. 视频区样式 */
.video-section .video-container {
    border-radius: 4px;
    overflow: hidden;
}

/* 3. 音频播放器样式 - 线条清晰风格 */
.audio-player {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.audio-player:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* 播放按钮样式 */
.play-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.play-btn:hover {
    border-color: #2a9fd6;
    background: rgba(42, 159, 214, 0.1);
}

.play-btn.playing {
    border-color: #2a9fd6;
    background: rgba(42, 159, 214, 0.2);
}

.play-btn.playing i {
    color: #2a9fd6 !important;
}

/* 进度条容器 */
.progress-bar-container {
    position: relative;
    height: 4px;
    margin: 0.5rem 0;
}

/* 进度条背景（细线条） */
.progress-bar-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

/* 进度条填充（细线条） */
.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: #2a9fd6;
    border-radius: 1px;
    width: 0%;
    transition: width 0.1s linear;
}

/* 隐藏的输入滑块，用于拖动 */
.progress-bar-input {
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 20px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* 悬停时显示进度条滑块 */
.progress-bar-container:hover .progress-bar-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.progress-bar-container:hover .progress-bar-fill {
    height: 4px;
}


.progress-bar-container:hover::after {
    opacity: 1;
}

/* 4. 服务展示区样式 */
.service-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.service-item:hover {
    border-color: rgba(66, 133, 244, 0.3);
    background: rgba(0, 10, 26, 0.3);
}

.service-icon {
    font-size: 1.5rem;
}

/* 5. 淘宝引流区样式 */
.taobao-section {
    background: linear-gradient(to top,
            rgba(5, 15, 30, 0) 0%,
            rgba(5, 15, 30, 0.3) 30%,
            rgba(5, 15, 30, 0.3) 100%);
}

.taobao-card {
    border: 1px solid rgba(66, 133, 244, 0.2);
    border-radius: 4px;
    background: rgba(0, 10, 26, 0.4);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .music-hero h1.display-4 {
        font-size: 2.2rem;
    }

    .audio-controls {
        flex-wrap: wrap;
    }

    .progress-container {
        order: 2;
        width: 100%;
        margin-top: 0.5rem;
    }

    .current-time {
        order: 1;
    }
}

/* 全局间距调整 */
section {
    scroll-margin-top: 80px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
}

p,
span {
    font-family: inherit;
}