/* ========= 趣味动态背景：开始 =========
       只影响背景，不会遮挡页面点击；需要调整时可改下面几个变量。 */
    :root {
      --fun-accent: rgba(248, 113, 113, 0.78);
      --fun-accent-2: rgba(56, 189, 248, 0.55);
      --fun-accent-3: rgba(250, 204, 21, 0.42);
      --fun-bg-soft: rgba(15, 23, 42, 0.72);
      --fun-speed: 18s;
      --mx: 0px;
      --my: 0px;
    }

    body {
      position: relative;
      overflow-x: hidden;
    }

    .fun-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 16%, rgba(248, 113, 113, 0.18), transparent 31%),
        radial-gradient(circle at 84% 12%, rgba(56, 189, 248, 0.14), transparent 28%),
        radial-gradient(circle at 72% 82%, rgba(250, 204, 21, 0.10), transparent 30%);
    }
    /* 动态背景网格设置 */
    .fun-bg::before {
      /* display: none;关闭背景动态网格，需要把下面注释掉 */
      content: "";
      position: absolute;
      inset: -25%;
      background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),/* 原始0.045透明度 */
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);/* 原始0.045透明度 */
      background-size: 70px 70px;/* 网格大小，越大越稀疏 原始58px*/
      transform: translate3d(var(--mx), var(--my), 0) rotate(-3deg);
      opacity: 0.4;/* 透明度，越小越淡 */
      animation: funGridMove 32s linear infinite;/* 动画速度，数字越大越慢 */
      mask-image: radial-gradient(circle at center, black 0%, black 38%, transparent 78%);/* 原始55、86 */
    }

    .fun-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.055) 46%, transparent 54%),
        radial-gradient(circle at center, transparent 0%, rgba(2, 6, 23, 0.30) 100%);
      animation: funLightSweep 10s ease-in-out infinite;
      mix-blend-mode: screen;
      opacity: 0.34;
    }

    .fun-orb,
    .fun-particle,
    .fun-symbol {
      position: absolute;
      will-change: transform, opacity;
    }

    .fun-orb {
      width: clamp(130px, 18vw, 260px);
      aspect-ratio: 1;
      border-radius: 999px;
      filter: blur(6px);
      opacity: 0.45;
      border: 1px solid rgba(255,255,255,0.16);
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 25%),
                  radial-gradient(circle at 70% 70%, var(--fun-accent), transparent 58%);
      animation: funOrbFloat calc(var(--fun-speed) + 5s) ease-in-out infinite alternate;
    }

    .fun-orb-1 { left: 6%; top: 16%; }
    .fun-orb-2 { right: 9%; top: 26%; width: clamp(110px, 14vw, 210px); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25), transparent 24%), radial-gradient(circle at 70% 70%, var(--fun-accent-2), transparent 58%); animation-delay: -5s; }
    .fun-orb-3 { left: 54%; bottom: 4%; width: clamp(150px, 20vw, 290px); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 24%), radial-gradient(circle at 72% 72%, var(--fun-accent-3), transparent 60%); animation-delay: -10s; }
    /* 设置背景悬浮组件 */
    .fun-symbol {
      padding: 7px 11px;
      border: 1px solid rgba(255,255,255,0.09);/* 边框透明度 0.13*/
      border-radius: 999px;
      color: rgba(255,255,255,0.38);/* 文字透明度 0.50*/
      background: rgba(15, 23, 42, 0.18);/* 背景透明度 28*/
      backdrop-filter: blur(8px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.11);/* 阴影透明度 0.16*/
      font: 700 13px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      letter-spacing: 0.04em;
      transform: translate3d(calc(var(--mx) * .35), calc(var(--my) * .35), 0);
      animation: funSymbolFloat var(--fun-speed) ease-in-out infinite alternate;
    }

    .fun-symbol-1 { left: 8%; top: 35%; animation-delay: -2s; }
    .fun-symbol-2 { left: 25%; top: 13%; animation-delay: -8s; }
    .fun-symbol-3 { right: 13%; top: 41%; animation-delay: -12s; }
    .fun-symbol-4 { left: 14%; bottom: 18%; animation-delay: -5s; }
    .fun-symbol-5 { right: 25%; bottom: 22%; animation-delay: -15s; }
    .fun-symbol-6 { right: 7%; bottom: 11%; animation-delay: -7s; }
    .fun-symbol-7 { left: 45%; top: 48%; animation-delay: -11s; }
    .fun-symbol-8 { left: 62%; top: 15%; animation-delay: -4s; }

    .fun-particle {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.58);
      box-shadow: 0 0 16px rgba(255,255,255,0.55);
      opacity: 0.45;
      animation: funParticleRise 16s linear infinite;
    }

    .fun-particle:nth-of-type(12n+1) { background: rgba(248, 113, 113, 0.75); }
    .fun-particle:nth-of-type(12n+2) { background: rgba(56, 189, 248, 0.75); }
    .fun-particle:nth-of-type(12n+3) { background: rgba(250, 204, 21, 0.65); }

    .fun-particle-1 { left: 6%; bottom: -8%; animation-delay: -1s; }
    .fun-particle-2 { left: 14%; bottom: -8%; animation-delay: -10s; animation-duration: 19s; }
    .fun-particle-3 { left: 22%; bottom: -8%; animation-delay: -4s; animation-duration: 13s; }
    .fun-particle-4 { left: 31%; bottom: -8%; animation-delay: -14s; animation-duration: 21s; }
    .fun-particle-5 { left: 42%; bottom: -8%; animation-delay: -7s; animation-duration: 17s; }
    .fun-particle-6 { left: 55%; bottom: -8%; animation-delay: -2s; animation-duration: 20s; }
    .fun-particle-7 { left: 66%; bottom: -8%; animation-delay: -12s; animation-duration: 15s; }
    .fun-particle-8 { left: 76%; bottom: -8%; animation-delay: -5s; animation-duration: 18s; }
    .fun-particle-9 { left: 86%; bottom: -8%; animation-delay: -16s; animation-duration: 22s; }
    .fun-particle-10 { left: 94%; bottom: -8%; animation-delay: -9s; animation-duration: 16s; }

    .site-header,
    main,
    .site-footer,
    .music-widget,
    .music-show-tab {
      position: relative;
      z-index: 2;
    }

    @keyframes funGridMove {
      from { background-position: 0 0, 0 0; }
      to { background-position: 116px 58px, 116px 58px; }
    }

    @keyframes funLightSweep {
      0%, 100% { transform: translateX(-35%) skewX(-12deg); opacity: 0.18; }
      45%, 55% { opacity: 0.36; }
      70% { transform: translateX(35%) skewX(-12deg); opacity: 0.16; }
    }

    @keyframes funOrbFloat {
      from { transform: translate3d(calc(var(--mx) * -0.55), calc(var(--my) * -0.55), 0) scale(0.96); }
      to { transform: translate3d(calc(30px + var(--mx) * -0.55), calc(-26px + var(--my) * -0.55), 0) scale(1.08); }
    }
    /* ↓这里原始的 opacity: 0.32 和 opacity: 0.72 会让悬浮标签在动画中忽明忽暗。所以如果只在.fun-symbol里加opacity可能效果不明显，因为动画会覆盖它。 */
    @keyframes funSymbolFloat {
      from { opacity: 0.18; transform: translate3d(calc(var(--mx) * .35), calc(var(--my) * .35), 0) rotate(-2deg); }
      to { opacity: 0.44; transform: translate3d(calc(18px + var(--mx) * .35), calc(-22px + var(--my) * .35), 0) rotate(2deg); }
    }
    
    @keyframes funParticleRise {
      0% { transform: translate3d(0, 12vh, 0) scale(0.6); opacity: 0; }
      12% { opacity: 0.52; }
      78% { opacity: 0.48; }
      100% { transform: translate3d(42px, -112vh, 0) scale(1.25); opacity: 0; }
    }

    @media (max-width: 720px) {
      .fun-symbol { font-size: 11px; padding: 6px 9px; opacity: 0.42; }
      .fun-symbol-3,
      .fun-symbol-5,
      .fun-symbol-7 { display: none; }
      .fun-bg::before { background-size: 42px 42px; }
    }

@media (prefers-reduced-motion: reduce) {
  .fun-bg::before,
  .fun-bg::after,
  .fun-orb,
  .fun-symbol,
  .fun-particle {
    animation: none !important;
  }
  .fun-particle { display: none; }
}
/* ========= 趣味动态背景：结束 ========= */







/* 鼠标星光轨迹 */
.cursor-spark {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(85, 121, 250, 0.45), transparent 70%);  /* 255,255,255,0.95；255,80,110,0.45 */
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.8),/* 255, 255, 255, 0.8 */
    0 0 18px rgba(255, 193, 78, 0.45),/* 255, 70, 110, 0.55 */
    0 0 30px rgba(120, 170, 255, 0.35);/* 120, 170, 255, 0.35 */

  transform: translate(-50%, -50%) scale(1);
  animation: cursorSparkFade 1.25s ease-out forwards;/* 拖尾停留延迟时间 0.75*/
}

@keyframes cursorSparkFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
  }
}

/* 用户系统设置为减少动画时，自动关闭 */
@media (prefers-reduced-motion: reduce) {
  .cursor-spark {
    display: none;
  }
}