/* =====================================================================
   ax-anim.css — 站点动画与布局层（两站共用）
   原则：
   1) 不使用任何 skew / rotate 变形，文字保持水平
   2) 动画以「位移 / 缩放 / 遮罩 / 描边 / 扫描 / 脉冲」为主，肉眼可辨
   3) 附带排版间距修复（行高、栅格间距、标题与正文留白），避免文字重叠、过近
   ===================================================================== */

:root{
  --ax-ease:cubic-bezier(.22,.61,.36,1);
  --ax-ease-out:cubic-bezier(.16,1,.3,1);
  --ax-spring:cubic-bezier(.34,1.56,.64,1);
  --ax-gap:24px;
  --ax-line:1.82;
  --ax-radius:14px;
  --ax-accent:#38bdf8;
  --ax-accent-2:#8b5cf6;
}

/* =====================================================================
   第一部分：排版间距修复（两站共用）
   ===================================================================== */
body{line-height:var(--ax-line)}
h1,h2,h3,h4{line-height:1.34;margin-bottom:.55em;overflow-wrap:break-word}
p{overflow-wrap:break-word}
.sec-h{margin-bottom:16px}
.sec-sub{margin-bottom:28px;line-height:1.78}
.lead{line-height:1.84}
.prose p{line-height:1.84}
.prose p + p{margin-top:14px}
.prose > * + *{margin-top:12px}

/* 栅格间距统一放大 */
.rgrid{gap:var(--ax-gap)}
.feature-grid,.spec-cards,.tiles,.howto,.members,.awards,.srclist,
.sound-grid,.scene-grid,.press-grid,.review-list,.buy-grid,.deal-row,
.panel .rgrid,.panel .tiles,.panel .feature-grid{gap:var(--ax-gap)}
.two-col{gap:44px}
.hero-in{gap:52px}
.rel-in{gap:44px}
.rel-body{gap:44px}
.accessory-row{gap:var(--ax-gap)}

/* 卡片内边距与标题留白 */
.rcard .rbody{padding:16px 18px 20px}
.rcard .rbody h3{line-height:1.42;margin-bottom:8px}
.rcard .rkind{margin-bottom:6px;line-height:1.5}
.rcard .rmeta{line-height:1.6}
.rcard .rtracks{margin-top:6px;line-height:1.6}
.tile{padding:20px 18px}
.tile strong{line-height:1.2;margin-bottom:6px}
.tile span{margin:4px 0 8px;line-height:1.5}
.tile em{line-height:1.62}
.how{padding:22px 20px}
.how strong{margin-bottom:8px}
.member{padding:24px}
.member-head{gap:16px;margin-bottom:12px}
.member-note{line-height:1.82}
.award{padding:20px}
.award strong{margin-bottom:6px;line-height:1.5}
.src{padding:22px 24px}
.src p{line-height:1.82}
.factcard{padding:26px}
.factcard dl{gap:10px 16px;line-height:1.7}

/* 表格与曲目表：行高与列间距 */
.tbl td,.tbl th{padding:14px 18px;line-height:1.72}
.tbl thead th{line-height:1.5}
.tracklist li{padding:12px 14px;line-height:1.7;gap:14px}
.tracklist .tt{line-height:1.6}
.tracklist .sp,.tracklist .tl{line-height:1.6}
.songs th[scope="row"]{padding-right:22px}

/* 顶部导航不拥挤 */
.topbar-in{gap:24px;height:68px;flex-wrap:nowrap}
.topnav{gap:6px}
.topnav a{padding:9px 15px;line-height:1.4;white-space:nowrap}
.brand{gap:8px;min-width:0}
.brand-c{margin-left:8px}

/* AI 提示条与页脚留白 */
.aibar-in{gap:14px;padding:11px 0}
.aibar p{line-height:1.7}
.foot-in{gap:34px}
.foot p{line-height:1.75}
.foot-nav{gap:10px}
.foot-credit .credit-name{line-height:1.3;margin-bottom:4px}

/* 页头与区块留白 */
.pagehead{padding:58px 0 46px}
.pagehead h1{margin-bottom:.5em}
.sec-head{margin-bottom:46px}
.hero-stats{gap:22px}
.hero-stats span{line-height:1.55;margin-top:2px}

/* 结构安全：禁止横向溢出与重叠 */
img,svg,canvas{max-width:100%}
.tbl,.tablewrap{max-width:100%}
.foot-in > *,.topbar-in > *{min-width:0}
h1,h2,h3{word-break:normal}
html{scroll-padding-top:96px}
/* 小标题与正文之间不留负间距，避免贴在一起 */
.sec-sub{margin-top:0}
.sec-head .sec-sub{margin-top:2px}
/* 长标题在窄列内安全换行 */
.rcard .rbody h3,.rel-info h1,.factcard dd,.ax-cl-body h3{overflow-wrap:anywhere}
/* 品牌字距不要挤在一起 */
.brand{gap:10px}
.brand-a,.brand-b{letter-spacing:normal}
.hero h1{letter-spacing:-.018em}
.tile strong,.hero-stats strong{letter-spacing:-.015em}

/* 窄屏再放大间距，避免挤压 */
@media (max-width:900px){
  .topbar-in{gap:14px;height:62px}
  .rgrid,.tiles,.howto,.feature-grid,.members,.awards{gap:18px}
  .sec-sub{margin-bottom:22px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .tracklist li{gap:10px}
  .rcard .rbody{padding:14px 15px 18px}
}

/* =====================================================================
   第二部分：入场动画（具体可见）
   ===================================================================== */

/* 2.1 首屏分层上升 + 遮罩擦出 */
.ax-hero-step{
  opacity:0;transform:translateY(34px);
  animation:axRise .95s var(--ax-ease-out) forwards;
  animation-delay:var(--ax-d,0ms);
}
@keyframes axRise{to{opacity:1;transform:none}}

.ax-mask{position:relative;overflow:hidden;display:block}
.ax-mask > span{
  display:block;transform:translateY(105%);
  animation:axMaskUp 1.05s var(--ax-ease-out) forwards;
  animation-delay:var(--ax-d,0ms);
}
@keyframes axMaskUp{to{transform:none}}

/* 2.2 分区标题：短横线扫出 */
.ax-scan{position:relative}
.ax-scan::before{
  content:"";position:absolute;left:0;top:-10px;height:4px;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--ax-accent),var(--ax-accent-2));
  transition:width .85s var(--ax-ease-out);
}
.ax-scan.ax-in::before{width:52px}

/* 2.3 卡片：落下 + 分层投影 */
.ax-drop{
  opacity:0;transform:translateY(38px);
  transition:opacity .7s var(--ax-ease-out), transform .7s var(--ax-ease-out),
             box-shadow .45s var(--ax-ease-out), border-color .35s var(--ax-ease);
  transition-delay:var(--ax-d,0ms);
}
.ax-drop.ax-in{opacity:1;transform:none}
.ax-drop.ax-hover{
  transform:translateY(-6px);
  box-shadow:0 26px 52px -30px rgba(12,22,34,.5);
}

/* 2.4 模糊聚焦淡入 */
.ax-focus{
  opacity:0;filter:blur(14px);transform:scale(1.02);
  transition:opacity .95s var(--ax-ease-out), filter .95s var(--ax-ease-out), transform 1.1s var(--ax-ease-out);
  transition-delay:var(--ax-d,0ms);
}
.ax-focus.ax-in{opacity:1;filter:blur(0);transform:none}

/* 2.5 从左擦入（用于正文块与列表容器） */
.ax-wipe{
  opacity:0;transform:translateX(-26px);
  transition:opacity .75s var(--ax-ease-out), transform .75s var(--ax-ease-out);
  transition-delay:var(--ax-d,0ms);
}
.ax-wipe.ax-in{opacity:1;transform:none}

/* 2.6 卡片图标：线条描出 + 亮起 */
.ax-icon svg,.ax-icon{stroke-dasharray:var(--ax-len,160);stroke-dashoffset:var(--ax-len,160)}
.ax-icon.ax-in{animation:axDraw 1.1s var(--ax-ease-out) forwards}
@keyframes axDraw{to{stroke-dashoffset:0}}

/* 2.7 时间线：外圈常驻，内点随滚动弹入（避免出现双圈） */
.ax-scanline{position:relative}
.ax-scanline::after{
  content:"";position:absolute;left:-29px;top:10px;width:9px;height:9px;border-radius:50%;
  background:var(--ax-accent);border:2px solid #fff;
  opacity:0;transform:scale(.35);
  transition:opacity .45s var(--ax-ease), transform .55s var(--ax-spring);
  transition-delay:var(--ax-d,0ms);
}
.ax-scanline.ax-in::after{opacity:1;transform:none}
/* 时间线结构优化：条目之间留出明确间隔，圆点与文字不重叠 */
.timeline{padding-left:40px}
.timeline li,.tl-item{position:relative;padding-bottom:30px}
.timeline .tl-year{line-height:1.6;margin-bottom:4px}
.timeline .tl-body h3{margin:0 0 8px;line-height:1.45}
.timeline .tl-body p{margin:0;line-height:1.86}
@media (max-width:560px){
  .timeline{padding-left:32px}
  .ax-scanline::after{left:-24px}
  .tl-item::before{left:-27px}
}

/* 2.8 表格行：交错滚入 */
.ax-row{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ax-ease-out), transform .5s var(--ax-ease-out);
  transition-delay:var(--ax-d,0ms);
}
.ax-row.ax-in{opacity:1;transform:none}

/* 2.9 进度条：生长 + 流光 */
.ax-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--ax-accent),var(--ax-accent-2) 55%,#f97316);
  box-shadow:0 0 14px rgba(56,189,248,.55);
  transition:width .18s linear;
}
.ax-progress::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.45) 18px 26px);
  background-size:52px 100%;
  animation:axFlow 1.4s linear infinite;
}
@keyframes axFlow{to{background-position:52px 0}}

/* 2.10 品牌均衡器 */
.ax-eq{display:inline-flex;align-items:flex-end;gap:3px;height:14px;margin-left:10px;vertical-align:middle}
.ax-eq i{display:block;width:3px;border-radius:2px;background:currentColor;animation:axEq 1s ease-in-out infinite}
.ax-eq i:nth-child(1){height:6px}
.ax-eq i:nth-child(2){height:12px;animation-delay:.16s}
.ax-eq i:nth-child(3){height:8px;animation-delay:.32s}
.ax-eq i:nth-child(4){height:13px;animation-delay:.48s}
@keyframes axEq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* 2.11 图片淡入 */
img{transition:opacity .7s var(--ax-ease), transform .55s var(--ax-ease-out)}
html.ax-js img:not(.ax-img-in){opacity:0}
img.ax-img-in{opacity:1}
.ax-zoomable:hover img.ax-img-in{transform:scale(1.045)}

/* 2.12 按钮：内填充推开 + 按压 */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ax-ease-out);
}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:scale(.975)}
.btn-p::before{background:rgba(255,255,255,.22)}
.btn-g::before{background:rgba(255,255,255,.14)}

/* 2.13 链接下划线扫出 */
.text-link,.src a,.foot-nav a{position:relative}
.text-link::after,.src a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ax-ease-out);
}
.text-link:hover::after,.src a:hover::after{transform:scaleX(1)}

/* 2.14 视频卡：播放键脉冲环 */
.ax-vplay::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  animation:axRing 2.1s ease-out infinite;
}
@keyframes axRing{0%{transform:scale(.85);opacity:.85}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
.ax-vcard:hover{transform:translateY(-6px)}
.ax-vcard{transition:transform .5s var(--ax-ease-out), box-shadow .5s var(--ax-ease-out), border-color .4s}

/* 2.15 回到顶部：进度环 */
.ax-top{
  position:fixed;right:24px;bottom:24px;z-index:55;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,14,20,.78);backdrop-filter:blur(10px);
  color:#e6eef7;display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .45s var(--ax-ease), transform .5s var(--ax-spring), background .3s;
}
.ax-top.ax-show{opacity:1;transform:none;pointer-events:auto}
.ax-top:hover{background:linear-gradient(140deg,var(--ax-accent),var(--ax-accent-2));color:#04121f}
.ax-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ax-top-ring{
  position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(var(--ax-accent) var(--ax-p,0%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);
}

/* 2.16 环境层（两站共用，主题再改形态） */
.ax-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.ax-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;animation:axFloat 26s var(--ax-ease) infinite alternate}
.ax-blob.b1{width:44vmax;height:44vmax;left:-14vmax;top:-16vmax;background:radial-gradient(circle,rgba(56,189,248,.4),transparent 64%)}
.ax-blob.b2{width:36vmax;height:36vmax;right:-10vmax;top:20vh;background:radial-gradient(circle,rgba(139,92,246,.34),transparent 64%);animation-duration:32s;animation-delay:-7s}
.ax-blob.b3{width:32vmax;height:32vmax;left:34vw;bottom:-18vmax;background:radial-gradient(circle,rgba(249,115,22,.3),transparent 64%);animation-duration:38s;animation-delay:-15s}
@keyframes axFloat{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3vmax,-2vmax,0) scale(1.1)}
  100%{transform:translate3d(-2vmax,3vmax,0) scale(.94)}
}
body > main,body > header,body > footer,body > .aibar{position:relative;z-index:1}

/* 2.17 点击涟漪与按压（两站共用） */
.ax-ripple{
  position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.45;z-index:3;
  background:radial-gradient(circle,var(--ax-accent) 0%,transparent 70%);
  animation:axRipple .8s var(--ax-ease-out) forwards;
}
@keyframes axRipple{to{transform:scale(2);opacity:0}}
.ax-press{animation:axPress .45s var(--ax-ease-out)}
@keyframes axPress{0%{transform:scale(1)}40%{transform:scale(.972)}100%{transform:scale(1)}}
.ax-card{position:relative;overflow:hidden}

/* 2.18 彩蛋闪光 */
.ax-flash{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 24px,rgba(255,255,255,.15) 24px 32px);
  animation:axFlash .7s ease-out forwards;
}
@keyframes axFlash{from{opacity:.9}to{opacity:0}}
.ax-confetti{position:fixed;width:9px;height:9px;z-index:71;pointer-events:none;border-radius:2px;animation:axConfetti 1.6s var(--ax-ease-out) forwards}
@keyframes axConfetti{
  0%{transform:translate3d(0,0,0);opacity:1}
  100%{transform:translate3d(var(--ax-cx,0px),64vh,0);opacity:0}
}

/* =====================================================================
   第三部分：主题形态（仅改颜色/材质/节奏，不做任何倾斜或旋转）
   ===================================================================== */

/* 3.1 朋克（Hawk Nelson）：扫描线噪点、硬投影、警示色 */
.theme-punk{
  --ax-accent:#22d3ee;--ax-accent-2:#f43f5e;--ax-radius:8px;
  --ax-ease-out:cubic-bezier(.12,1,.3,1);
}
.theme-punk .ax-blobs{
  opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(34,211,238,.05) 0 2px,transparent 2px 5px);
}
.theme-punk .ax-blob{filter:blur(58px);animation-duration:12s}
.theme-punk .ax-blob.b1{background:radial-gradient(circle,rgba(34,211,238,.5),transparent 62%)}
.theme-punk .ax-blob.b2{background:radial-gradient(circle,rgba(244,63,94,.42),transparent 62%);animation-duration:15s}
.theme-punk .ax-blob.b3{background:radial-gradient(circle,rgba(163,230,53,.34),transparent 62%);animation-duration:18s}
.theme-punk .ax-progress{height:4px}
.theme-punk .ax-progress::after{
  background:repeating-linear-gradient(115deg,transparent 0 12px,rgba(15,23,42,.75) 12px 22px);
  animation-duration:.9s;
}
.theme-punk .ax-drop.ax-hover{box-shadow:8px 10px 0 0 rgba(34,211,238,.3)}
.theme-punk .rcard,.theme-punk .tile,.theme-punk .how,.theme-punk .member,
.theme-punk .award,.theme-punk .src,.theme-punk .ax-vcard{border-radius:8px}
.theme-punk .sec-h::before{background:repeating-linear-gradient(90deg,#22d3ee 0 12px,#f43f5e 12px 20px)}
.theme-punk .ax-scan.ax-in::before{width:64px}
.theme-punk .tbl tbody tr:hover{background:rgba(34,211,238,.12);box-shadow:inset 4px 0 0 #22d3ee}
.theme-punk .tracklist li:hover{background:rgba(163,230,53,.12)}
.theme-punk .btn{border-radius:5px;letter-spacing:.03em}
.theme-punk .btn-p{background:#22d3ee;color:#04121f}
.theme-punk .ax-eq i{animation-duration:.62s;background:#22d3ee}
.theme-punk .ax-eq i:nth-child(2){background:#a3e635}
.theme-punk .ax-eq i:nth-child(3){background:#f43f5e}
.theme-punk .ax-eq i:nth-child(4){background:#22d3ee}

/* 3.2 独立摇滚（American Authors）：柔光玻璃、缓慢呼吸 */
.theme-indie{
  --ax-accent:#7dd3fc;--ax-accent-2:#c4b5fd;--ax-radius:16px;
  --ax-ease-out:cubic-bezier(.16,1,.3,1);
}
.theme-indie .ax-blob{filter:blur(104px);opacity:.4;animation-duration:34s}
.theme-indie .ax-blob.b2{animation-duration:40s}
.theme-indie .ax-blob.b3{animation-duration:46s}
.theme-indie .ax-drop{transition-duration:.95s}
.theme-indie .ax-drop.ax-hover{transform:translateY(-10px);box-shadow:0 34px 64px -36px rgba(30,58,90,.42)}
.theme-indie .ax-eq i{animation-duration:1.6s;background:#c4b5fd}
.theme-indie .ax-eq i:nth-child(2){background:#7dd3fc}
.theme-indie .ax-eq i:nth-child(3){background:#fda4af}
.theme-indie .ax-eq i:nth-child(4){background:#c4b5fd}
.theme-indie .tbl tbody tr:hover{background:rgba(196,181,253,.1);box-shadow:inset 3px 0 0 #c4b5fd}
.theme-indie .tracklist li:hover{background:rgba(125,211,252,.1)}

/* =====================================================================
   第四部分：创意装置 —— 音乐可视化面板（canvas + Web Audio）
   ===================================================================== */
.ax-sonic{
  position:fixed;right:22px;bottom:22px;z-index:58;width:340px;
  background:linear-gradient(180deg,rgba(12,18,28,.94),rgba(8,12,20,.96));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--ax-radius);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);
  color:#e8f1fa;overflow:hidden;
  transform:translateY(calc(100% - 46px));
  transition:transform .6s var(--ax-ease-out);
  backdrop-filter:blur(12px);
}
.ax-sonic.ax-open{transform:none}
.ax-sonic-bar{
  display:flex;align-items:center;gap:10px;padding:10px 12px;height:46px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ax-sonic-title{font-size:.8rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-sonic-bpm{font-size:.7rem;color:rgba(255,255,255,.55);white-space:nowrap}
.ax-sonic-btns{margin-left:auto;display:flex;gap:6px;align-items:center}
.ax-sonic-btn{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#e8f1fa;
  font-size:.72rem;line-height:1;
}
.ax-sonic-btn:hover{background:var(--ax-accent);color:#04121f;border-color:transparent}
.ax-sonic-btn.ax-playing{background:var(--ax-accent);color:#04121f;border-color:transparent}
.ax-sonic-body{padding:10px 12px 12px}
.ax-sonic-canvas{width:100%;height:96px;display:block;border-radius:8px;background:rgba(255,255,255,.04)}
.ax-sonic-keys{display:flex;gap:3px;margin-top:10px}
.ax-sonic-key{
  flex:1;height:34px;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#f8fafc,#dbe6f2);
  border:1px solid rgba(0,0,0,.25);cursor:pointer;position:relative;
  transition:transform .12s var(--ax-ease-out), filter .15s;
}
.ax-sonic-key:hover{filter:brightness(1.06)}
.ax-sonic-key.ax-hit{transform:translateY(3px) scaleY(.94);filter:brightness(.9)}
.ax-sonic-key::after{
  content:attr(data-note);position:absolute;left:0;right:0;bottom:3px;text-align:center;
  font-size:.56rem;color:#5b6b7d;
}
.ax-sonic-hint{font-size:.68rem;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.6}
@media (max-width:760px){
  .ax-sonic{left:14px;right:14px;width:auto}
}

/* =====================================================================
   第四部分之二：AI 点评（歌曲表内折叠）与热门 MV 视频卡、更新日志
   ===================================================================== */

/* 4.1 AI 点评 */
.ax-rev-cell{
  padding:0!important;border-bottom:1px solid var(--line);
  background:rgba(56,189,248,.03);
}
.ax-rev-cell.ax-hidden{display:none!important}
.ax-rev{border:0;background:transparent}
.ax-rev summary{
  cursor:pointer;list-style:none;font-size:.8rem;font-weight:700;color:var(--ax-accent-2);
  padding:7px 16px 9px 44px;display:inline-flex;align-items:center;gap:8px;
  line-height:1.6;transition:color .25s var(--ax-ease);
}
.ax-rev summary::-webkit-details-marker{display:none}
.ax-rev summary::before{
  content:"AI";font-size:.62rem;font-weight:900;letter-spacing:.08em;color:#052e16;
  background:#4ade80;border-radius:5px;padding:1px 7px;
}
.ax-rev summary::after{content:"▾";font-size:.7rem;transition:transform .3s var(--ax-ease)}
.ax-rev[open] summary::after{transform:rotate(180deg)}
.ax-rev summary:hover{color:var(--ax-accent)}
.ax-rev-text{
  margin:0;padding:2px 22px 14px 44px;font-size:.89rem;line-height:1.95;color:var(--ink-2);
  max-width:96ch;animation:axRevIn .5s var(--ax-ease-out) both;
}
.ax-rev-meta{margin:0;padding:0 22px 16px 44px;font-size:.72rem;color:var(--ink-3);line-height:1.7}
@keyframes axRevIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .ax-rev summary{padding-left:20px}
  .ax-rev-text,.ax-rev-meta{padding-left:20px;padding-right:18px}
}

/* 4.2 热门 MV 视频区 */
.ax-videos .sec-sub{margin-bottom:24px}
.ax-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ax-gap);margin-bottom:16px}
.ax-vcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--ax-radius);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}
.ax-vframe{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#0e1726,#1b2c42);cursor:pointer;overflow:hidden}
.ax-vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ax-vframe::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 50%,rgba(56,189,248,.2),transparent 62%);
  opacity:.9;transition:opacity .4s;
}
.ax-vframe:hover::after{opacity:.3}
.ax-vplay{
  position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(255,255,255,.94);z-index:2;transition:transform .4s var(--ax-spring), background .3s;
}
.ax-vplay::before{
  content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent #0e1726;
}
.ax-vframe:hover .ax-vplay{transform:scale(1.1);background:#4ade80}
.ax-vhint{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:2;
  font-size:.76rem;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.75);line-height:1.6;
}
.ax-vframe.ax-playing .ax-vplay,.ax-vframe.ax-playing .ax-vhint,.ax-vframe.ax-playing::after{display:none}
.ax-vbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.ax-vbody h3{font-size:.99rem;margin:0;line-height:1.45}
.ax-vbody p{margin:0;font-size:.86rem;color:var(--ink-2);line-height:1.78}
.ax-vmeta{font-size:.74rem;color:var(--ink-3);line-height:1.6;margin-top:2px}
@media (max-width:900px){ .ax-vgrid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .ax-vgrid{grid-template-columns:1fr} }

/* 4.3 更新日志（简洁清单） */
.ax-changelog{padding:54px 0}
.ax-changelog .sec-sub{margin-bottom:22px}
.ax-cl{display:grid;gap:0;margin:0 0 16px}
.ax-cl-item{
  display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline;
  padding:11px 4px;border-bottom:1px solid var(--line);line-height:1.7;
}
.ax-cl-item:last-child{border-bottom:0}
.ax-cl-item:hover{background:rgba(56,189,248,.05)}
.ax-cl-date{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.05em;color:var(--ink-3);
  white-space:nowrap;background:none;border:0;padding:0;margin:0;line-height:1.7;
}
.ax-cl-body h3{font-size:.94rem;font-weight:600;margin:0;line-height:1.62}
.ax-cl-body p,.ax-cl-body ul{display:none!important}
.ax-cl-note{font-size:.74rem;color:var(--ink-3);margin:12px 0 0;line-height:1.7}
@media (max-width:560px){
  .ax-cl-item{grid-template-columns:1fr;gap:3px;padding:12px 4px}
}

/* =====================================================================
   第六部分：补充动画（覆盖此前没有动效的区域）
   同样只做位移/缩放/遮罩/描边/扫光，不做任何倾斜或旋转
   ===================================================================== */

/* 6.1 页面载入：从上下两条帘幕揭开 */
.ax-curtain{
  position:fixed;left:0;right:0;height:52vh;z-index:79;pointer-events:none;
  background:linear-gradient(180deg,#0d1622,#111c2b);will-change:transform;
}
.ax-curtain.ax-c-top{top:0;transform-origin:top}
.ax-curtain.ax-c-bot{bottom:0;transform-origin:bottom}
.ax-curtain::after{
  content:"";position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ax-accent),var(--ax-accent-2));
}
.ax-c-top::after{bottom:0}
.ax-c-bot::after{top:0}
.ax-curtain.ax-gone{transition:transform .62s var(--ax-ease-out);transform:scaleY(0)}

/* 6.2 顶部导航：下划线扫出 + 当前项指示 */
.topnav a{position:relative}
.topnav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ax-ease-out);
}
.topnav a:hover::after{transform:scaleX(1)}
.topnav a.is-active::after{transform:scaleX(1);background:rgba(0,0,0,.35)}
.topbar{transform:translateZ(0)}

/* 6.3 AI 横幅：入场下滑 + 扫光 */
.aibar{position:relative;overflow:hidden}
.aibar-in{animation:axBarIn .7s var(--ax-ease-out) both}
@keyframes axBarIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.aibar::after{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  animation:axBarSweep 5.5s var(--ax-ease) infinite;
}
@keyframes axBarSweep{0%{left:-30%}45%{left:120%}100%{left:120%}}

/* 6.4 首屏数据块：弹出 + 悬停亮起 */
.hero-stats li{
  animation:axPopIn .72s var(--ax-spring) both;
  animation-delay:var(--ax-d,0ms);
  transition:transform .4s var(--ax-ease-out);
}
@keyframes axPopIn{from{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:none}}
.hero-stats li:hover{transform:translateY(-4px)}
.hero-stats strong{transition:color .3s var(--ax-ease), transform .35s var(--ax-spring)}
.hero-stats li:hover strong{transform:scale(1.07)}

/* 6.5 唱片卡：封面扫光 + 底部指示条展开 */
.rcard .rcover{position:relative;overflow:hidden}
.rcard .rcover::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(0);transition:left .75s var(--ax-ease-out);
}
.rcard:hover .rcover::after{left:120%}
.rcard .rbody{position:relative}
.rcard .rbody::after{
  content:"";position:absolute;left:18px;right:18px;bottom:10px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ax-accent),var(--ax-accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ax-ease-out);
}
.rcard:hover .rbody::after{transform:scaleX(1)}

/* 6.6 分区标题：字符级上浮（由脚本切分） */
.ax-split .ax-word{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .6s var(--ax-ease-out), transform .6s var(--ax-ease-out);
  transition-delay:var(--ax-wd,0ms)}
.ax-split.ax-in .ax-word{opacity:1;transform:none}

/* 6.7 画廊缩略图：逐个浮现 */
.ax-galt{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ax-ease-out), transform .5s var(--ax-ease-out), border-color .25s;
  transition-delay:var(--ax-d,0ms);
}
.ax-galt.ax-in{opacity:1;transform:none}

/* 6.8 折叠面板（AI 点评 / 常见问题）：图标旋转 + 内容淡入 */
.ax-rev[open],.faq details[open]{background:rgba(56,189,248,.07)}
.ax-rev[open] summary,.faq details[open] summary{color:var(--ax-accent)}
.ax-rev-text,.faq details p{animation:axFoldIn .45s var(--ax-ease-out) both}
@keyframes axFoldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 6.9 资料来源卡：左侧色条展开 */
.src{position:relative;overflow:hidden}
.src::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--ax-accent),var(--ax-accent-2));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ax-ease-out);
}
.src:hover::before{transform:scaleY(1)}

/* 6.10 更新日志：悬停指示线 */
.ax-cl-item{position:relative;transition:background .3s var(--ax-ease), padding-left .3s var(--ax-ease)}
.ax-cl-item::after{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--ax-accent);transform:scaleY(0);transition:transform .35s var(--ax-ease-out);
}
.ax-cl-item:hover::after{transform:scaleY(1)}
.ax-cl-item:hover{padding-left:12px;background:rgba(56,189,248,.06)}

/* 6.11 页脚：顶部光条 + 内容上浮 */
.foot{position:relative}
.foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ax-accent),var(--ax-accent-2),transparent);
  opacity:.85;
}
.ax-foot{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ax-ease-out), transform .6s var(--ax-ease-out);
  transition-delay:var(--ax-d,0ms);
}
.ax-foot.ax-in{opacity:1;transform:none}
.foot-nav a{transition:color .25s var(--ax-ease), transform .25s var(--ax-ease-out)}
.foot-nav a:hover{transform:translateX(4px)}

/* 6.12 侧边区块导航（滚动指示） */
.ax-rail{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:54;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  opacity:0;transition:opacity .5s var(--ax-ease);
}
.ax-rail.ax-show{opacity:1}
.ax-rail a{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-size:.68rem;color:var(--ink-3);white-space:nowrap;
}
.ax-rail a span{
  width:9px;height:9px;border-radius:50%;border:2px solid var(--ax-accent);
  background:transparent;transition:background .3s, transform .3s var(--ax-spring);
}
.ax-rail a em{
  font-style:normal;opacity:0;transform:translateX(6px);
  transition:opacity .3s, transform .3s var(--ax-ease-out);pointer-events:none;
}
.ax-rail a:hover em,.ax-rail a.ax-cur em{opacity:1;transform:none}
.ax-rail a.ax-cur span{background:var(--ax-accent);transform:scale(1.25)}
@media (max-width:1180px){ .ax-rail{display:none} }

/* 6.13 滚动速度音浪（底部细条） */
.ax-wave{
  position:fixed;left:0;right:0;bottom:0;height:3px;z-index:53;pointer-events:none;
  transform:scaleX(var(--ax-w,0));transform-origin:left;
  background:linear-gradient(90deg,var(--ax-accent),var(--ax-accent-2));
  opacity:.75;transition:transform .12s linear;
}

/* 6.14 音乐可视化面板：展开时的弹性 */
.ax-sonic{will-change:transform}
.ax-sonic.ax-open{animation:axPanelIn .5s var(--ax-ease-out)}
@keyframes axPanelIn{from{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:none}}
.ax-sonic-key:active{transform:translateY(4px) scaleY(.92)}

/* 6.15 回到顶部按钮：呼吸光晕 */
.ax-top::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.35),transparent 68%);
  opacity:0;transition:opacity .4s;
}
.ax-top:hover::after{opacity:1}

/* 6.16 段落与列表：逐条淡入（由脚本标记） */
.ax-line{
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ax-ease-out), transform .55s var(--ax-ease-out);
  transition-delay:var(--ax-d,0ms);
}
.ax-line.ax-in{opacity:1;transform:none}

/* 6.17 图片悬停：轻微抬升（不旋转） */
.ax-zoomable{transition:transform .5s var(--ax-ease-out), box-shadow .5s var(--ax-ease-out)}
.ax-zoomable:hover{transform:translateY(-4px)}

/* 6.18 降级 */
@media (prefers-reduced-motion:reduce){
  .ax-curtain,.ax-rail,.ax-wave{display:none!important}
  .foot-in > *,.ax-line,.ax-split .ax-word,.gal-thumbs .thumb{opacity:1!important;transform:none!important}
  .aibar::after,.ax-top::after{display:none}
}

/* =====================================================================
   第七部分：主页大图的「悬浮」动画
   结构：光晕环(::after) + 悬浮本体(.ax-hero-img) + 地面投影(.hero-art::before)
   地面投影随悬浮高度反向缩放 —— 浮得越高，投影越小越淡，产生真实悬浮感
   ===================================================================== */
.hero-art{
  position:relative;
  perspective:900px;
}
/* 地面投影 */
.hero-art::before{
  content:"";position:absolute;left:12%;right:12%;bottom:-26px;height:34px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.52),rgba(0,0,0,.22) 45%,transparent 72%);
  filter:blur(12px);z-index:0;
  animation:axShadow 7s ease-in-out infinite;
}
@keyframes axShadow{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(.84);opacity:.42}
}
/* 光环：缩放呼吸（不做旋转，避免任何旋转变形） */
.hero-art::after{
  content:"";position:absolute;inset:-11%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(56,189,248,.26),rgba(139,92,246,.16) 45%,transparent 72%);
  filter:blur(30px);
  animation:axHaloBreath 7s ease-in-out infinite;
}
@keyframes axHaloBreath{
  0%,100%{transform:scale(.94);opacity:.55}
  50%{transform:scale(1.08);opacity:.95}
}

/* 悬浮本体 */
.ax-hero-img{
  position:relative;z-index:2;display:block;width:100%;
  border-radius:var(--ax-radius);
  box-shadow:0 34px 64px -34px rgba(0,0,0,.85), 0 6px 18px -10px rgba(0,0,0,.5);
  animation:axHoverFloat 7s cubic-bezier(.45,0,.55,1) infinite;
  transition:box-shadow .5s var(--ax-ease-out), transform .5s var(--ax-ease-out);
  will-change:transform;
}
@keyframes axHoverFloat{
  0%,100%{transform:translate3d(var(--ax-hx,0px),var(--ax-hy,0px),0) translateY(0) scale(1)}
  50%{transform:translate3d(var(--ax-hx,0px),var(--ax-hy,0px),0) translateY(-18px) scale(1.012)}
}
/* 悬停：停在抬起位并加深阴影 */
.hero-art:hover .ax-hero-img{
  animation-play-state:paused;
  transform:translate3d(var(--ax-hx,0px),var(--ax-hy,0px),0) translateY(-24px) scale(1.026);
  box-shadow:0 52px 88px -38px rgba(0,0,0,.92), 0 10px 24px -12px rgba(0,0,0,.55);
}
.hero-art:hover::before{animation-play-state:paused;transform:scale(.78);opacity:.36}
/* 悬停光扫 */
.ax-hero-sheen{
  position:absolute;inset:0;z-index:3;border-radius:var(--ax-radius);overflow:hidden;pointer-events:none;
}
.ax-hero-sheen::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  opacity:0;
}
.hero-art:hover .ax-hero-sheen::after{animation:axSheen 1s var(--ax-ease-out) forwards}
@keyframes axSheen{0%{left:-45%;opacity:1}100%{left:125%;opacity:1}}
/* 说明文字错相位浮动 */
.hero-art .hero-art-cap{position:relative;z-index:2;animation:axCapFloat 7s ease-in-out infinite;animation-delay:-1.2s}
@keyframes axCapFloat{0%,100%{transform:translateY(0);opacity:.72}50%{transform:translateY(-5px);opacity:1}}

/* 朋克站：更快、投影更硬、光环换成扫描条纹 */
.theme-punk .hero-art::before{
  bottom:-22px;height:28px;filter:blur(9px);animation-duration:4.6s;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);
}
.theme-punk .hero-art::after{
  inset:-8%;filter:blur(22px);animation-duration:4.6s;
  background:repeating-radial-gradient(circle at 50% 45%,rgba(34,211,238,.22) 0 6px,transparent 6px 18px);
}
.theme-punk .ax-hero-img{
  animation-duration:4.6s;
  box-shadow:0 28px 0 -14px rgba(34,211,238,.2), 0 34px 60px -32px rgba(0,0,0,.9);
}
.theme-punk .hero-art:hover .ax-hero-img{
  box-shadow:0 40px 0 -12px rgba(34,211,238,.32), 0 50px 84px -36px rgba(0,0,0,.95);
}
/* 独立摇滚站：更慢更柔、光环更大更淡 */
.theme-indie .hero-art::after{inset:-13%;filter:blur(42px);animation-duration:9.5s}
.theme-indie .hero-art::before{animation-duration:8.6s}
.theme-indie .ax-hero-img{
  animation-duration:8.6s;
  box-shadow:0 40px 80px -40px rgba(19,42,72,.75), 0 8px 22px -12px rgba(0,0,0,.4);
}

/* 大图悬浮降级 */
@media (prefers-reduced-motion:reduce){
  .ax-hero-img,.hero-art .hero-art-cap{animation:none!important;transform:none!important}
  .hero-art::before,.hero-art::after{animation:none!important}
  .ax-hero-sheen{display:none}
}


/* =====================================================================
   19.3 独立流行（Young Rising Sons · ax-flow）：清亮、轻盈、弹性快
   ===================================================================== */
.theme-ax-flow{
  --ax-accent:#a3e635;--ax-accent-2:#34d399;--ax-radius:18px;
  --ax-ease-out:cubic-bezier(.2,1.25,.3,1);
  --ax-dur-in:.62s;
}
.theme-ax-flow .ax-blobs{opacity:.46}
.theme-ax-flow .ax-blob{filter:blur(96px);animation-duration:22s}
.theme-ax-flow .ax-blob.b1{background:radial-gradient(circle,rgba(163,230,53,.42),transparent 64%)}
.theme-ax-flow .ax-blob.b2{background:radial-gradient(circle,rgba(52,211,153,.36),transparent 64%);animation-duration:26s}
.theme-ax-flow .ax-blob.b3{background:radial-gradient(circle,rgba(253,224,71,.3),transparent 64%);animation-duration:30s}
html.theme-ax-flow.ax-js [data-ax]{transform:translate3d(0,26px,0)}
html.theme-ax-flow.ax-js [data-ax="zoom"]{transform:scale(.965)}
.theme-ax-flow .ax-progress{
  height:3px;
  background:linear-gradient(90deg,#a3e635,#34d399 55%,#fde047);
  box-shadow:0 0 12px rgba(163,230,53,.6);
}
.theme-ax-flow.ax-scrolled .topbar{box-shadow:0 12px 32px -24px rgba(20,40,60,.55);backdrop-filter:blur(15px)}
.theme-ax-flow .ax-eq i{background:#a3e635;animation-duration:.86s}
.theme-ax-flow .ax-eq i:nth-child(2){background:#34d399}
.theme-ax-flow .ax-eq i:nth-child(3){background:#fde047}
.theme-ax-flow .ax-eq i:nth-child(4){background:#a3e635}
.theme-ax-flow .ax-drop{transition-duration:.62s}
.theme-ax-flow .ax-drop.ax-hover{
  transform:translateY(-9px);
  box-shadow:0 32px 60px -34px rgba(26,52,78,.42);
}
.theme-ax-flow .rcard:hover .rcover img{transform:scale(1.06)}
.theme-ax-flow .sec-h::before{background:linear-gradient(90deg,#a3e635,#34d399)}
.theme-ax-flow .tbl tbody tr:hover{background:rgba(163,230,53,.12);box-shadow:inset 3px 0 0 #a3e635}
.theme-ax-flow .tracklist li:hover{background:rgba(52,211,153,.12)}
.theme-ax-flow .hero h1 .brand-b{color:#a3e635}
.theme-ax-flow .ax-top:hover{background:linear-gradient(140deg,#a3e635,#34d399);color:#101828}
.theme-ax-flow .ax-cl-item::after{background:#a3e635}
.theme-ax-flow .ax-cl-item:hover{background:rgba(163,230,53,.08)}
.theme-ax-flow .hero-art::after{
  inset:-12%;filter:blur(38px);animation-duration:8s;
  background:radial-gradient(circle at 50% 45%,rgba(163,230,53,.3),rgba(52,211,153,.16) 46%,transparent 72%);
}
.theme-ax-flow .hero-art::before{animation-duration:7.6s}
.theme-ax-flow .ax-hero-img{
  animation-duration:7.6s;
  box-shadow:0 38px 74px -38px rgba(22,48,34,.8), 0 8px 20px -11px rgba(0,0,0,.42);
}
.theme-ax-flow .ax-hero-img{
  box-shadow:0 38px 74px -38px rgba(22,48,34,.8), 0 8px 20px -11px rgba(0,0,0,.42);
}


/* =====================================================================
   第八部分：同系列站点互链
   ===================================================================== */
.ax-series .sec-sub{margin-bottom:20px}
.ax-series-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ax-gap);list-style:none;margin:0;padding:0;
}
.ax-series-list li{
  border:1px solid var(--line);border-radius:var(--ax-radius);padding:18px 20px;background:#fff;
  transition:transform .45s var(--ax-ease-out), box-shadow .45s var(--ax-ease-out), border-color .35s;
}
.ax-series-list li:hover{transform:translateY(-5px);box-shadow:0 22px 44px -28px rgba(20,40,60,.4);border-color:var(--ax-accent)}
.ax-series-list a{display:block;text-decoration:none;color:inherit}
.ax-series-list strong{display:block;font-size:1rem;margin-bottom:6px;line-height:1.45}
.ax-series-list span{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.7}
.ax-series-list em{
  display:inline-block;margin-top:10px;font-style:normal;font-size:.7rem;font-weight:700;
  color:var(--ax-accent);border:1px solid var(--ax-accent);border-radius:999px;padding:2px 10px;
}
.ax-series-cur{border-style:dashed;background:rgba(56,189,248,.04)}
.ax-series-cur strong{color:var(--ink-2)}
@media (max-width:820px){ .ax-series-list{grid-template-columns:1fr} }

/* =====================================================================
   第五部分：降级（全局）
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ax-hero-step,.ax-drop,.ax-focus,.ax-wipe,.ax-row,.ax-mask > span{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .ax-blobs,.ax-progress{display:none}
  .ax-sonic{position:static;transform:none;width:auto;margin:20px 0}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html.ax-js img:not(.ax-img-in){opacity:1}
}