/* 首页分类导航专用样式 - 仅保留 banzou-ul-album 相关样式 */

/* CSS 变量定义 */
:root {
	--primary: #337ab7;
	--primary-dark: #2563a8;
	--primary-light: #4a8ec9;
	--radius-m: 12px;
}

/* 类别宫格区域 */
#main .index-banzou-album{ margin-top: 24px; }

#main .hot_title{ color: #232221; }
#main .hot_title a{ color: #232221; }

/* 顶部三链接 - 音乐主题强化 */
#main .index-banzou-album .hot_title{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid rgba(51,122,183,.1);
	position: relative;
}

#main .index-banzou-album .hot_title::after{
	content: '♫';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 32px;
	color: rgba(51,122,183,.15);
	animation: noteRotate 3s ease-in-out infinite;
}

@keyframes noteRotate {
	0%, 100% { transform: translateY(-50%) rotate(0deg); }
	50% { transform: translateY(-50%) rotate(15deg); }
}

#main .index-banzou-album .hot_title a{
	position: relative;
	font-size: 34px;
	line-height: 42px;
	padding: 4px 12px;
	font-weight: 700;
	background: linear-gradient(135deg, #4a8ec9 0%, #2563a8 50%, #1e4d8b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 2px 4px rgba(51,122,183,.15));
}

#main .index-banzou-album .hot_title a::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #4a8ec9, #2563a8);
	transform: translateX(-50%);
	transition: width .3s ease;
	border-radius: 2px;
}

#main .index-banzou-album .hot_title a:hover{
	transform: translateY(-3px);
	filter: drop-shadow(0 4px 8px rgba(51,122,183,.3));
}

#main .index-banzou-album .hot_title a:hover::after{
	width: 80%;
}

#main .index-banzou-album .hot_title a + a{
	margin-left: 8px;
}
#main .index-banzou-album .hot_title a + a::before{
	content: '♪';
	color: rgba(51,122,183,.3);
	margin-right: 12px;
	position: relative;
	top: -2px;
	font-weight: 400;
	font-size: 24px;
}

@media screen and (max-width: 1000px){
	#main .index-banzou-album .hot_title a{ font-size: 1.5em; }
}

/* 分类卡片 - 音乐主题设计 */
#main .banzou-ul-album li{
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 50%, #f0f6fd 100%);
	border-radius: var(--radius-m);
	box-shadow: 0 4px 16px rgba(51,122,183,.15), 0 2px 4px rgba(51,122,183,.08);
	transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
	height: auto !important;
	border: 2px solid rgba(51,122,183,.15);
	position: relative;
	overflow: hidden;
}

/* 音符装饰背景 */
#main .banzou-ul-album li::before{
	content: '♪ ♫ ♩';
	position: absolute;
	top: -10px;
	right: -20px;
	font-size: 48px;
	color: rgba(51,122,183,.05);
	transform: rotate(15deg);
	pointer-events: none;
	transition: all .4s ease;
	font-family: Arial, sans-serif;
}

/* 光晕效果 */
#main .banzou-ul-album li::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(51,122,183,.15) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all .5s ease;
	pointer-events: none;
}

#main .banzou-ul-album li:hover{
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 12px 32px rgba(51,122,183,.25), 0 4px 12px rgba(51,122,183,.15);
	border-color: rgba(51,122,183,.35);
	background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #e8f2fd 100%);
}

#main .banzou-ul-album li:hover::before{
	top: 10px;
	right: 10px;
	color: rgba(51,122,183,.12);
	transform: rotate(25deg) scale(1.2);
}

#main .banzou-ul-album li:hover::after{
	width: 200%;
	height: 200%;
	opacity: 1;
}

/* 为不同类型卡片添加独特主题色 */
#main .banzou-ul-album li:nth-child(1){
	background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 50%, #ffd6d6 100%);
	border-color: rgba(255,107,107,.2);
}
#main .banzou-ul-album li:nth-child(1):hover{
	background: linear-gradient(135deg, #ffeded 0%, #ffd8d8 50%, #ffc8c8 100%);
	border-color: rgba(255,107,107,.4);
	box-shadow: 0 12px 32px rgba(255,107,107,.25), 0 4px 12px rgba(255,107,107,.15);
}
#main .banzou-ul-album li:nth-child(1)::before{ color: rgba(255,107,107,.08); }

#main .banzou-ul-album li:nth-child(2){
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
	border-color: rgba(14,165,233,.2);
}
#main .banzou-ul-album li:nth-child(2):hover{
	background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
	border-color: rgba(14,165,233,.4);
	box-shadow: 0 12px 32px rgba(14,165,233,.25), 0 4px 12px rgba(14,165,233,.15);
}
#main .banzou-ul-album li:nth-child(2)::before{ color: rgba(14,165,233,.08); }

#main .banzou-ul-album li:nth-child(3){
	background: linear-gradient(135deg, #fefce8 0%, #fef9c3 50%, #fef08a 100%);
	border-color: rgba(234,179,8,.2);
}
#main .banzou-ul-album li:nth-child(3):hover{
	background: linear-gradient(135deg, #fef9c3 0%, #fef08a 50%, #fde047 100%);
	border-color: rgba(234,179,8,.4);
	box-shadow: 0 12px 32px rgba(234,179,8,.25), 0 4px 12px rgba(234,179,8,.15);
}
#main .banzou-ul-album li:nth-child(3)::before{ color: rgba(234,179,8,.08); }

#main .banzou-ul-album li:nth-child(4){
	background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #f5d0fe 100%);
	border-color: rgba(192,132,252,.2);
}
#main .banzou-ul-album li:nth-child(4):hover{
	background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 50%, #e9d5ff 100%);
	border-color: rgba(192,132,252,.4);
	box-shadow: 0 12px 32px rgba(192,132,252,.25), 0 4px 12px rgba(192,132,252,.15);
}
#main .banzou-ul-album li:nth-child(4)::before{ color: rgba(192,132,252,.08); }

#main .banzou-ul-album li:nth-child(5){
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
	border-color: rgba(34,197,94,.2);
}
#main .banzou-ul-album li:nth-child(5):hover{
	background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
	border-color: rgba(34,197,94,.4);
	box-shadow: 0 12px 32px rgba(34,197,94,.25), 0 4px 12px rgba(34,197,94,.15);
}
#main .banzou-ul-album li:nth-child(5)::before{ color: rgba(34,197,94,.08); }

#main .banzou-ul-album li:nth-child(6){
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
	border-color: rgba(249,115,22,.2);
}
#main .banzou-ul-album li:nth-child(6):hover{
	background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 50%, #fdba74 100%);
	border-color: rgba(249,115,22,.4);
	box-shadow: 0 12px 32px rgba(249,115,22,.25), 0 4px 12px rgba(249,115,22,.15);
}
#main .banzou-ul-album li:nth-child(6)::before{ color: rgba(249,115,22,.08); }

#main .banzou-ul-album li:nth-child(7){
	background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
	border-color: rgba(236,72,153,.2);
}
#main .banzou-ul-album li:nth-child(7):hover{
	background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #f9a8d4 100%);
	border-color: rgba(236,72,153,.4);
	box-shadow: 0 12px 32px rgba(236,72,153,.25), 0 4px 12px rgba(236,72,153,.15);
}
#main .banzou-ul-album li:nth-child(7)::before{ color: rgba(236,72,153,.08); }

#main .banzou-ul-album li:nth-child(8){
	background: linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #a5f3fc 100%);
	border-color: rgba(6,182,212,.2);
}
#main .banzou-ul-album li:nth-child(8):hover{
	background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 50%, #67e8f9 100%);
	border-color: rgba(6,182,212,.4);
	box-shadow: 0 12px 32px rgba(6,182,212,.25), 0 4px 12px rgba(6,182,212,.15);
}
#main .banzou-ul-album li:nth-child(8)::before{ color: rgba(6,182,212,.08); }

#main .banzou-ul-album li a{
	color: var(--primary);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
    min-height: 140px;
	padding: 20px 12px;
	gap: 10px;
	position: relative;
	z-index: 1;
	transition: color .3s ease;
}
#main .banzou-ul-album li:hover a{
	color: var(--primary-dark);
}

#main .banzou-ul-album li a span:first-child{
	color: #1e293b;
	font-weight: 600;
	font-size: 1.08em;
	transition: all .3s ease;
	text-shadow: 0 1px 2px rgba(0,0,0,.05);
	letter-spacing: 0.3px;
}
#main .banzou-ul-album li:hover a span:first-child{
	transform: scale(1.08);
	color: #0f172a;
	text-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* 图标美化 - 音乐主题动画 */
#main .banzou-ul-album .iconfont{ 
	font-size: 2.6em;
	background: linear-gradient(135deg, #4a8ec9 0%, #2563a8 50%, #1e4d8b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 3px 6px rgba(51,122,183,.25));
	transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: inline-block;
}
#main .banzou-ul-album li:hover .iconfont{
	transform: scale(1.15) translateY(-4px) rotate(5deg);
	filter: drop-shadow(0 6px 12px rgba(51,122,183,.4));
	animation: musicBounce 0.6s ease-in-out;
}

@keyframes musicBounce {
	0%, 100% { transform: scale(1.15) translateY(-4px) rotate(5deg); }
	50% { transform: scale(1.2) translateY(-8px) rotate(-5deg); }
}

/* 为不同卡片的图标添加独特颜色 */
#main .banzou-ul-album li:nth-child(1) .iconfont{
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #c92a2a 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(2) .iconfont{
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(3) .iconfont{
	background: linear-gradient(135deg, #eab308 0%, #ca8a04 50%, #a16207 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(4) .iconfont{
	background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7e22ce 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(5) .iconfont{
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(6) .iconfont{
	background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(7) .iconfont{
	background: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #be185d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#main .banzou-ul-album li:nth-child(8) .iconfont{
	background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#main .banzou-ul-album li a.noicon{
	line-height: 1.3;
	font-size: 2.6em;
	font-weight: 700;
	background: linear-gradient(135deg, #4a8ec9 0%, #2563a8 50%, #1e4d8b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 2px 4px rgba(51,122,183,.15));
}
#main .banzou-ul-album li:hover a.noicon{
	transform: scale(1.12) translateY(-2px);
	filter: drop-shadow(0 4px 8px rgba(51,122,183,.25));
}

/* 为不同调式卡片添加音乐符号装饰 */
#main .banzou-ul-album li:nth-child(n+9) a.noicon::before{
	content: '♪';
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.4em;
	opacity: 0.3;
	transition: all .3s ease;
}
#main .banzou-ul-album li:nth-child(n+9):hover a.noicon::before{
	top: -8px;
	opacity: 0.6;
	animation: noteFloat 1s ease-in-out infinite;
}

@keyframes noteFloat {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(-3px); }
}

/* 分类宫格对齐修复：使用 Grid 填满容器，两侧无空白 */
#main .banzou-ul-album{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	padding: 0 !important;
	margin: 0;
	list-style: none;
	padding-left: 0 !important;
	padding-inline-start: 0 !important;
	grid-auto-flow: row dense;
    justify-items: stretch;
    align-items: stretch;
}
#main .banzou-ul-album li{
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
#main .banzou-ul-album li:nth-child(6n+1){
	margin-left: 0 !important;
}

/* 响应式布局 */
@media screen and (max-width: 1200px){
	#main .banzou-ul-album{ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
	#main .banzou-ul-album li a{ min-height: 130px; padding: 18px 10px; }
	#main .banzou-ul-album .iconfont{ font-size: 2.3em; }
	#main .banzou-ul-album li a.noicon{ font-size: 2.3em; }
	#main .banzou-ul-album li::before{ font-size: 42px; }
	#main .index-banzou-album .hot_title::after{ font-size: 28px; }
}
@media screen and (max-width: 1000px){
	#main .index-banzou-album .hot_title {
		margin-top: 3.6em;
	}
}
@media screen and (max-width: 992px){
	#main .banzou-ul-album{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
	#main .banzou-ul-album li a{ min-height: 120px; padding: 16px 8px; }
	#main .banzou-ul-album .iconfont{ font-size: 2.1em; }
	#main .banzou-ul-album li a.noicon{ font-size: 2.1em; }
	#main .banzou-ul-album li::before{ font-size: 38px; }
	#main .banzou-ul-album li{ 
		box-shadow: 0 3px 10px rgba(51,122,183,.12);
		border-width: 1.5px;
	}
	#main .banzou-ul-album li:hover{ 
		box-shadow: 0 6px 14px rgba(51,122,183,.15);
		transform: translateY(-6px) scale(1.02);
	}
	#main .index-banzou-album .hot_title::after{ font-size: 24px; }
	#main .index-banzou-album .hot_title{ padding-bottom: 12px; }
}
@media screen and (max-width: 768px){
	#main .banzou-ul-album{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
	#main .banzou-ul-album li a{ min-height: 110px; padding: 14px 8px; gap: 8px; }
	#main .banzou-ul-album .iconfont{ font-size: 1.9em; }
	#main .banzou-ul-album li a.noicon{ font-size: 1.9em; }
	#main .banzou-ul-album li a span:first-child{ font-size: 1em; }
	#main .banzou-ul-album li::before{ font-size: 32px; }
	#main .banzou-ul-album li:hover::before{ transform: rotate(20deg) scale(1.1); }
	#main .index-banzou-album .hot_title{ padding-bottom: 10px; }
	#main .index-banzou-album .hot_title::after{ font-size: 22px; }
	#main .index-banzou-album .hot_title a + a::before{ font-size: 20px; }
}
@media screen and (max-width: 576px){
	#main .banzou-ul-album{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
	#main .banzou-ul-album li a{ min-height: 100px; padding: 12px 6px; }
	#main .banzou-ul-album .iconfont{ font-size: 1.7em; }
	#main .banzou-ul-album li a.noicon{ font-size: 1.7em; }
	#main .banzou-ul-album li a span:first-child{ font-size: 0.96em; }
	#main .banzou-ul-album li::before{ font-size: 28px; right: -10px; }
	#main .banzou-ul-album li{ 
		border-radius: 10px;
		border-width: 1.5px;
	}
	#main .banzou-ul-album li:hover{ 
		transform: translateY(-3px) scale(1.01);
	}
	#main .index-banzou-album .hot_title::after{ display: none; }
	#main .index-banzou-album .hot_title a + a::before{ 
		content: '·';
		font-size: 24px;
		margin: 0 8px;
	}
}

/* 清除 clearfix 伪元素 */
#main .banzou-ul-album.clearfix::before,
#main .banzou-ul-album.clearfix::after,
#main .banzou-ul-album::before,
#main .banzou-ul-album::after{
	content: none !important;
	display: none !important;
}

/* 纠正旧样式对子元素高度的影响 */
#main .banzou-ul-album li a span:first-child,
#main .banzou-ul-album li a .iconfont{
	height: auto !important;
	line-height: 1 !important;
	display: block;
	margin: 0 0 6px 0;
}

/* 统一盒模型 */
#main .banzou-ul-album li a{ box-sizing: border-box; }

/* 页面加载动画 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#main .index-banzou-album .hot_title {
	animation: fadeInUp 0.8s ease-out 0.1s both;
}

#main .banzou-ul-album li {
	animation: fadeInUp 0.6s ease-out both;
}

/* 为不同位置的卡片添加延迟，创建波浪效果 */
#main .banzou-ul-album li:nth-child(1) { animation-delay: 0.1s; }
#main .banzou-ul-album li:nth-child(2) { animation-delay: 0.15s; }
#main .banzou-ul-album li:nth-child(3) { animation-delay: 0.2s; }
#main .banzou-ul-album li:nth-child(4) { animation-delay: 0.25s; }
#main .banzou-ul-album li:nth-child(5) { animation-delay: 0.3s; }
#main .banzou-ul-album li:nth-child(6) { animation-delay: 0.35s; }
#main .banzou-ul-album li:nth-child(7) { animation-delay: 0.4s; }
#main .banzou-ul-album li:nth-child(8) { animation-delay: 0.45s; }
#main .banzou-ul-album li:nth-child(9) { animation-delay: 0.5s; }
#main .banzou-ul-album li:nth-child(10) { animation-delay: 0.55s; }
#main .banzou-ul-album li:nth-child(11) { animation-delay: 0.6s; }
#main .banzou-ul-album li:nth-child(12) { animation-delay: 0.65s; }
#main .banzou-ul-album li:nth-child(13) { animation-delay: 0.7s; }
#main .banzou-ul-album li:nth-child(14) { animation-delay: 0.75s; }
#main .banzou-ul-album li:nth-child(15) { animation-delay: 0.8s; }

/* 移动端禁用复杂动画，优化性能 */
@media screen and (max-width: 768px) {
	#main .banzou-ul-album li {
		animation: fadeInUp 0.4s ease-out both;
	}
	#main .banzou-ul-album li:nth-child(n) {
		animation-delay: 0.05s;
	}
}