@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
@import url('https://fonts.cdnfonts.com/css/poppins');

/* 全局参数配置 - 方便修改 */
:root {
    /* 🎯 旋转控制参数 */
    /* 兼容旧参数（不再使用，但保留以防外部引用） */
    --rotation-speed: 200s;        /* 已废弃：请使用下面两个更细粒度的参数 */
    --rotation-speed-idle: 200s;   /* 未播放音乐或暂停时的自动旋转一圈时间 */
    --rotation-speed-playing: 80s;/* 正在播放音乐时的自动旋转一圈时间 */
    --click-rotation-time: 2s;     /* 点击旋转动画时间 */
    --auto-rotation-enabled: 1;    /* 自动旋转开关（1=开启，0=关闭） */
    --auto-rotation-pause-delay: 3s; /* 点击后延迟恢复自动旋转的时间 */

    /* 音量条样式参数（Apple风格） */
    --volume-height: 8px;                    /* 更纤细 */
    --volume-radius: 6px;                    /* 减小圆角，更简约 */
    --volume-bg: rgba(255,255,255,0.07);     /* 细腻半透明底 */
    --volume-border: rgba(255,255,255,0.10); /* 细边框 */
    --volume-fill-gray: rgba(200,200,200,0.85);
    --volume-fill-orange: rgba(234,125,19,0.95);
    --volume-shadow: 0 10px 30px rgba(0,0,0,0.45);
    --volume-text-gray: rgba(200,200,200,0.85);
    --volume-text-orange: rgba(234,125,19,0.95);

    /* 🌫️ 卡片模糊效果参数 */
    --max-blur: 6px;          /* 最大模糊度（离中心最远时的模糊值） */
    --blur-curve: 2;          /* 模糊曲线强度（1=线性，2=平方，3=立方，数值越大越非线性） */
    
    /* 卡片外观参数 */
    --card-opacity: 0.975;    /* 卡片透明度（0-1之间，数值越小越透明） */
    --quantity: 10;           /* 卡片总数量（由JavaScript动态更新） */
    
    /* 🎯 旋转卡片比例参数（以 3840×2160 @ 250% = 1536×864 视窗为基准） */
    --slider-reference-width: 1536px;
    --slider-width-ratio: 0.1559530113;   /* 参考视窗下约 240px */
    --slider-height-ratio: 1.375;         /* 275px / 200px */
    --slider-depth-multiplier: 2.55;      /* 深度与宽度的比例 */
    --slider-top-offset-ratio: -0.08;     /* -8% 顶部偏移 */

    --slider-track-width: calc(min(100vw, var(--slider-reference-width)) * var(--slider-width-ratio));
    --slider-track-height: calc(var(--slider-track-width) * var(--slider-height-ratio));
    --slider-translate-distance: calc(var(--slider-track-width) * var(--slider-depth-multiplier));
    --slider-top-offset: calc(100vh * var(--slider-top-offset-ratio));
}

/* 📐 根据视窗高度微调旋转轨道直径，保持上下黑边的覆盖比例 */
/*    断点值基于常见屏幕高度减去约 120px 浏览器与系统 UI 后的实际 viewport */

/* 约等于屏幕高度 960px（窗口模式） */
@media screen and (min-height: 840px) {
    :root {
        --slider-width-ratio: 0.1642838072;
    }
}

/* 约等于屏幕高度 1024px（窗口模式） */
@media screen and (min-height: 904px) {
    :root {
        --slider-width-ratio: 0.1623208517;
    }
}

/* 约等于屏幕高度 1080px（窗口模式） */
@media screen and (min-height: 960px) {
    :root {
        --slider-width-ratio: 0.1644270091;
    }
}

/* 约等于屏幕高度 1200px（窗口模式） */
@media screen and (min-height: 1000px) {
    :root {
        --slider-width-ratio: 0.1653917000;
    }
}

/* 约等于屏幕高度 1200px（窗口模式） */
@media screen and (min-height: 1200px) {
    :root {
        --slider-width-ratio: 0.12;
    }
}


/* 1440p 显示器在窗口模式下的有效视窗高度通常只有 1320px 左右 */
@media screen and (min-height: 1290px) {
    :root {
        --slider-width-ratio: 0.1845000000;
        --slider-top-offset-ratio: -0.036;
    }
}

.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}

/* ABOUT 按钮样式 - 高级极简风格 */
.about-button {
    position: absolute;
    top: 35px;
    right: 30px;
    z-index: 1001;
    cursor: default;
    padding: 8px 0;
    background: transparent;
    border: none;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 55px; /* 设置固定宽度以便对齐 */
}

/* ABOUT 悬浮面板 - 从右侧滑出 */
.about-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(38vw, 480px);
    height: 100vh;
    background: rgba(0,0,0,0.1);
    border-left: 2px solid rgba(234,125,19,0.15);
    backdrop-filter: blur(24px);
    box-shadow: 
        -20px 0 60px rgba(0,0,0,0.4),
        -8px 0 24px rgba(0,0,0,0.25),
        inset 2px 0 0 rgba(234,125,19,0.08),
        inset 0 0 40px rgba(234,125,19,0.03);
    z-index: 1002;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1), 
                opacity 1.0s ease-out;
}

/* 背景图片伪元素 - 控制透明度 */
.about-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('images/icon.png') center/cover no-repeat;
    opacity: 0.25;
    z-index: -1;
}

.about-panel.visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.about-panel-content {
    padding: 28px 40px 24px 40px;
    height: 100%;
    overflow-y: auto;
}

/* 面板内的 ABOUT 按钮和 Audio Visualizer */
.about-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.about-panel .panel-about-button {
    cursor: default;
    padding: 8px 0;
    background: transparent;
    border: none;
}

.about-panel .panel-about-text {
    font-family: 'ICA Rubrik';
    font-size: 1em;
    color: rgba(234, 125, 19, 0.9);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: normal;
}

.about-panel .panel-audio-visualizer {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    height: 25px;
}

.about-panel .panel-visualizer-bar {
    width: 3px;
    height: 4px;
    background: rgba(234, 125, 19, 0.8);
    border-radius: 1.5px;
    transition: all 0.3s ease;
    transform-origin: top;
}

/* 面板标题和内容 - 实色填充 */
.about-panel-title {
    font-family: 'ICA Rubrik';
    font-size: 1.35em;
    letter-spacing: 2px;
    color: rgba(234,125,19,0.9);
    margin-bottom: 16px;
    text-transform: uppercase;
    text-align: center;
    position: relative;
}

.about-panel-body {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(220,220,220,0.85);
    text-align: center;
}

.about-panel-body p {
    margin-bottom: 12px;
}

/* 网易云音乐链接样式 - 高级优雅版 */
.about-panel .music-link {
    display: block;
    margin-top: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(200, 200, 200, 0.7);
    text-decoration: none;
    font-family: 'ICA Rubrik';
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    transition: all 0.6s ease;
}

.about-panel .music-link:hover {
    color: rgba(234, 125, 19, 0.8);
    transform: translateY(-1px);
}

/* 下划线动画效果 */
.about-panel .music-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234, 125, 19, 0.6), transparent);
    transition: transform 0.6s ease;
}

.about-panel .music-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* 联系方式样式 - 简约版 */
.about-panel .contact-section {
    margin-top: 20px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* 强制让内部元素（按钮与下拉）水平居中 */
}

.about-panel .contact-trigger {
    display: inline-block; /* 让按钮按内容宽度，从而可被居中 */
    background: transparent;
    border: none;
    color: rgba(200, 200, 200, 0.7);
    font-family: 'ICA Rubrik';
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    padding: 8px 0;
    position: relative;
    transition: all 0.6s ease;
}

.about-panel .contact-trigger:hover {
    color: rgba(234, 125, 19, 0.8);
}

/* 联系方式列表 - 简约风格 */
.about-panel .contact-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
}

/* 显示状态 - 一旦显示就保持，直到面板关闭 */
.about-panel .contact-dropdown.visible {
    opacity: 1;
    pointer-events: auto;
}

.about-panel .contact-item {
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-align: center;
}

.about-panel .contact-item:last-child {
    margin-bottom: 0;
}

.about-panel .contact-item:hover .contact-text {
    color: rgba(234, 125, 19, 0.8);
}

.about-panel .contact-text {
    font-family: 'ICA Rubrik';
    font-size: 10px;
    color: rgba(180, 180, 180, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    position: relative;
    text-align: center;
    display: block;
}

.about-panel .contact-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 1px;
    background: rgba(234, 125, 19, 0.5);
    transition: transform 0.4s ease;
}

.about-panel .contact-item:hover .contact-text::after {
    transform: translateX(-50%) scaleX(1);
}

/* 复制提示样式 */
.copy-tooltip {
    position: fixed; /* 锚定到可视窗口，避免移动端浏览器工具栏遮挡 */
    left: 50%;
    bottom: 28px; /* 桌面端基础偏移 */
    bottom: calc(28px + constant(safe-area-inset-bottom));
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    background: transparent; /* 仅保留文字与下划线 */
    color: rgba(234, 125, 19, 0.95);
    font-family: 'ICA Rubrik';
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
    z-index: 2000;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234, 125, 19, 0.6), transparent);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.6s ease;
}

.copy-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.copy-tooltip.show::after {
    transform: translateX(-50%) scaleX(1);
}



.about-text {
    font-family: 'ICA Rubrik';
    font-size: 11px;
    color: rgba(180, 180, 180, 0.6);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: normal;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    display: block;
    text-align: center;
}





/* Audio Visualizer 样式 - 静态时为分隔线 */
.audio-visualizer {
    position: absolute;
    top: 55px; /* 更靠近ABOUT按钮 */
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center; /* 居中排列 */
    gap: 0; /* 静态时无间距 */
    height: 25px;
    width: 55px; /* 与ABOUT按钮相同宽度 */
    z-index: 1001;
    transition: gap 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 静态时显示为一条分隔线 */
.audio-visualizer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(150, 150, 150, 0.6), 
        transparent);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 播放时隐藏分隔线，显示可视化器 */
.audio-visualizer.playing::before {
    opacity: 0;
    width: 0;
}

.audio-visualizer.playing {
    gap: 3px; /* 播放时恢复间距 */
}

.visualizer-bar {
    width: 3px;
    height: 1px; /* 静止时极小高度 */
    background: rgba(150, 150, 150, 0.8);
    border-radius: 1.5px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: top;
    opacity: 0; /* 静态时隐藏 */
    transform: scaleX(0); /* 静态时水平压缩 */
}

/* 播放时显示可视化器条 - 从中心向两边展开 */
.audio-visualizer.playing .visualizer-bar {
    height: 4px;
    opacity: 1;
    transform: scaleX(1); /* 播放时水平展开 */
}

/* 为不同的条添加展开延迟，营造从中心向外的波浪效果 */
.audio-visualizer.playing .visualizer-bar:nth-child(5),
.audio-visualizer.playing .visualizer-bar:nth-child(6) { 
    transition-delay: 0.1s; /* 中心两条最先展开 */
}
.audio-visualizer.playing .visualizer-bar:nth-child(4),
.audio-visualizer.playing .visualizer-bar:nth-child(7) { 
    transition-delay: 0.2s; 
}
.audio-visualizer.playing .visualizer-bar:nth-child(3),
.audio-visualizer.playing .visualizer-bar:nth-child(8) { 
    transition-delay: 0.3s; 
}
.audio-visualizer.playing .visualizer-bar:nth-child(2),
.audio-visualizer.playing .visualizer-bar:nth-child(9) { 
    transition-delay: 0.4s; 
}
.audio-visualizer.playing .visualizer-bar:nth-child(1),
.audio-visualizer.playing .visualizer-bar:nth-child(10) { 
    transition-delay: 0.5s; /* 两侧最后展开 */
}

/* ABOUT hover时的可视化器颜色变化 */
.audio-visualizer.about-hover .visualizer-bar {
    background: rgba(234, 125, 19, 0.8); /* 橙色，与ABOUT hover一致 */
}



/* 动态高度动画 */
@keyframes visualizerPulse {
    0%, 100% { 
        transform: scaleY(1); 
    }
    50% { 
        transform: scaleY(var(--height-multiplier, 3)); 
    }
}

.audio-visualizer.playing .visualizer-bar {
    animation: visualizerPulse 0.6s ease-in-out infinite;
    animation-delay: calc(var(--index) * 0.1s); /* 每个条延迟不同时间 */
}

/* 面板内音频可视化器动画 */
.panel-audio-visualizer.playing .panel-visualizer-bar {
    animation: visualizerPulse 0.6s ease-in-out infinite;
    animation-delay: calc(var(--index) * 0.1s);
}

/* 为不同的条设置不同的高度变化 */
.visualizer-bar:nth-child(1) { --height-multiplier: 2.5; }
.visualizer-bar:nth-child(2) { --height-multiplier: 4; }
.visualizer-bar:nth-child(3) { --height-multiplier: 3; }
.visualizer-bar:nth-child(4) { --height-multiplier: 5; }
.visualizer-bar:nth-child(5) { --height-multiplier: 3.5; }
.visualizer-bar:nth-child(6) { --height-multiplier: 4.5; }
.visualizer-bar:nth-child(7) { --height-multiplier: 2.8; }
.visualizer-bar:nth-child(8) { --height-multiplier: 3.8; }
.visualizer-bar:nth-child(9) { --height-multiplier: 4.2; }
.visualizer-bar:nth-child(10) { --height-multiplier: 3.2; }

/* 面板内可视化器条的高度变化（复用相同的变量） */
.panel-visualizer-bar:nth-child(1) { --height-multiplier: 2.5; }
.panel-visualizer-bar:nth-child(2) { --height-multiplier: 4; }
.panel-visualizer-bar:nth-child(3) { --height-multiplier: 3; }
.panel-visualizer-bar:nth-child(4) { --height-multiplier: 5; }
.panel-visualizer-bar:nth-child(5) { --height-multiplier: 3.5; }
.panel-visualizer-bar:nth-child(6) { --height-multiplier: 4.5; }
.panel-visualizer-bar:nth-child(7) { --height-multiplier: 2.8; }
.panel-visualizer-bar:nth-child(8) { --height-multiplier: 3.8; }
.panel-visualizer-bar:nth-child(9) { --height-multiplier: 4.2; }
.panel-visualizer-bar:nth-child(10) { --height-multiplier: 3.2; }

/* 影院效果的上下黑边 */
.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* 上黑边高度 */
    background: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,0.8) 100%);
    z-index: 1000; /* 最高层级，覆盖所有内容 */
    pointer-events: none; /* 不阻挡点击 */
}

.banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* 下黑边高度 */
    background: linear-gradient(to top, #000 0%, #000 70%, rgba(0,0,0,0.8) 100%);
    z-index: 5; /* 在视频上面，但在卡片下面 */
    pointer-events: none; /* 不阻挡点击 */
}
.banner .slider{
    position: absolute;
    width: var(--slider-track-width);
    height: var(--slider-track-height);
    top: var(--slider-top-offset);
    left: calc(50% - (var(--slider-track-width) / 2));
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(-16deg) rotateY(0deg); /* 保持3D视角，停在初始位置 */
    z-index: 10;
}
/*
.banner .slider:hover {
    animation-play-state: paused;
}
*/
/* 自动旋转动画 - 已注释 */
/*
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
    }to{
        transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
    }
}
*/



.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform:
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(var(--slider-translate-distance));
}

.banner .slider .item{
    /* 卡片透明度 */
    opacity: var(--card-opacity);
    /* 默认深灰色渐变描边 - 融入背景 */
    border: 2px solid transparent;
    background: linear-gradient(#000, #000) padding-box,
                linear-gradient(135deg, 
                    rgba(60, 60, 60, 0.4),       /* 深灰色主调 */
                    rgba(80, 80, 80, 0.3),       /* 稍亮的灰色过渡 */
                    rgba(40, 40, 40, 0.2),       /* 更深的灰色 */
                    transparent) border-box;
    /* 默认深色阴影 */
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.6),             /* 更深的主阴影 */
        0 6px 15px rgba(0, 0, 0, 0.4),              /* 近距离阴影 */
        0 2px 8px rgba(60, 60, 60, 0.2),            /* 深灰色光晕 */
        0 0 0 1px rgba(70, 70, 70, 0.3),            /* 深灰色边框 */
        inset 0 2px 0 rgba(90, 90, 90, 0.1),        /* 顶部微弱高光 */
        inset 0 -1px 0 rgba(30, 30, 30, 0.2);       /* 底部深色 */
    border-radius: 3px; /* 更方正，像真实卡片 */
    /* 添加3D倾斜效果 */
    transform-style: preserve-3d;
    cursor: pointer; /* 添加点击指针 */
}

/* 🔒 点击锁定状态的视觉反馈 */
.banner .slider.click-locked .item {
    cursor: default !important;
}

/* 正在播放音乐的卡片特殊效果 - 橙色渐变描边 */
.banner .slider .item.playing {
    /* 切换到橙色渐变描边 */
    background: linear-gradient(#000, #000) padding-box,
                linear-gradient(135deg, 
                    rgba(234, 125, 19, 0.6),     /* 橙色主调 */
                    rgba(255, 193, 7, 0.4),      /* 金黄色过渡 */
                    rgba(139, 69, 19, 0.3),      /* 深棕色 */
                    transparent) border-box;
    
    /* 增强的橙色光晕 */
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.6),
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(234, 125, 19, 0.6),          /* 更强的橙色光晕 */
        0 0 0 2px rgba(234, 125, 19, 0.8),          /* 更明显的橙色边框 */
        0 0 20px rgba(234, 125, 19, 0.4),           /* 外部发光效果 */
        inset 0 2px 0 rgba(255, 193, 7, 0.3),
        inset 0 -1px 0 rgba(139, 69, 19, 0.3);
    
    /* 自然的呼吸动画 */
    animation: breathingGlow 3s ease-in-out infinite;
}

/* 暂停状态的卡片特殊效果 - 低饱和度橙色描边 */
.banner .slider .item.paused {
    /* 切换到低饱和度橙色渐变描边 */
    background: linear-gradient(#000, #000) padding-box,
                linear-gradient(135deg, 
                    rgba(180, 120, 80, 0.4),      /* 降低饱和度的橙色主调 */
                    rgba(200, 160, 100, 0.3),     /* 降低饱和度的金黄色过渡 */
                    rgba(120, 80, 60, 0.2),       /* 降低饱和度的深棕色 */
                    transparent) border-box;
    
    /* 低饱和度的光晕效果 */
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.6),
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(180, 120, 80, 0.3),          /* 低饱和度橙色光晕 */
        0 0 0 2px rgba(180, 120, 80, 0.5),          /* 低饱和度橙色边框 */
        0 0 20px rgba(180, 120, 80, 0.2),           /* 外部发光效果 */
        inset 0 2px 0 rgba(200, 160, 100, 0.2),
        inset 0 -1px 0 rgba(120, 80, 60, 0.2);
    
    /* 暂停状态不需要脉冲动画 */
}

/* 播放中的呼吸发光动画 - 更自然的呼吸感 */
@keyframes breathingGlow {
    0% {
        /* 呼气结束 - 最暗状态 */
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 2px 6px rgba(234, 125, 19, 0.4),          /* 微弱光晕 */
            0 0 0 2px rgba(234, 125, 19, 0.6),          /* 较淡边框 */
            0 0 15px rgba(234, 125, 19, 0.2),           /* 微弱外发光 */
            inset 0 2px 0 rgba(255, 193, 7, 0.2),
            inset 0 -1px 0 rgba(139, 69, 19, 0.2);
    }
    25% {
        /* 吸气开始 - 渐亮 */
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(234, 125, 19, 0.5),          /* 光晕增强 */
            0 0 0 2px rgba(234, 125, 19, 0.7),          /* 边框变亮 */
            0 0 18px rgba(234, 125, 19, 0.3),           /* 外发光增强 */
            inset 0 2px 0 rgba(255, 193, 7, 0.25),
            inset 0 -1px 0 rgba(139, 69, 19, 0.25);
    }
    50% {
        /* 吸气顶峰 - 最亮状态 */
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 2px 10px rgba(234, 125, 19, 0.7),         /* 最强光晕 */
            0 0 0 2px rgba(234, 125, 19, 0.9),          /* 最亮边框 */
            0 0 25px rgba(234, 125, 19, 0.5),           /* 最强外发光 */
            inset 0 2px 0 rgba(255, 193, 7, 0.35),
            inset 0 -1px 0 rgba(139, 69, 19, 0.35);
    }
    75% {
        /* 呼气开始 - 渐暗 */
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(234, 125, 19, 0.5),          /* 光晕减弱 */
            0 0 0 2px rgba(234, 125, 19, 0.7),          /* 边框变暗 */
            0 0 18px rgba(234, 125, 19, 0.3),           /* 外发光减弱 */
            inset 0 2px 0 rgba(255, 193, 7, 0.25),
            inset 0 -1px 0 rgba(139, 69, 19, 0.25);
    }
    100% {
        /* 呼气结束 - 回到最暗状态 */
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 2px 6px rgba(234, 125, 19, 0.4),          /* 微弱光晕 */
            0 0 0 2px rgba(234, 125, 19, 0.6),          /* 较淡边框 */
            0 0 15px rgba(234, 125, 19, 0.2),           /* 微弱外发光 */
            inset 0 2px 0 rgba(255, 193, 7, 0.2),
            inset 0 -1px 0 rgba(139, 69, 19, 0.2);
    }
}


.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px; /* 几乎方正的图片 */
}

/* 卡片视频样式 - 默认隐藏 */
.banner .slider .item .card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 2; /* 在图片之上 */
}

/* 播放状态时显示视频 */
.banner .slider .item.playing .card-video {
    opacity: 1;
}

/* 卡片内部文字效果 - 专辑风格 */
.card-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 💬 经典黑色渐变背景 - 高级质感 */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.9) 0%,          /* 底部深黑色 */
        rgba(0, 0, 0, 0.7) 50%,         /* 中间半透明黑色 */
        rgba(0, 0, 0, 0.3) 80%,         /* 顶部更透明黑色 */
        transparent 100%);               /* 完全透明 */
    padding: 20px 15px 15px 15px;
    text-align: center;
    z-index: 20; /* 在卡片图片和视频之上 */
    opacity: 0;
    pointer-events: none;
    /* 🌟 更优雅的整体过渡 */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0 0 3px 3px; /* 底部圆角与卡片一致 */
    /* 🌟 初始状态：从下方滑入 */
    transform: translateY(20px);
}

.card-song-name {
    font-family: 'ICA Rubrik';
    font-size: 1.1em;
    font-weight: normal;
    /* 💬 灰色字体 - 与ABOUT和NOW PLAYING一致 */
    color: rgba(200, 200, 200, 0.8); /* 柔和的灰白色，与NOW PLAYING标题相同 */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), /* 深色阴影增强可读性 */
                 0 1px 3px rgba(0, 0, 0, 0.6); /* 深色阴影与黑色背景呼应 */
    line-height: 1.2;
    margin: 0;
    display: block;
    /* 🌟 文字独立的动画效果 */
    transform: translateY(10px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

/* 💬 渐入动画 - 更优雅的分层效果 */
.card-text-overlay.show {
    opacity: 1;
    /* 🌟 背景从下方优雅滑入 */
    transform: translateY(0);
}

.card-text-overlay.show .card-song-name {
    opacity: 1;
    /* 🌟 文字稍微延迟，带有弹性效果 */
    transform: translateY(0);
    transition-delay: 0.2s; /* 延迟0.2秒，让背景先出现 */
}

/* 💬 渐出动画 - 优雅的反向效果 */
.card-text-overlay.fade-out {
    opacity: 0;
    transform: translateY(8px); /* 向下滑出 - 减少距离，避免跑出边框 */
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-text-overlay.fade-out .card-song-name {
    opacity: 0;
    transform: translateY(10px); /* 文字轻微向下消失 - 减少距离 */
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}





/* 背景视频样式 */
.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2; /* 在卡片下方，文字上方 */
    pointer-events: none; /* 不阻挡交互 */
    background-color: rgba(0, 0, 0, 0.3); /* 占位符背景，视频加载前显示 */
}
.banner .content{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1700px, 96vw);
    height: max-content;
    /* 底部留白 = 下黑边高度 + 额外间距，确保标题不与黑边重合 */
    padding-bottom: calc(15vh + clamp(30px, 4vh, 72px));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 8; /* 在视频上方，但在卡片下方 */
}

/* 顶层音量覆盖条（细线 + 竖线指示器风格） */
.volume-overlay {
    position: absolute;
    left: 50%;
    bottom: 18px; /* 位于底部黑色横幅上方一些 */
    transform: translateX(-50%) translateY(6px) scale(0.985);
    z-index: 9999; /* 高于卡片 */
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none; /* 不阻挡点击 */
}

.volume-overlay .volume-line {
    position: relative;
    width: min(36vw, 460px);
    height: 1px; /* 很细的一条线 */
    background: linear-gradient(90deg,
        rgba(255,255,255,0.85) 0%,
        rgba(255,255,255,0.55) 48%,
        rgba(255,255,255,0.22) 100%
    );
    opacity: 0.9;
}

/* 左亮右暗的动态渐变，跟随音量 */
.volume-overlay .volume-gradient {
    position: absolute;
    top: -0.5px; /* 让覆盖刚好盖住基线，避免锯齿 */
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.85) 0%,
        rgba(255,255,255,0.70) var(--vol-pos, 70%), /* 左侧更亮 */
        rgba(255,255,255,0.35) calc(var(--vol-pos, 70%) + 0.1%), /* 竖线右侧更暗 */
        rgba(255,255,255,0.15) 100%
    );
    transition: background 120ms ease-out;
}

/* 竖线指示器 */
.volume-overlay .volume-thumb {
    position: absolute;
    top: -7px;
    left: var(--vol-pos, 70%);
    width: 1px; /* 极细的竖线 */
    height: 15px;
    background: currentColor;
    color: var(--volume-text-gray);
    box-shadow: 0 0 0 0.5px currentColor;
    transition: left 120ms ease-out, color 220ms ease;
}

.volume-overlay .volume-percent {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--volume-text-gray);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
    user-select: none;
}

/* 播放中（橙色） */
.volume-overlay.playing .volume-percent {
    color: var(--volume-text-orange);
}
.volume-overlay.playing .volume-thumb {
    color: var(--volume-text-orange);
}

/* 播放中：整条线与渐变切换为橙色风格（左亮右暗）*/
.volume-overlay.playing .volume-line {
    background: linear-gradient(90deg,
        rgba(234,125,19,0.95) 0%,
        rgba(234,125,19,0.65) 48%,
        rgba(234,125,19,0.28) 100%
    );
}
.volume-overlay.playing .volume-gradient {
    background: linear-gradient(90deg,
        rgba(234,125,19,0.95) 0%,
        rgba(234,125,19,0.82) var(--vol-pos, 70%),
        rgba(234,125,19,0.45) calc(var(--vol-pos, 70%) + 0.1%),
        rgba(234,125,19,0.22) 100%
    );
}

/* 进入时淡入 */
.volume-overlay {
    opacity: 0;
    transition: opacity 280ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
}
.volume-overlay.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.banner .content h1{
    font-family: 'ICA Rubrik';
    font-size: clamp(4em, 12vw, 16em); /* 响应式字体大小 */
    line-height: 1em;
    color: rgba(45, 52, 54, 0.3); /* 高级深灰色半透明填充 */
    -webkit-text-stroke: 2px #ea7d13; /* 直接在主体文字上绘制描边 */
    paint-order: stroke fill; /* 确保描边与填充一次排版 */
    position: relative;
    text-align: center;
    width: 100%;
    padding: 0 clamp(8px, 1vw, 16px); /* 减少左右留白，保留最小安全间距 */
    box-sizing: border-box;
    white-space: nowrap; /* 防止换行 */
    overflow: visible;
    z-index: 8; /* 在视频上方，但在卡片下方 */
    text-shadow: none; /* 移除阴影，让半透明效果更明显 */
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* MR.PINEAPPLE 在NOW PLAYING出现时向上移动 */
.banner .content h1.move-up {
    transform: translateY(-120px); /* 向上移动120px */
}

/* NOW PLAYING 显示区域 - 极简高级版 */
.banner .content .now-playing {
    position: absolute;
    text-align: center;
    bottom: 20vh; /* 距离底部20vh，避免与黑色横幅重叠 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 0;
    background: none;
    border: none;
    z-index: 7; /* 在视频上方，卡片下方 */
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 600px;
}

.banner .content .now-playing.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.banner .content .now-playing-label {
    font-family: 'ICA Rubrik';
    font-size: 0.75em;
    color: rgba(234, 125, 19, 0.6);
    letter-spacing: 4px;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: normal;
    opacity: 0.8;
    transform: translateY(5px);
    transition: all 0.6s ease 0.2s;
}

/* 暂停状态的标签颜色 */
.banner .content .now-playing-label.paused {
    color: rgba(150, 150, 150, 0.7); /* 灰色调表示暂停 */
}

.banner .content .now-playing-title {
    font-family: 'ICA Rubrik';
    font-size: 1.8em;
    color: rgba(200, 200, 200, 0.8); /* 更柔和的灰白色，符合氛围 */
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    transform: translateY(10px);
    transition: all 0.6s ease 0.4s;
}

.banner .content .now-playing-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234, 125, 19, 0.8), transparent);
    transition: transform 0.8s ease 0.6s;
}

.banner .content .now-playing.active .now-playing-label {
    opacity: 1;
    transform: translateY(0);
}

.banner .content .now-playing.active .now-playing-title {
    transform: translateY(0);
}

.banner .content .now-playing.active .now-playing-title::after {
    transform: translateX(-50%) scaleX(1);
}

.mobile-title {
    display: none;
    font-family: 'ICA Rubrik';
    font-size: clamp(3.2em, 18vw, 6em);
    line-height: 1em;
    color: rgba(45, 52, 54, 0.3);
    -webkit-text-stroke: 2px #ea7d13;
    paint-order: stroke fill;
    text-transform: uppercase;
    text-align: center;
    padding: 0 24px;
    white-space: nowrap;
    text-shadow: none;
}





.banner .content .author{
    font-family: Poppins;
    text-align: right;
    max-width: 200px;
}
.banner .content h2{
    font-size: 3em;
}

@media screen and (max-width: 1023px) {
    .banner .content h1{
        text-align: center;
        width: 100%;
        text-shadow: 0 10px 20px #000;
        font-size: clamp(3em, 8vw, 7em); /* 平板响应式字体 */
        padding: 0 15px;
    }
    

    .banner .content .author{
        color: #fff;
        padding: 20px;
        text-shadow: 0 10px 20px #000;
        z-index: 10;
        max-width: unset;
        width: 100%;
        text-align: center;
        padding: 0 30px;
    }
    

    
    /* ABOUT 按钮平板响应式 */
    .about-button {
        top: 25px;
        right: 25px;
        padding: 10px 0;
    }
    
    .about-text {
        font-size: 0.9em;
        letter-spacing: 2.5px;
    }
    
    /* Audio Visualizer 平板响应式 */
    .audio-visualizer {
        top: 48px; /* 更靠近ABOUT按钮 */
        right: 25px;
        height: 20px; /* 稍小一些 */
    }
    
    .visualizer-bar {
        width: 2.5px;
        height: 3px;
    }
    
    /* 平板版MR.PINEAPPLE移动距离调整 */
    .banner .content h1.move-up {
        transform: translateY(-100px); /* 平板版向上移动100px */
    }
    
    /* NOW PLAYING 平板响应式 */
    .banner .content .now-playing {
        bottom: 18vh; /* 平板版稍微低一些 */
        max-width: 500px;
    }
    
    .banner .content .now-playing-label {
        font-size: 0.65em;
        letter-spacing: 3px;
    }
    
    .banner .content .now-playing-title {
        font-size: 1.4em;
        letter-spacing: 1.5px;
    }
    
    /* 卡片内部文字平板响应式 */
    .card-song-name {
        font-size: 1em;
        letter-spacing: 1.2px;
    }
    
    .card-text-overlay {
        padding: 18px 12px 12px 12px;
    }
}

/*@media screen and (max-width: 767px) {*/
/*    .banner .content h1{*/
        /* 手机响应式字体 */
/*        font-size: clamp(2em, 6vw, 5em); */
/*        padding: 0 10px;*/
/*    }*/
    

    

    
    /* ABOUT 按钮手机响应式 */
/*    .about-button {*/
/*        top: 20px;*/
/*        right: 15px;*/
/*        padding: 8px 0;*/
/*    }*/
    
/*    .about-text {*/
/*        font-size: 0.8em;*/
/*        letter-spacing: 2px;*/
/*    }*/
    
    /* Audio Visualizer 手机响应式 */
/*    .audio-visualizer {*/
/*        top: 42px; */
/*        right: 15px;*/
/*        height: 15px; */
/*        gap: 2px;*/
/*    }*/
    
/*    .visualizer-bar {*/
/*        width: 2px;*/
/*        height: 2px;*/
/*    }*/
    
    /* 手机版MR.PINEAPPLE移动距离调整 */
/*    .banner .content h1.move-up {*/
        /* 手机版向上移动80px */
/*        transform: translateY(-80px); */
/*    }*/
    
    /* NOW PLAYING 手机响应式 */
/*    .banner .content .now-playing {*/
         /* 手机版再低一些 */
/*        bottom: 16vh;*/
/*        max-width: 380px;*/
/*    }*/
    
/*    .banner .content .now-playing-label {*/
/*        font-size: 0.6em;*/
/*        letter-spacing: 2px;*/
/*        margin-bottom: 8px;*/
/*    }*/
    
/*    .banner .content .now-playing-title {*/
/*        font-size: 1.2em;*/
/*        letter-spacing: 1px;*/
/*    }*/
    
    /* 卡片内部文字手机响应式 */
/*    .card-song-name {*/
/*        font-size: 0.9em;*/
/*        letter-spacing: 1px;*/
/*    }*/
    
/*    .card-text-overlay {*/
/*        padding: 15px 10px 10px 10px;*/
/*    }*/
/*}*/

@media screen and (max-width: 758px)  {

/* @media screen and (max-width: 758px) and (hover: none),
       screen and (max-width: 758px) and (pointer: coarse) { */
    .banner {
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('images/bg.jpeg') center/cover no-repeat;
    }

    .banner::before,
    .banner::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 50vh;
        pointer-events: none;
        z-index: 0;
    }

    .banner::before {
        top: 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.18) 80%,
            rgba(0, 0, 0, 0.55) 90%,
            rgba(0, 0, 0, 0.72) 100%
        );
    }

    .banner::after {
        bottom: 0;
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.18) 80%,
            rgba(0, 0, 0, 0.55) 90%,
            rgba(0, 0, 0, 0.72) 100%
        );
    }

    .banner > * {
        display: none;
    }

    .banner > .about-panel.visible {
        display: block;
    }

    .banner .mobile-title {
        display: block;
        margin: 0 10px;
        width: calc(100% - 20px);
        text-align: center;
        font-size: clamp(2.4rem, calc(10vw + 0.2rem), 4.6rem);
        letter-spacing: clamp(1px, 0.6vw, 3px);
        position: relative;
        z-index: 1;
    }

    .banner .content {
        display: none;
    }

    .about-panel {
        left: 0;
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(234,125,19,0.15);
        background: rgba(0, 0, 0, 0.88);
        box-shadow:
            0 -20px 60px rgba(0,0,0,0.4),
            0 -8px 24px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(234,125,19,0.08),
            inset 0 0 40px rgba(234,125,19,0.03);
    }

    .about-panel.visible {
        transform: translateX(0);
    }

    .about-panel-content {
        padding: 32px 24px 40px 24px;
    }

    .about-panel .panel-about-button {
        cursor: pointer;
    }

    .about-panel .panel-audio-visualizer {
        position: relative;
        width: 42px;
        height: 42px;
        justify-content: center;
        align-items: center;
        gap: 0;
        cursor: pointer;
        touch-action: manipulation;
    }

    .about-panel .panel-audio-visualizer::before,
    .about-panel .panel-audio-visualizer::after {
        content: '';
        position: absolute;
        width: 70%;
        height: 2px;
        background: rgba(234, 125, 19, 0.85);
        border-radius: 999px;
        transition: background 0.3s ease, transform 0.3s ease;
    }

    .about-panel .panel-audio-visualizer::before {
        transform: rotate(45deg);
    }

    .about-panel .panel-audio-visualizer::after {
        transform: rotate(-45deg);
    }

    .about-panel .panel-audio-visualizer .panel-visualizer-bar {
        display: none;
    }

    .about-panel .panel-audio-visualizer:hover::before,
    .about-panel .panel-audio-visualizer:hover::after {
        background: rgba(234, 125, 19, 1);
    }

    .about-panel .panel-audio-visualizer:active::before,
    .about-panel .panel-audio-visualizer:active::after {
        background: rgba(234, 125, 19, 1);
        transform: scale(0.9) rotate(45deg);
    }

    .about-panel .panel-audio-visualizer:active::after {
        transform: scale(0.9) rotate(-45deg);
    }

    .about-panel .panel-audio-visualizer:focus-visible {
        outline: none;
    }

    .about-panel .panel-audio-visualizer:focus-visible::before,
    .about-panel .panel-audio-visualizer:focus-visible::after {
        background: rgba(234, 125, 19, 1);
    }
}