/* ============================================
   学习站 · 全站特效层样式（茶绿 × 金 主题）
   ============================================ */

/* ---- 星尘画布 ---- */
.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---- 极光渐变光晕（茶绿/金） ---- */
.fx-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  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(184,137,47,.5), transparent 70%);
}
.fx-blob-2 {
  width: 40vw; height: 40vw; right: -10vw; top: 28vh;
  background: radial-gradient(circle, rgba(30,92,79,.4), transparent 70%);
  animation-duration: 32s; animation-delay: -9s;
}
.fx-blob-3 {
  width: 36vw; height: 36vw; left: 22vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(44,130,113,.32), transparent 70%);
  animation-duration: 38s; animation-delay: -18s;
}
/* 绯红主题（日语站 body.fxp-red） */
.fx-blob.fxp-red.fx-blob-1 { background: radial-gradient(circle, rgba(179,69,92,.5), transparent 70%); }
.fx-blob.fxp-red.fx-blob-2 { background: radial-gradient(circle, rgba(62,94,140,.4), transparent 70%); }
.fx-blob.fxp-red.fx-blob-3 { background: radial-gradient(circle, rgba(232,141,156,.3), transparent 70%); }
@keyframes fx-blob-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, 4vh) scale(1.18); }
}

/* ---- 扫描光束 ---- */
.fx-scanline {
  position: fixed; left: 0; right: 0; top: 0; height: 24vh;
  background: linear-gradient(180deg, transparent,
    rgba(30,92,79,.04) 35%, rgba(184,137,47,.07) 55%, transparent);
  z-index: 9996; pointer-events: none;
  transform: translateY(-30vh);
  animation: fx-sweep 19s linear infinite;
}
.fx-scanline.fxp-red {
  background: linear-gradient(180deg, transparent,
    rgba(62,94,140,.04) 35%, rgba(179,69,92,.07) 55%, transparent);
}
@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(184,137,47,.13), rgba(30,92,79,.05) 45%, transparent 70%);
}
.fx-cursor-glow.fxp-red {
  background: radial-gradient(circle, rgba(179,69,92,.13), rgba(62,94,140,.05) 45%, transparent 70%);
}
body.fx-glow-on .fx-cursor-glow { opacity: 1; }

/* ---- 点击涟漪（霓虹扩散环） ---- */
.fx-ripple {
  position: fixed; border-radius: 50%;
  border: 1.5px solid rgba(44,130,113,.7);
  box-shadow: 0 0 16px rgba(44,130,113,.4), inset 0 0 10px rgba(184,137,47,.28);
  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;
}
.fx-ripple.fxp-red {
  border-color: rgba(179,69,92,.7);
  box-shadow: 0 0 16px rgba(179,69,92,.4), inset 0 0 10px rgba(62,94,140,.28);
}
@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(30,92,79,.12), 0 6px 22px rgba(184,137,47,.1) !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(30,92,79,.7), 2px 0 rgba(184,137,47,.8); transform: skewX(-5deg); }
  92.6%{ text-shadow: 2px 0 rgba(30,92,79,.7), -2px 0 rgba(44,130,113,.8); transform: skewX(4deg); }
  93.2%{ text-shadow: none; transform: none; }
  93.8%{ text-shadow: -1px 0 rgba(30,92,79,.7), 1px 0 rgba(184,137,47,.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; }
}