/* Orbit · 交互动画层
 * 原则：克制的 Apple 风格反馈，不遮挡内容、不改变布局、不拖慢滚动。
 * 所有动效在 prefers-reduced-motion / 触屏设备上自动降级。
 */

/* ── 1. 收藏 / 点赞粒子迸发 ─────────────────────────── */
.orbit-burst { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.orbit-particle {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: 0;
  animation: orbit-burst .72s cubic-bezier(.18, .78, .28, 1) forwards;
}
.orbit-particle.star {
  width: 13px; height: 13px; border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes orbit-burst {
  0%   { transform: translate(-50%, -50%) scale(.25) rotate(0deg); opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx, 40px)), calc(-50% + var(--ty, -40px))) scale(.35) rotate(var(--rot, 180deg)); opacity: 0; }
}

/* ── 2. 卡片跟随鼠标微倾 + 高光 ─────────────────────── */
.tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42), transparent 62%);
}
.tilt:hover::after { opacity: 1; }
[data-theme="dark"] .tilt::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(120, 170, 255, .18), transparent 62%);
}

/* ── 3. 主题切换光波 ─────────────────────────────────── */
.orbit-wave {
  position: fixed; left: var(--wx, 50%); top: var(--wy, 50%);
  width: 100vmax; height: 100vmax; border-radius: 50%;
  pointer-events: none; z-index: 9998; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(0, 113, 227, .2), rgba(124, 92, 255, .12) 48%, transparent 68%);
  animation: orbit-wave .72s cubic-bezier(.2, .7, .3, 1) forwards;
}
[data-theme="dark"] .orbit-wave {
  background: radial-gradient(circle, rgba(10, 132, 255, .22), rgba(124, 92, 255, .14) 48%, transparent 68%);
}
@keyframes orbit-wave {
  from { transform: translate(-50%, -50%) scale(0); opacity: .95; }
  to   { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ── 4. 数字滚动 ─────────────────────────────────────── */
.stat b { font-variant-numeric: tabular-nums; transition: color .25s ease; }
.stat b.counting { color: var(--blue); }

/* ── 5. 搜索提示轮播 + 交错入场 ─────────────────────── */
#heroSearch::placeholder { transition: opacity .26s ease; }
#heroSearch.ph-fade::placeholder { opacity: 0; }
.orbit-stagger { animation: orbit-rise .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes orbit-rise {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── 6. 滚动进度条与回到顶部 ─────────────────────────── */
#orbitProgress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 1000;
  pointer-events: none; background: linear-gradient(90deg, #0071e3, #7c5cff 55%, #ff6482);
  box-shadow: 0 0 10px rgba(0, 113, 227, .45); transition: width .08s linear;
}
#orbitTop {
  position: fixed; right: 22px; bottom: 88px; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center; z-index: 90;
  font-size: 19px; line-height: 1; color: var(--blue);
  background: var(--bg-elev); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
#orbitTop.show { opacity: 1; transform: none; pointer-events: auto; }
#orbitTop:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }

/* ── 7. 页面切换淡入 + 彩蛋星星雨 ───────────────────── */
#view.orbit-enter { animation: orbit-view-in .28s ease both; }
@keyframes orbit-view-in {
  from { opacity: .35; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.orbit-starry {
  position: fixed; top: -30px; z-index: 9997; pointer-events: none;
  animation-name: orbit-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes orbit-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* ── 可访问性：跳转链接与键盘焦点 ─────────────────── */
.skip-link {
  position: fixed; top: -64px; left: 16px; z-index: 10000;
  padding: 10px 16px; border-radius: 10px; background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* 触屏不做 3D 倾斜；减少动态效果时全部关闭 */
@media (hover: none), (pointer: coarse) {
  .tilt::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-burst, .orbit-wave, .orbit-starry, .orbit-stagger, #view.orbit-enter { animation: none !important; display: none !important; }
  #orbitProgress, #orbitTop, .stat b, #heroSearch::placeholder { transition: none !important; }
  .tilt { transform: none !important; }
}