/* =====================================================================
   ax-anim.css — 站点动画层（两站共用）
   前缀 ax- 避免与原样式冲突；全部动效在 prefers-reduced-motion 下降级
   ===================================================================== */

/* ---------- 0. 基础与变量 ---------- */
: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);
}
html.ax-js [data-ax]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ax-ease-out), transform .8s var(--ax-ease-out);
  transition-delay:var(--ax-delay,0ms);
  will-change:opacity, transform;
}
html.ax-js [data-ax="left"]{transform:translate3d(-30px,0,0)}
html.ax-js [data-ax="right"]{transform:translate3d(30px,0,0)}
html.ax-js [data-ax="zoom"]{transform:scale(.94)}
html.ax-js [data-ax="blur"]{filter:blur(10px);transform:translate3d(0,18px,0)}
html.ax-js [data-ax].ax-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* ---------- 1. 环境光斑（页面背景呼吸） ---------- */
.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(70px);opacity:.5;
  animation:axFloat 22s var(--ax-ease) infinite alternate;
}
.ax-blob.b1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,rgba(56,189,248,.42),transparent 65%)}
.ax-blob.b2{width:38vmax;height:38vmax;right:-10vmax;top:18vh;background:radial-gradient(circle,rgba(249,115,22,.34),transparent 65%);animation-duration:27s;animation-delay:-6s}
.ax-blob.b3{width:34vmax;height:34vmax;left:32vw;bottom:-16vmax;background:radial-gradient(circle,rgba(139,92,246,.3),transparent 65%);animation-duration:31s;animation-delay:-13s}
@keyframes axFloat{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vmax,-3vmax,0) scale(1.12)}
  100%{transform:translate3d(-3vmax,4vmax,0) scale(.95)}
}
.ax-capable .ax-blobs{opacity:1}
body > main, body > header, body > footer, body > .aibar{position:relative;z-index:1}

/* ---------- 2. 顶栏：滚动后的收缩与阴影 ---------- */
.topbar{transition:box-shadow .4s var(--ax-ease), backdrop-filter .4s var(--ax-ease), background .4s var(--ax-ease)}
.ax-scrolled .topbar{
  box-shadow:0 14px 34px -22px rgba(0,0,0,.7);
  backdrop-filter:blur(14px) saturate(1.2);
}
.ax-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,#38bdf8,#a78bfa 45%,#f97316);
  box-shadow:0 0 12px rgba(56,189,248,.6);
  transition:width .12s linear;
}

/* ---------- 3. 品牌 logo 的均衡器跳动 ---------- */
.ax-eq{
  display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-left:8px;vertical-align:middle;
}
.ax-eq i{
  display:block;width:3px;border-radius:2px;background:currentColor;opacity:.9;
  animation:axEq .9s ease-in-out infinite;
}
.ax-eq i:nth-child(1){height:5px;animation-delay:0s}
.ax-eq i:nth-child(2){height:11px;animation-delay:.15s}
.ax-eq i:nth-child(3){height:7px;animation-delay:.3s}
.ax-eq i:nth-child(4){height:12px;animation-delay:.45s}
@keyframes axEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- 4. Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-txt > *{animation:axRiseIn .9s var(--ax-ease-out) both}
.hero-txt > *:nth-child(1){animation-delay:.05s}
.hero-txt > *:nth-child(2){animation-delay:.14s}
.hero-txt > *:nth-child(3){animation-delay:.23s}
.hero-txt > *:nth-child(4){animation-delay:.32s}
.hero-txt > *:nth-child(5){animation-delay:.41s}
.hero-txt > *:nth-child(6){animation-delay:.5s}
@keyframes axRiseIn{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:none}}

/* 渐变文字流动 */
.hero h1 .brand-b, .hero h1{
  background-size:220% 100%;
  animation:axShift 9s ease-in-out infinite;
}
@keyframes axShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 唱片封面：缓慢旋转的唱盘 + 悬浮 */
.hero-art{animation:axFloatY 7s ease-in-out infinite}
.hero-art img{transition:transform .6s var(--ax-ease), box-shadow .6s var(--ax-ease)}
.hero-art::before{
  content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(56,189,248,.22),transparent 30%,rgba(249,115,22,.2) 60%,transparent 85%);
  animation:axSpin 16s linear infinite;filter:blur(26px);
}
@keyframes axSpin{to{transform:rotate(360deg)}}
@keyframes axFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-art:hover img{transform:scale(1.03) rotate(-.6deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}

/* 数字统计：进入时的弹跳 */
.hero-stats li{animation:axPop .7s var(--ax-spring) both}
.hero-stats li:nth-child(1){animation-delay:.5s}
.hero-stats li:nth-child(2){animation-delay:.6s}
.hero-stats li:nth-child(3){animation-delay:.7s}
.hero-stats li:nth-child(4){animation-delay:.8s}
@keyframes axPop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
.hero-stats strong{transition:color .3s var(--ax-ease)}
.hero-stats li:hover strong{color:#7dd3fc}

/* ---------- 5. 卡片：错峰入场 + 悬停 3D 微倾 ---------- */
.ax-stagger > *{transition-delay:calc(var(--ax-i,0) * 70ms)}
.rcard,.tile,.how,.member,.award,.src{
  transition:transform .5s var(--ax-ease-out), box-shadow .5s var(--ax-ease-out), border-color .4s var(--ax-ease), background .4s var(--ax-ease);
  transform-style:preserve-3d;
}
.rcard:hover{transform:translateY(-8px) rotateX(3deg)}
.rcard .rcover img{transition:transform .7s var(--ax-ease-out), filter .5s var(--ax-ease)}
.rcard:hover .rcover img{transform:scale(1.07)}
.rcard .rcover{position:relative;overflow:hidden}
.rcard .rcover::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ax-ease-out);
}
.rcard:hover .rcover::after{left:130%}
.tile:hover{transform:translateY(-6px) scale(1.02)}
.tile strong{transition:transform .45s var(--ax-spring), color .3s}
.tile:hover strong{transform:scale(1.12);color:#38bdf8}
.how:hover{transform:translateY(-6px) scale(1.02)}
.member:hover{transform:translateY(-6px)}
.member:hover .member-avatar{transform:scale(1.1) rotate(-6deg)}
.member-avatar{transition:transform .5s var(--ax-spring)}

/* 按钮：光泽扫过 + 按压回弹 */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-130%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .7s var(--ax-ease-out);
}
.btn:hover::after{left:140%}
.btn:active{transform:translateY(1px) scale(.98)}
.listen{transition:transform .3s var(--ax-spring), background .25s, color .25s, border-color .25s}
.listen:hover{transform:translateY(-2px) scale(1.06)}

/* ---------- 6. 表格：行入场 + 悬停高亮 ---------- */
.ax-rows tbody tr{
  opacity:0;transform:translateY(12px);
  animation:axRowIn .5s var(--ax-ease-out) forwards;
  animation-delay:calc(var(--ax-i,0) * 24ms);
}
@keyframes axRowIn{to{opacity:1;transform:none}}
.tbl tbody tr{transition:background .25s var(--ax-ease), box-shadow .25s var(--ax-ease)}
.tbl tbody tr:hover{background:rgba(56,189,248,.09);box-shadow:inset 3px 0 0 #38bdf8}

/* ---------- 7. 曲目表：逐条滑入 ---------- */
.tracklist li{
  opacity:0;transform:translateX(-14px);
  animation:axTrackIn .45s var(--ax-ease-out) forwards;
  animation-delay:calc(var(--ax-i,0) * 30ms);
  transition:background .25s var(--ax-ease), transform .25s var(--ax-ease);
}
@keyframes axTrackIn{to{opacity:1;transform:none}}
.tracklist li:hover{background:rgba(56,189,248,.1);transform:translateX(4px)}

/* ---------- 8. 进度条动画（评分 / 规格） ---------- */
.spec-head strong{position:relative}
.spec-head strong::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
  background:linear-gradient(90deg,#38bdf8,#f97316);
  transform:scaleX(0);transform-origin:left;animation:axUnderline 1.1s var(--ax-ease-out) .3s forwards;
}
@keyframes axUnderline{to{transform:scaleX(1)}}

/* ---------- 9. 回到顶部 ---------- */
.ax-top{
  position:fixed;right:22px;bottom:22px;z-index:55;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(10,14,20,.72);backdrop-filter:blur(10px);color:#e6eef7;
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .4s var(--ax-ease), transform .4s var(--ax-spring), background .3s;
}
.ax-capable .ax-top.ax-show{opacity:1;transform:none;pointer-events:auto}
.ax-top:hover{background:linear-gradient(140deg,#38bdf8,#0ea5e9);color:#04121f;transform:translateY(-3px) scale(1.06)}
.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:-1px;border-radius:50%;
  background:conic-gradient(#38bdf8 var(--ax-p,0%), transparent 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
}

/* ---------- 10. 资料来源卡片：逐张展开 ---------- */
.src{position:relative;overflow:hidden}
.src::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#38bdf8,#8b5cf6);transform:scaleY(0);transform-origin:top;
  transition:transform .6s var(--ax-ease-out);
}
.src:hover::before{transform:scaleY(1)}
.src:hover{transform:translateX(4px)}

/* ---------- 11. 时间线：竖线与节点依次点亮 ---------- */
.timeline li{position:relative}
.timeline li::after{
  content:"";position:absolute;left:-30px;top:8px;width:10px;height:10px;border-radius:50%;
  background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.18);
  opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ax-ease), transform .5s var(--ax-spring);
  transition-delay:var(--ax-delay,0ms);
}
.timeline li.ax-in::after{opacity:1;transform:none}

/* ---------- 12. 图片：懒加载淡入 ---------- */
img{transition:opacity .6s var(--ax-ease), filter .6s var(--ax-ease)}
html.ax-js img:not(.ax-img-in){opacity:0}
img.ax-img-in{opacity:1}

/* ---------- 13. 内联 SVG 曲线：描边动画 ---------- */
.ax-draw path,.ax-draw line,.ax-draw polyline,.ax-draw circle,.ax-draw rect{
  stroke-dasharray:var(--ax-len,1400);
  stroke-dashoffset:var(--ax-len,1400);
  animation:axDraw 2s var(--ax-ease-out) forwards;
}
@keyframes axDraw{to{stroke-dashoffset:0}}

/* ---------- 14. 面板/区块标题的下划线展开 ---------- */
.sec-h::before{transform-origin:left;animation:axUnderline 1s var(--ax-ease-out) both}

/* ---------- 15. 页面进入 ---------- */
body{animation:axPageIn .6s var(--ax-ease-out) both}
@keyframes axPageIn{from{opacity:0}to{opacity:1}}

/* ---------- 16. 降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html.ax-js [data-ax]{opacity:1!important;transform:none!important;filter:none!important}
  .ax-blobs,.ax-progress{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.ax-js img:not(.ax-img-in){opacity:1}
}