/* ============================================================
   琉星羽 · 动效与节奏层
   开屏动画 / 滚动进度 / 错峰揭示 / 动态凸显 / 互动反馈
   仅在 .js（启用 JS）时生效，无 JS 或开启「减少动态」时全部降级为静态
   ============================================================ */

/* ---------- 开屏：先黑屏待命 → JS 确认 Logo 就绪后加 .play 才播放 ---------- */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 46%, #15122b 0%, #08060f 62%, #05040c 100%);
  will-change: opacity, visibility;
  opacity: 1; visibility: visible;
}
/* 仅在 Logo 就绪后由 JS 加 .play 触发，避免动画播完图还没加载 */
.splash.play { -webkit-animation: splashMask 2.9s var(--ease-out) forwards; animation: splashMask 2.9s var(--ease-out) forwards; }
.splash-logo {
  width: 132px; height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 0 44px rgba(143, 131, 240, 0.55));
  opacity: 1;                 /* 默认可见：即便动画引擎未接管也不至于只剩黑屏 */
  will-change: opacity, transform, filter;
}
@media (min-width: 480px) { .splash-logo { width: 150px; height: 150px; } }
@media (min-width: 768px) { .splash-logo { width: 168px; height: 168px; } }
/* both：动画未接管时回退到默认可见态，杜绝 logo 永久透明 */
.splash.play .splash-logo { -webkit-animation: splashLogo 2.55s var(--ease-out) both; animation: splashLogo 2.55s var(--ease-out) both; }
@keyframes splashLogo {
  0%   { opacity: 0; transform: scale(0.84); filter: drop-shadow(0 0 0 rgba(143,131,240,0)); }
  20%  { opacity: 1; transform: scale(1);    filter: drop-shadow(0 0 44px rgba(143,131,240,0.55)); }
  62%  { opacity: 1; transform: scale(1.02); filter: drop-shadow(0 0 56px rgba(217,180,92,0.4)); }
  100% { opacity: 0; transform: scale(1.06); filter: drop-shadow(0 0 80px rgba(217,180,92,0)); }
}
@keyframes splashMask {
  0%   { opacity: 1; visibility: visible; }
  82%  { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* 开屏期间锁定滚动，结束后由 JS 移除 */
html.splash-active, html.splash-active body { overflow: hidden; height: 100%; }

/* ---------- 顶部滚动进度条 ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
  box-shadow: 0 0 12px rgba(143, 131, 240, 0.6);
  transition: width 0.1s linear;
}

/* ---------- 错峰揭示：默认位移 + 透明度，进入视口按 --rd 节奏显现 ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

/* 章节标题：进入时下方细线由左向右生长（动态凸显） */
.js .section-head h2 { position: relative; }
.js .section-head h2::after {
  content: ""; display: block; width: 0; height: 2px; margin-top: 14px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  transition: width 0.9s var(--ease-out) 0.15s;
  transition-delay: var(--rd, 0s);
}
.js .section-head.in h2::after { width: 88px; }

/* Hero 首屏：开屏结束后，子元素按节奏依次上浮（不依赖滚动） */
.js .hero-content > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
body.loaded .hero-content > * { opacity: 1; transform: none; }

/* 顶部导航：开屏结束后逐条渐入 */
.js .site-nav .nav-brand,
.js .site-nav .nav-links li,
.js .site-nav .nav-toggle {
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
body.loaded .site-nav .nav-brand,
body.loaded .site-nav .nav-links li,
body.loaded .site-nav .nav-toggle { opacity: 1; transform: none; }

/* ---------- 互动反馈：可倾斜卡片 + 按压回弹 ---------- */
.js .tiltable { transform-style: preserve-3d; }
.js .tiltable.reveal { transform: translateY(30px); }
.js .tiltable.reveal.in { transform: none; }

.btn, .shot-card.cta, .brand-card, .feature-card, .mascot-figure, .open-col {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.95); }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.28), transparent 45%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.btn { position: relative; overflow: hidden; }
.btn:hover::after { opacity: 1; }
.feature-card:hover, .brand-card:hover, .mascot-figure:hover, .open-col:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2), var(--glow-accent);
  border-color: var(--color-border-strong);
}

/* 跑马灯关键词：悬停高亮放大 */
.marquee-track span {
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.marquee-track span:hover { color: var(--color-gold); transform: scale(1.08); }

/* 演示窗：鼠标移动时轻微磁吸跟随（由 JS 注入角度） */
.app-win { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.app-win:hover { box-shadow: var(--shadow-3), var(--glow-accent); }

/* ---------- 降级：减少动态效果时全部静态呈现 ---------- */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none !important; }
  .js .reveal,
  .js .hero-content > *,
  .js .site-nav .nav-brand,
  .js .site-nav .nav-links li,
  .js .site-nav .nav-toggle { opacity: 1 !important; transform: none !important; }
  .js .section-head h2::after { width: 88px !important; transition: none !important; }
  .marquee-track { animation: none !important; }
  .btn, .feature-card, .brand-card, .mascot-figure, .open-col, .app-win { transition: none !important; }
  .btn:hover::after { opacity: 0 !important; }
}