/* ============================================
   Tea & Coffee · 全站科幻特效层（茶咖暖色 × 赛博）
   星尘粒子 / 极光光晕 / 扫描光束 / 流星
   光标辉光 / 点击涟漪 / 星链连线 / 卡片倾斜
   按钮磁吸 / 标题故障风
   ============================================ */

/* ---- 星尘画布（粒子 / 流星 / 星链） ---- */
.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- 极光渐变光晕 ---- */
.fx-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
  pointer-events: none;
  opacity: .22;
  animation: fx-blob-float 26s ease-in-out infinite alternate;
  will-change: transform;
}
.fx-blob-1 {
  width: 46vw; height: 46vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, rgba(212,168,67,.55), transparent 70%);
}
.fx-blob-2 {
  width: 40vw; height: 40vw; right: -10vw; top: 28vh;
  background: radial-gradient(circle, rgba(0,229,208,.38), transparent 70%);
  animation-duration: 32s; animation-delay: -9s;
}
.fx-blob-3 {
  width: 36vw; height: 36vw; left: 22vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(157,107,255,.30), transparent 70%);
  animation-duration: 38s; animation-delay: -18s;
}
@keyframes fx-blob-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, 4vh) scale(1.18); }
}
body.dark .fx-blob { opacity: .4; }
@media (prefers-color-scheme: dark) {
  body:not(.fx-theme-site) .fx-blob { opacity: .4; }
}

/* ---- 扫描光束（缓缓扫过全屏的水平光带） ---- */
.fx-scanline {
  position: fixed; left: 0; right: 0; top: 0; height: 24vh;
  background: linear-gradient(180deg, transparent,
    rgba(0,229,208,.045) 35%, rgba(212,168,67,.085) 55%, transparent);
  z-index: 9996; pointer-events: none;
  transform: translateY(-30vh);
  animation: fx-sweep 19s linear infinite;
}
@keyframes fx-sweep {
  0%   { transform: translateY(-30vh); opacity: 0; }
  3%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(115vh); opacity: 0; }
}

/* ---- 光标辉光（跟随鼠标的柔光） ---- */
.fx-cursor-glow {
  position: fixed; left: 0; top: 0;
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(212,168,67,.14), rgba(0,229,208,.05) 45%, transparent 70%);
}
body.fx-glow-on .fx-cursor-glow { opacity: 1; }
body.dark .fx-cursor-glow {
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(0,229,208,.17), rgba(212,168,67,.10) 45%, transparent 70%);
}
@media (prefers-color-scheme: dark) {
  body:not(.fx-theme-site) .fx-cursor-glow {
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(0,229,208,.17), rgba(212,168,67,.10) 45%, transparent 70%);
  }
}

/* ---- 点击涟漪（霓虹扩散环） ---- */
.fx-ripple {
  position: fixed; border-radius: 50%;
  border: 1.5px solid rgba(0,229,208,.75);
  box-shadow: 0 0 16px rgba(0,229,208,.45), inset 0 0 10px rgba(212,168,67,.30);
  pointer-events: none; z-index: 9997;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  animation: fx-ripple .85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fx-ripple {
  from { width: 8px; height: 8px; margin: -4px 0 0 -4px; opacity: 1; }
  to   { width: 190px; height: 190px; margin: -95px 0 0 -95px; opacity: 0; }
}

/* ---- 卡片 3D 倾斜 + 霓虹描边 ---- */
.fx-tilting {
  transition: transform .18s ease, box-shadow .35s ease !important;
  box-shadow: 0 10px 34px rgba(0,229,208,.14), 0 6px 22px rgba(212,168,67,.12) !important;
}

/* ---- 标题故障风（周期性色差抖动） ---- */
.fx-glitch { animation: fx-glitch 9s infinite; }
@keyframes fx-glitch {
  0%, 91.9%, 100% { text-shadow: none; transform: none; }
  92%  { text-shadow: -2px 0 rgba(0,229,208,.85), 2px 0 rgba(157,107,255,.85); transform: skewX(-5deg); }
  92.6%{ text-shadow: 2px 0 rgba(0,229,208,.85), -2px 0 rgba(212,168,67,.85); transform: skewX(4deg); }
  93.2%{ text-shadow: none; transform: none; }
  93.8%{ text-shadow: -1px 0 rgba(0,229,208,.8), 1px 0 rgba(157,107,255,.8); }
  94.4%{ text-shadow: none; }
}

/* ---- 动效减弱（无障碍） ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-blob, .fx-scanline, .fx-glitch { animation: none !important; }
  .fx-cursor-glow, .fx-ripple { display: none !important; }
}