/* ==========================================================================
   Anki小工坊 · sparkle 创意设计增强层
   --------------------------------------------------------------------------
   设计语言源自 bestwebsite.gallery 获奖站点的共性审美：
     1. 氛围光晕（aurora glow）—— 柔和的径向渐变光斑做背景层次
     2. 玻璃拟态（glassmorphism）—— 半透明 surface + 细描边 + backdrop-blur
     3. reveal-on-scroll —— 元素进入视口时淡入上移（非一次性播放，滚动即触发）
     4. 微交互 —— 按钮/卡片的 hover 抬升、磁性按钮、渐变描边
     5. 编辑排版张力 —— 大标题 serif 混排（配合既有 Inter + Newsreader）

   设计约束（重要）：
     · 本层是「渐进增强」，只覆盖视觉，不触碰布局结构、不重排 flex/grid。
     · 所有增强都走类名 + CSS 变量，默认不生效，需在 HTML 里挂对应 class。
     · 尊重 prefers-reduced-motion：用户系统开启「减少动态」时全部动画降级。
     · 明暗双主题都适配（变量随 [data-theme] 切换）。
   ========================================================================== */

/* ---------- 1. 氛围光晕背景层 ----------
   用一个 fixed 的伪元素层铺柔光斑，营造「不是纯白平涂」的空间感。
   body 挂 .sparkle-bg 时启用。z-index 极低，压在 content 之下。 */
.sparkle-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48rem 48rem at 12% -8%, var(--sparkle-glow-a, rgba(37, 99, 235, 0.10)), transparent 62%),
    radial-gradient(42rem 42rem at 96% 12%, var(--sparkle-glow-b, rgba(226, 35, 26, 0.06)), transparent 60%),
    radial-gradient(50rem 50rem at 50% 118%, var(--sparkle-glow-c, rgba(16, 185, 129, 0.07)), transparent 64%);
}
[data-theme="dark"].sparkle-bg::before {
  background:
    radial-gradient(48rem 48rem at 12% -8%, rgba(59, 130, 246, 0.16), transparent 62%),
    radial-gradient(42rem 42rem at 96% 12%, rgba(226, 35, 26, 0.12), transparent 60%),
    radial-gradient(50rem 50rem at 50% 118%, rgba(16, 185, 129, 0.12), transparent 64%);
}

/* ---------- 2. 玻璃拟态顶栏 ----------
   .topbar 挂 .sparkle-glass 后，从纯白/纯黑实心升级为半透明毛玻璃，
   保留 sticky 与所有子元素布局。 */
.sparkle-glass {
  background: color-mix(in srgb, var(--bg-surface, #ffffff) 72%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08)) !important;
  box-shadow: 0 8px 30px -12px rgba(15, 23, 42, 0.12);
}
@supports not (backdrop-filter: blur(1px)) {
  .sparkle-glass { background: var(--bg-surface, #ffffff) !important; }
}

/* ---------- 3. reveal-on-scroll 进入动效 ----------
   元素默认隐藏 + 下移，sparkle.js 用 IntersectionObserver 加 .is-revealed
   触发过渡。初始态不抢跑：无 JS 或 reduced-motion 时保持可见（见下方兜底）。 */
.sparkle-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.sparkle-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* 交错延迟：给一组相邻 reveal 元素制造「依次浮现」的节奏 */
.sparkle-reveal[data-delay="1"] { transition-delay: 0.06s; }
.sparkle-reveal[data-delay="2"] { transition-delay: 0.12s; }
.sparkle-reveal[data-delay="3"] { transition-delay: 0.18s; }
.sparkle-reveal[data-delay="4"] { transition-delay: 0.24s; }

/* 无 JS 兜底：script 加载前 HTML 里 .sparkle-reveal 会瞬间可见 */
.no-sparkle .sparkle-reveal,
html:not(.sparkle-ready) .sparkle-reveal {
  opacity: 1 !important;
  transform: none !important;
}
/* sparkle.js 就绪后打 .sparkle-ready，才启用「初始隐藏」 */
html.sparkle-ready .sparkle-reveal:not(.is-revealed) {
  opacity: 0;
  transform: translateY(26px);
}

/* ---------- 4. 卡片 / 面板 hover 抬升 + 渐变描边 ----------
   .sparkle-card 给列表卡片、模板小样、定价卡、特性卡加统一的悬浮反馈。
   用 box-shadow 抬升而非 translate，避免布局抖动。 */
.sparkle-card {
  transition:
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sparkle-card:hover {
  box-shadow: var(--shadow-hover, 0 4px 6px -1px rgba(0,0,0,0.08), 0 12px 24px -4px rgba(0,0,0,0.06));
  transform: translateY(-3px);
}

/* 渐变描边卡片：hover 时边框从细灰过渡到品牌色渐变。
   靠 border-image 无法渐变圆角，故用两层背景模拟 1px 渐变描边。 */
.sparkle-outline {
  position: relative;
  isolation: isolate;
}
.sparkle-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--accent, #2563eb),
    color-mix(in srgb, var(--accent, #2563eb) 20%, transparent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.sparkle-outline:hover::before { opacity: 1; }

/* ---------- 5. 磁性 / 弹性按钮 ----------
   .sparkle-btn 给主按钮加弹簧 hover + 轻微放大，配合 JS 的磁性跟随可选。 */
.sparkle-btn {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    filter 0.28s ease;
}
.sparkle-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px -8px var(--sparkle-btn-glow, rgba(37, 99, 235, 0.4));
}
.sparkle-btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* ---------- 6. 大标题编辑排版张力 ----------
   .sparkle-display 给 hero 标题施加超大字号 + 紧凑行高 + serif 强调，
   制造获奖站点常见的「编辑感」。仅作用于显式挂载的元素。 */
.sparkle-display {
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.sparkle-display .sparkle-serif {
  font-family: "Newsreader", "Songti SC", "Noto Serif SC", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent, #2563eb);
}

/* ---------- 7. 光标跟随光斑（仅桌面 hover 设备） ----------
   一个 fixed 的柔光圆点，sparkle.js 让它在鼠标附近漂移。
   默认隐藏，只在 .sparkle-cursor 存在时由 JS 显示。 */
.sparkle-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--sparkle-cursor-glow, rgba(37, 99, 235, 0.10)), transparent 68%);
  mix-blend-mode: normal;
  will-change: transform;
  transition: opacity 0.5s ease;
  opacity: 0;
}

/* ---------- 8. 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sparkle-reveal,
  .sparkle-card,
  .sparkle-btn,
  .sparkle-outline::before {
    transition: none !important;
    animation: none !important;
  }
  .sparkle-reveal { opacity: 1 !important; transform: none !important; }
  .sparkle-cursor-dot { display: none !important; }
}