/* 808音频工作室 · 运动与视觉增强（v19 轻量版）
 * 配合 assets/js/motion.js 使用
 * 动态模糊与光标柔光已移除（卡顿优化）。
 */

/* ---------- 顶部滚动进度条 ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 9999;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none; opacity: .92;
}

/* ---------- 滚动揭示（错落入场） ---------- */
.motion-ready [data-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .78s cubic-bezier(.16, .86, .32, 1) var(--rv-d, 0ms),
    transform .78s cubic-bezier(.16, .86, .32, 1) var(--rv-d, 0ms);
}
.motion-ready [data-rv].rv-in { opacity: 1; transform: none; }

/* 聚光容器需要定位上下文。
   v29：以前用 JS 逐个 getComputedStyle 判断后内联 position，
   会在每次扫描时触发一轮强制样式重算，改为样式直接声明。 */
[data-rv].spot { position: relative; }

/* ---------- 卡片聚光 ---------- */
.spotlight {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .32s ease; z-index: 2;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 68%);
}
.spot:hover > .spotlight { opacity: 1; }

/* ---------- 首屏：入场 + 颗粒质感 ---------- */
.hero-inner > * { animation: heroIn .9s cubic-bezier(.16, .86, .32, 1) backwards; }
.hero-inner > *:nth-child(1) { animation-delay: .06s; }
.hero-inner > *:nth-child(2) { animation-delay: .14s; }
.hero-inner > *:nth-child(3) { animation-delay: .22s; }
.hero-inner > *:nth-child(4) { animation-delay: .30s; }
.hero-inner > *:nth-child(5) { animation-delay: .38s; }
.hero-inner > *:nth-child(6) { animation-delay: .46s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* 首屏滚动提示呼吸 */
.hero-scroll { animation: scrollBreath 2.4s ease-in-out infinite; }
@keyframes scrollBreath { 0%, 100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(6px); } }

/* ---------- 降级：系统开启减弱动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-inner > * { animation: none; }
  .hero-scroll { animation: none; }
  .scroll-progress { transition: none; }
}