/* 资料页共用的景深动画。页面原有样式不变，这里只叠加动效。 */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-page-out .35s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: fx-page-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fx-page-out { to { opacity: 0; transform: perspective(1200px) translateZ(-120px); } }
@keyframes fx-page-in  { from { opacity: 0; transform: perspective(1200px) translateZ(80px) translateY(24px); } }

/* 阅读进度条 */
.fx-progress {
  position: fixed; left: 0; top: 0; z-index: 60;
  height: 3px; width: 100%;
  background: var(--fx-acc, #1f4e9c);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* 首屏：背景光斑分层 + 内容随滚动后退 */
.fx-hero { position: relative; overflow: hidden; }
.fx-hero > :not(.fx-orb) { position: relative; z-index: 1; will-change: transform, opacity; }
.fx-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 35% 35%, var(--fx-acc-a, rgba(31,78,156,.30)), transparent 68%);
  will-change: transform;
}
.fx-orb.o2 { background: radial-gradient(circle at 50% 50%, var(--fx-acc-b, rgba(31,78,156,.18)), transparent 70%); }
.fx-orb.o3 { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.75), transparent 65%); }

/* 滚动入场：普通块带透视翻入，含图表的块只做位移（不影响图表测量宽度） */
.fx .fx-r {
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 46px, 0) rotateX(12deg);
  transform-origin: 50% 0;
  transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.fx .fx-r.fx-flat { transform: translate3d(0, 40px, 0); }
.fx .fx-r.fx-side { transform: perspective(1000px) translate3d(-34px, 0, 0) rotateY(10deg); transform-origin: 0 50%; }
.fx .fx-r.fx-in { opacity: 1; transform: none; }

/* 3D 倾斜 */
.fx-tilt { transform-style: preserve-3d; will-change: transform; }
.fx-tilt.fx-in { transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.fx-tilt.fx-tilting { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 22px 48px rgba(0,0,0,.14) !important; }
.fx-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 55%);
  opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
}
.fx-tilting > .fx-glare { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .fx .fx-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-orb, .fx-progress { display: none; }
}