/* 文章沉浸式呈现：主题配色 + 背景层 + 滚动浮现 + 播放控制条。H5/HTML5 自适应。
   类名前缀 aird-（ARticle ImmersIve reaDing）避免与全站类冲突。
   主题：在 .aird[data-theme="x"] 下覆盖 CSS 变量即可新增。 */

.aird {
  --aird-bg: #faf8f3;
  --aird-ink: #2b2b2b;
  --aird-sub: #6b6b6b;
  --aird-card: rgba(255, 255, 255, .82);
  --aird-accent: #8a6d3b;
  --aird-serif: var(--font-serif, Georgia, "Noto Serif SC", serif);
  position: relative;
  z-index: 1;
}

/* —— 固定背景层（图片 + 主题底色），置于全站内容之下 —— */
.aird-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--aird-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .6s ease;
}
.aird-bg::after { /* 压暗/柔化遮罩，保证正文可读 */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aird-veil, linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.6)));
}

/* —— 主题 —— */
.aird[data-theme="ink"] { --aird-bg:#f3efe6; --aird-ink:#1c1a17; --aird-sub:#5a544a; --aird-card:rgba(250,248,242,.86); --aird-accent:#3a3632; }
.aird[data-theme="ink"] ~ .aird-bg, .aird-bg.t-ink { --aird-veil: linear-gradient(180deg, rgba(243,239,230,.5), rgba(243,239,230,.72)); }

.aird[data-theme="paper"] { --aird-bg:#efe3cf; --aird-ink:#43352017; --aird-ink:#433520; --aird-sub:#7c6a4d; --aird-card:rgba(252,247,237,.88); --aird-accent:#9c6b2f; }
.aird-bg.t-paper { --aird-veil: linear-gradient(180deg, rgba(239,227,207,.45), rgba(239,227,207,.7)); background-color:#efe3cf; }

.aird[data-theme="night"] { --aird-bg:#0e1630; --aird-ink:#eef2ff; --aird-sub:#aab4d4; --aird-card:rgba(20,28,54,.7); --aird-accent:#cdb87a; }
.aird-bg.t-night { --aird-veil: linear-gradient(180deg, rgba(8,12,28,.55), rgba(8,12,28,.78)); background-color:#0e1630; }

.aird[data-theme="scroll"] { --aird-bg:#f5e9d8; --aird-ink:#4a1f1a; --aird-sub:#86524a; --aird-card:rgba(253,246,235,.88); --aird-accent:#a8332b; }
.aird-bg.t-scroll { --aird-veil: linear-gradient(180deg, rgba(245,233,216,.45), rgba(245,233,216,.72)); background-color:#f5e9d8; }

.aird[data-theme="plain"] { --aird-bg:#ffffff; --aird-ink:#23262b; --aird-sub:#6b7280; --aird-card:rgba(255,255,255,.9); --aird-accent:#475569; }

/* 星空主题：背景图缺省时用渐变星点 */
.aird-bg.t-night.no-img {
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, #cdd6ff 50%, transparent),
    radial-gradient(1px 1px at 85% 25%, #fff 50%, transparent),
    linear-gradient(180deg, #0a1230, #131b3c);
}

/* —— 阅读卡片 —— */
.aird-card {
  background: var(--aird-card);
  color: var(--aird-ink);
  border-radius: 14px;
  padding: clamp(18px, 4vw, 40px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
}
.aird-title {
  font-family: var(--aird-serif);
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--aird-ink);
  text-align: center;
}
.aird-meta { color: var(--aird-sub); font-size: 14px; margin: 0 0 18px; text-align: center; }
.aird-body {
  font-family: var(--aird-serif);
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 2;
  color: var(--aird-ink);
}
.aird-body p { margin: 0 0 1.1em; }
.aird-appreciation { margin-top: 28px; border-top: 1px dashed var(--aird-accent); padding-top: 18px; }
.aird-appreciation h2 { font-family: var(--aird-serif); color: var(--aird-accent); font-size: 18px; }

/* —— 播放控制条（诵读 / 背景音乐）—— */
.aird-bar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--aird-card);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  font-size: 14px;
  color: var(--aird-ink);
}
.aird-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--aird-accent);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aird-btn[aria-pressed="true"] { filter: brightness(.85); }
.aird-btn.ghost { background: transparent; color: var(--aird-accent); border: 1px solid var(--aird-accent); }
.aird-progress { flex: 1; min-width: 80px; height: 4px; background: rgba(0,0,0,.15); border-radius: 4px; overflow: hidden; }
.aird-progress > i { display: block; height: 100%; width: 0; background: var(--aird-accent); }
.aird-spd { background: transparent; border: 1px solid var(--aird-accent); color: var(--aird-accent); border-radius: 8px; padding: 4px 6px; font-size: 13px; }

/* —— 悬浮背景音乐开关 —— */
.aird-music {
  position: fixed;
  right: 16px;
  bottom: 76px;
  z-index: 30;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--aird-accent, #8a6d3b);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  display: none; /* 有 bg_music 时 JS 显示 */
}
.aird-music.playing { animation: aird-spin 6s linear infinite; }

/* —— 滚动浮现动画 —— */
.aird-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.aird-reveal.in { opacity: 1; transform: none; }
.aird[data-anim="immersive"] .aird-reveal { transition-duration: 1s; }
.aird[data-anim="immersive"] .aird-bg { will-change: transform; }

@keyframes aird-spin { to { transform: rotate(360deg); } }

/* 朗读高亮当前段 */
.aird-body p.aird-speaking { background: rgba(205, 184, 122, .28); border-radius: 4px; }

/* 无障碍：尊重系统减少动效 */
@media (prefers-reduced-motion: reduce) {
  .aird-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aird-music.playing { animation: none; }
  .aird-bg { transition: none; }
}

/* 移动端：背景固定改为普通，避免 iOS 卡顿；控制条不溢出 */
@media (max-width: 640px) {
  .aird-bg { background-attachment: scroll; }
  .aird-music { right: 12px; bottom: 70px; }
}