/* ═══════════════════════════════════════════════════════════════
   Q 弹动效 + 全站循环动画背景
   在 portal.css 之后加载：覆盖缓动曲线、让纸面透出动画层
   ═══════════════════════════════════════════════════════════════ */
:root{
  --sp:cubic-bezier(.34,1.56,.64,1);          /* 标准 Q 弹：带过冲 */
  --sp-soft:cubic-bezier(.22,1.25,.36,1);     /* 轻回弹 */
  --beat:.8333s;                              /* 背景音乐 72 BPM，控件与之同拍 */
  --loop:24s;                                 /* 背景动画循环周期 */
}

/* ── 循环动画背景层 ──────────────────────────────────── */
html{background:#F7F4ED}
body{background:transparent}
.ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.ambient--top{z-index:7400}
.main,.footer{position:relative;z-index:1}
/* 让纸面区块透出底下的流动光晕，文字仍保持高对比 */
.blk--alt{background:rgba(239,235,224,.62)}
.scf,.tbl-wrap{background:rgba(255,255,255,.94)}
.spring-glow{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.55),rgba(200,154,69,.13) 42%,transparent 70%);
  mix-blend-mode:soft-light;pointer-events:none;z-index:7450;opacity:0;
  transform:translate3d(-50%,-50%,0);will-change:transform;transition:opacity .5s}

/* 首页 Hero / 内页页头：多层持续循环（永不停止的推镜、流光、呼吸） */
.hero__slide img{transform:none;transition:none;
  animation:kenLoop 18s ease-in-out infinite alternate;will-change:transform}
.hero__slide:nth-child(2) img{animation-duration:21s;animation-delay:-4s}
.hero__slide:nth-child(3) img{animation-duration:24s;animation-delay:-9s}
.hero__slide:nth-child(4) img{animation-duration:20s;animation-delay:-13s}
.hero__slide:nth-child(5) img{animation-duration:23s;animation-delay:-6s}
.hero__slide:nth-child(6) img{animation-duration:19s;animation-delay:-15s}
.hero__slide.is-on img{transform:none;transition:none}
@keyframes kenLoop{
  0%{transform:scale(1.04) translate3d(-1.4%,.8%,0)}
  100%{transform:scale(1.19) translate3d(1.6%,-1.2%,0)}
}
.hero__aura,.ph__aura{position:absolute;inset:-25%;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.42;
  background:
    radial-gradient(38% 42% at 22% 32%,rgba(200,154,69,.42),transparent 70%),
    radial-gradient(34% 38% at 74% 62%,rgba(181,52,42,.30),transparent 72%),
    radial-gradient(30% 30% at 52% 14%,rgba(62,124,166,.24),transparent 72%);
  animation:auraFloat var(--loop) ease-in-out infinite alternate;
  will-change:transform}
@keyframes auraFloat{
  0%{transform:translate3d(-4%,2%,0) scale(1) rotate(-2deg)}
  100%{transform:translate3d(5%,-3%,0) scale(1.14) rotate(2deg)}
}
.hero__veil,.ph__veil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;
  background:linear-gradient(110deg,transparent 35%,rgba(255,236,196,.55) 49%,transparent 63%);
  background-size:260% 100%;animation:veilRun 11s linear infinite}
@keyframes veilRun{from{background-position:180% 0}to{background-position:-80% 0}}
.ph__bg img{animation:phLoop 22s ease-in-out infinite alternate;transform-origin:60% 50%;will-change:transform}
@keyframes phLoop{0%{transform:scale(1.02) translateX(-1%)}100%{transform:scale(1.16) translateX(1.4%)}}
.hero__grain{animation:grainDrift 7s steps(7) infinite}
@keyframes grainDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(4px,-4px,0)}}

/* ── Q 弹：统一缓动与过冲 ─────────────────────────────── */
.btn{transition:transform .48s var(--sp),background .35s,color .35s,box-shadow .48s var(--sp)}
.btn:hover{transform:translateY(-5px) scale(1.035)}
.btn:active{transform:translateY(-1px) scale(.965)}
.btn svg{transition:transform .48s var(--sp)}
.btn:hover svg{transform:translateX(6px) rotate(-9deg)}
.nav__cta{transition:background .35s,transform .5s var(--sp),box-shadow .5s var(--sp)}
.nav__cta:hover{transform:translateY(-3px) scale(1.06)}
.nav__links>a{transition:color .3s,transform .4s var(--sp)}
.nav__links>a:hover{transform:translateY(-2px)}
.nav__links>a::after{transition:right .45s var(--sp)}
.nav__drop-menu{transition:opacity .35s var(--sp),transform .5s var(--sp),visibility .35s}
.nav__drop.is-open .nav__drop-menu{transform:none}
.nav__drop-item{transition:background .25s,transform .4s var(--sp)}
.nav__drop-item:hover{transform:translateX(5px)}
.nav__burger i{transition:.45s var(--sp)}

.menu{transition:opacity .42s var(--e-out),transform .62s var(--sp),visibility .42s}
.menu__list a{transition:color .3s,padding-left .48s var(--sp),transform .48s var(--sp)}
.menu.is-open .menu__list a{animation:menuPop .58s var(--sp) both}
.menu.is-open .menu__list a:nth-child(1){animation-delay:.05s}
.menu.is-open .menu__list a:nth-child(2){animation-delay:.1s}
.menu.is-open .menu__list a:nth-child(3){animation-delay:.15s}
.menu.is-open .menu__list a:nth-child(4){animation-delay:.2s}
.menu.is-open .menu__list a:nth-child(5){animation-delay:.25s}
.menu.is-open .menu__list a:nth-child(6){animation-delay:.3s}
@keyframes menuPop{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
.menu__roles a{transition:background .3s,transform .45s var(--sp)}
.menu__roles a:hover{transform:scale(1.08) rotate(-2deg)}

.xfig,.fav__item,.card,.statbar__item,.chip,.pc-pick,.hero__arrow,.hero__dot,.sound__btn,.acc__q{
  transition:transform .5s var(--sp),box-shadow .5s var(--sp),background .35s,border-color .35s,color .35s,opacity .35s}
.xfig:hover,.fav__item:hover,.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 60px rgba(34,30,24,.19)}
.xfig:hover .xfig__m img,.fav__item:hover img{transform:scale(1.09)}
.xfig__m img,.fav__item img{transition:transform .75s var(--sp-soft)}
.hero__arrow:hover{transform:scale(1.18) rotate(-8deg)}
.hero__dot{transition:width .55s var(--sp),background .35s}
.hero__dot.is-on{width:52px}
.chip:hover,.pc-pick:hover{transform:translateY(-3px) scale(1.05)}
.acc__q:hover{transform:translateX(4px)}
.acc__q svg{transition:transform .5s var(--sp)}
.statbar__item:hover{transform:translateY(-4px)}
.footer__cols a{transition:color .25s,transform .42s var(--sp)}
.footer__cols a:hover{transform:translateX(5px)}
.tl__item,.kv>div{transition:transform .5s var(--sp),background .3s}
.tl__item:hover,.kv>div:hover{transform:translateX(5px)}
.rv{opacity:0;transform:translateY(34px) scale(.975);
  transition:opacity .72s var(--e-out),transform .85s var(--sp)}
.rv.is-in{opacity:1;transform:none}
/* 带 .rv 的元素入场后仍保留 Q 弹 hover（.rv.is-in 与 :hover 同优先级，需提高权重） */
.btn.rv.is-in:hover{transform:translateY(-5px) scale(1.035)}
.btn.rv.is-in:active{transform:translateY(-1px) scale(.965)}
.xfig.rv.is-in:hover,.fav__item.rv.is-in:hover,.card.rv.is-in:hover,
.xfig:hover,.fav__item:hover,.card:hover{
  transform:perspective(1000px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-8px) scale(1.02);
  box-shadow:0 26px 60px rgba(34,30,24,.19)}

/* 3D 轻倾斜（桌面端，由 motion.js 写入 --tx/--ty） */
@media(hover:hover) and (pointer:fine){
  .tilt{transform:perspective(1000px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-8px) scale(1.02)}
}

/* 点击果冻：由 JS 触发的 WAAPI 关键帧（CSS 同步定义一份给降级环境） */
@keyframes jelly{
  0%{transform:scale(1,1)}
  26%{transform:scale(.93,1.07)}
  52%{transform:scale(1.07,.95)}
  76%{transform:scale(.98,1.02)}
  100%{transform:scale(1,1)}
}
.is-jelly{animation:jelly .44s var(--e-out)}

/* 幕布转场：上冲后回落一次，退出时先下坠再弹走 */
.curtain.is-in{animation:curtainIn .68s cubic-bezier(.24,.85,.32,1) forwards}
.curtain.is-out{animation:curtainOut .78s cubic-bezier(.55,0,.3,1) forwards}
@keyframes curtainIn{
  0%{transform:translateY(101%)}
  70%{transform:translateY(-2.6%)}
  86%{transform:translateY(1.2%)}
  100%{transform:translateY(0)}
}
@keyframes curtainOut{
  0%{transform:translateY(0)}
  16%{transform:translateY(3.2%)}
  100%{transform:translateY(-101%)}
}
.curtain__in{animation:none}
.curtain.is-in .curtain__in{animation:curtainTxtIn .55s var(--sp) .16s forwards}
.curtain.is-out .curtain__in{animation:curtainTxtOut .3s linear forwards}
@keyframes curtainTxtIn{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
@keyframes curtainTxtOut{to{opacity:0;transform:translateY(-14px) scale(1.03)}}
.curtain__mark{animation:markBob 1.6s var(--sp-soft) infinite alternate}
@keyframes markBob{from{transform:translateY(4px) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}

/* 标题逐个弹入 */
@keyframes charIn{
  0%{opacity:0;transform:translateY(.55em) rotate(8deg) scale(.85);filter:blur(6px)}
  68%{opacity:1;transform:translateY(-.07em) rotate(-2deg) scale(1.06);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.hero.is-in .hero__line .ch{animation:charIn .92s cubic-bezier(.3,.9,.4,1) forwards;
  animation-delay:calc(var(--i) * 55ms + 250ms)}
.hero__scroll i{animation:scrollDrop 2.2s var(--sp-soft) infinite}
@keyframes scrollDrop{0%,100%{transform:scaleY(.55);transform-origin:top}50%{transform:scaleY(1)}}

/* 开屏校徽呼吸 + 进度条 Q 弹 */
.loader__mark{animation:markPulse 1.6s var(--sp-soft) infinite alternate}
@keyframes markPulse{from{transform:scale(.94) rotate(-4deg);opacity:.75}to{transform:scale(1.1) rotate(4deg);opacity:1}}
.loader__bar i{transition:width .22s var(--sp)}

/* 音乐控件：与 72BPM 同拍，红胶唱片般呼吸 */
.sound__btn:hover{transform:scale(1.14) rotate(-8deg)}
.sound.is-on .sound__btn{animation:soundBreath calc(var(--beat) * 4) ease-in-out infinite}
@keyframes soundBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.sound.is-on .sound__btn::after{animation:soundRing calc(var(--beat) * 3) ease-out infinite}
.sound.is-on .sound__bars i{animation:barBounce var(--beat) ease-in-out infinite alternate}
.sound.is-hint .sound__hint{animation:hintPop .6s var(--sp)}
@keyframes hintPop{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.toast{transition:opacity .4s var(--sp),transform .5s var(--sp)}

/* ── 降级：尊重系统「减少动态效果」但不关掉作品的核心动效 ──
   循环背景与幕布保留，速度降到 1/4、幅度与透明度减半；
   文字直接可读、去掉逐个弹入，光斑与 3D 倾斜停用。 */
@media(prefers-reduced-motion:reduce){
  .ambient,.ambient--top{opacity:.62}
  .spring-glow{display:none!important}
  .hero__slide img,.ph__bg img{animation-duration:72s!important;animation-iteration-count:infinite!important}
  .hero__aura,.ph__aura{animation-duration:96s!important;animation-iteration-count:infinite!important;opacity:.2!important}
  .hero__veil,.ph__veil{animation-duration:44s!important;animation-iteration-count:infinite!important;opacity:.12!important}
  .hero__grain{animation:none!important}
  .rv{opacity:1!important;transform:none!important}
  .hero__line .ch{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .menu.is-open .menu__list a,.sound.is-on .sound__btn,.curtain__mark,.loader__mark{animation:none!important}
  .curtain{display:block!important}
  .curtain.is-in,.curtain.is-out{animation-duration:.62s!important;animation-iteration-count:1!important}
  .btn,.xfig,.fav__item,.card,.nav__cta,.sound__btn{transition-duration:.18s!important}
}
@media(max-width:720px){
  .spring-glow{display:none}
  .hero__aura,.ph__aura{opacity:.34}
}