/* ==========================================================================
 * components/backdrop.css — 固定层背景：光影画布、纸张纹理、阅读进度条、水墨游标
 * 依赖：tokens.css
 * ========================================================================== */

/* 背景动态光影画布（树影天光 Komorebi） */
#ambientCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

/* 纸张纤维微噪点 */
.paper-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 顶部阅读进度条 */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-sage), var(--accent-terracotta));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1000;
}

/* 桌面端水墨阻尼跟随游标 */
.custom-cursor-dot,
.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.35s var(--ease-out-expo), height 0.35s var(--ease-out-expo), background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-terracotta);
}
.custom-cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(74, 107, 86, 0.45);
  background: rgba(74, 107, 86, 0.03);
}
body.cursor-hover .custom-cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--accent-terracotta);
  background: rgba(184, 93, 67, 0.08);
}

/* 触屏 / 窄屏下隐藏自定义游标 */
@media (hover: none), (max-width: 960px) {
  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   原生系统光标 与 水墨游标 二选一。

   这里的媒体条件必须与上面「隐藏自定义游标」的那条严格互斥 —— 否则会出现
   两边都被藏起来、整页没有光标的空档期。上面在「触屏」或「<=960px」时隐藏
   水墨游标，所以这里只在「有鼠标 且 >960px」时隐藏系统光标，两者正好互补。

   想恢复「系统光标 + 水墨点同时显示」的原状，删掉这一整块即可。
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  *,
  *::before,
  *::after {
    cursor: none !important;
  }
}