/* style.css */
/* 🔥 修改：设置全站鼠标为无边框的渐变星星 (bae1ff -> e6d4ff) */
body {
background-color: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* 默认鼠标 */
cursor: url('data:image/svg+xml;utf8,') 14 14, auto;
}
/* 链接/按钮/可点击区域：保持一致的渐变星星，阴影稍微加深一点点作为反馈 */
a, button, .cursor-pointer, select, input, label {
cursor: url('data:image/svg+xml;utf8,') 14 14, pointer !important;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.poster-ratio { aspect-ratio: 2 / 3; }
.active-tab { color: #000; font-weight: 700; border-bottom: 3px solid #ff5a5f; }
/* 音乐列表悬停效果 */
.music-row:hover { background-color: rgba(0,0,0,0.03); }
.music-row:hover .row-index { display: none; }
.music-row:hover .row-play-icon { display: block; }
.row-play-icon { display: none; }
/* 弹窗动画 */
.modal-enter-active, .modal-leave-active { transition: all 0.3s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; transform: scale(0.95); }
/* 🔥 新增：背景轮播特效 */
.bg-slide-enter-active, .bg-slide-leave-active { transition: opacity 1.5s ease-in-out; }
.bg-slide-enter-from, .bg-slide-leave-to { opacity: 0; }
/* 🔥 新增：唱片旋转动画 */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin 4s linear infinite; }
.dynamic-bg-container {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: -1; pointer-events: none; background-color: #f8fafc;
}
.dynamic-bg-img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
/* 🔥 新增：采访板块的翻页特效 */
.paper-flip-enter-active { animation: paper-in 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.paper-flip-leave-active { animation: paper-out 0.5s cubic-bezier(0.5, 0, 0.75, 0); }
@keyframes paper-in {
0% { opacity: 0; transform: rotateY(-90deg) translateX(-50px) scale(0.95); transform-origin: left center; }
100% { opacity: 1; transform: rotateY(0deg) translateX(0) scale(1); transform-origin: left center; }
}
@keyframes paper-out {
0% { opacity: 1; transform: rotateY(0deg) translateX(0) scale(1); transform-origin: center center; }
100% { opacity: 0; transform: rotateY(90deg) translateX(50px) scale(0.95); transform-origin: center center; }
}
/* 🔥 新增：鼠标点击时的星星爆炸特效 */
.click-star {
position: fixed;
width: 20px;
height: 20px;
/* 使用跟鼠标一样的渐变星星图 */
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none; /* 让它不挡鼠标 */
z-index: 9999;
/* 动画：向四周炸开并消失 */
animation: star-burst 0.8s ease-out forwards;
}
@keyframes star-burst {
0% {
transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
opacity: 1;
}
100% {
/* --tx 和 --ty 由 JS 随机生成，实现向不同方向飞 */
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0) rotate(180deg);
opacity: 0;
}
}