/* ============================================================
   The Stack — 动效样式
   策略：克制、流畅，不过度
   ============================================================ */

/* 注意：横向滚动护栏已下沉到首页作用域（见 home.css），
   此处不再对 html/body 设置 overflow-x，
   因为全局裁剪会破坏 Material 移动端抽屉导航（.md-nav--primary）
   从视口外部滑入的动画，导致点击汉堡按钮时只显示蒙版、
   看不到导航文字。文章页的横向溢出依赖 Material 自身
   对 table/pre 的滚动处理 + 下文触控设备禁用 translateX hover。 */

/* ── 1. 页面切换淡入过渡（navigation.instant 模式） ── */
@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页面主内容区淡入 */
.md-content__inner {
  animation: page-fade-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 2. 导航 Tab 切换下划线过渡 ── */
.md-tabs__link {
  transition: color 200ms ease, opacity 200ms ease !important;
}

.md-tabs__indicator {
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1),
              left  250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── 3. 侧边栏导航项 hover 微动效 ── */
.md-nav__link {
  transition: color 180ms ease, padding-left 180ms ease !important;
}

.md-nav__link:hover {
  padding-left: 4px;
}

/* ── 4. 代码块 / admonition 进入动效 ── */
.md-typeset .admonition,
.md-typeset details {
  animation: page-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 5. 搜索框展开动效 ── */
.md-search__form {
  transition: box-shadow 200ms ease !important;
}

/* ── 6. 尊重用户的减少动效偏好 ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 7. 宽屏适配（≥ 1280px）──
   注意：首页 .hero-inner 本身 max-width 为 1320px，
   这里只调整 Material 网格，不触及 hero，避免反向压缩 */
@media screen and (min-width: 80em) {
  .md-grid {
    max-width: 76rem;
  }
}

/* ── 超宽屏（≥ 1600px）── */
@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 88rem;
  }

  .hero-inner {
    max-width: 88rem;
  }
}
/* ── 8. 文章朗读功能样式 ── */

/* 朗读按钮（标题旁）
   移动端触控区延展至≥ 44×44px（WCAG AA 推荐），
   视觉尺寸维持 2.1rem，通过 padding 扩展点击热区 */
.tts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-left: 0.6rem;
  padding: 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  background: transparent;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  top: -3px;
  transition:
    background 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.tts-btn:hover {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  background: var(--md-accent-fg-color--transparent);
  transform: translateY(-1px);
}

.tts-btn:active {
  transform: translateY(0) scale(0.96);
}

.tts-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--md-accent-fg-color--transparent);
}

/* 激活态：主色填充，图标反白 */
.tts-btn.tts-active {
  background: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  box-shadow: 0 4px 12px var(--md-accent-fg-color--transparent);
}

.tts-btn.tts-active:hover {
  background: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--md-accent-fg-color--transparent);
}

/* 三态 SVG 图标：默认全部隐藏，再根据 data-state 显示对应图标 */
.tts-btn .tts-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: none;
}

.tts-btn[data-state="stopped"] .tts-icon-speaker,
.tts-btn[data-state="playing"] .tts-icon-pause,
.tts-btn[data-state="paused"]  .tts-icon-play {
  display: block;
}

/* 播放时：暂停图标做一个极轻微的呼吸，暗示"正在朗读" */
@keyframes tts-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.tts-btn[data-state="playing"] .tts-icon-pause {
  animation: tts-pulse 1.6s ease-in-out infinite;
}

/* 待机时：喇叭的声波做轻柔的脉冲淡入淡出（hover 时更明显） */
@keyframes tts-wave-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.tts-btn[data-state="stopped"]:hover .tts-wave-1 {
  animation: tts-wave-pulse 1.4s ease-in-out infinite;
}
.tts-btn[data-state="stopped"]:hover .tts-wave-2 {
  animation: tts-wave-pulse 1.4s ease-in-out 0.2s infinite;
}

/* 朗读时段落高亮（默认规则） */
.tts-reading {
  background: var(--md-accent-fg-color--transparent) !important;
  border-left: 3px solid var(--md-accent-fg-color) !important;
  padding-left: 0.75rem !important;
  border-radius: 4px;
  transition: background 300ms ease, border-left 300ms ease, padding-left 300ms ease;
}

/* 表格单元格内不使用左边条＋ padding，避免整行列宽跳变
   改用背景色 + 内阴影的方式传达朗读位置 */
td.tts-reading,
th.tts-reading {
  background: var(--md-accent-fg-color--transparent) !important;
  border-left: none !important;
  padding-left: inherit !important;
  box-shadow: inset 3px 0 0 0 var(--md-accent-fg-color);
  border-radius: 0;
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .tts-reading {
    transition: none !important;
  }
  .tts-btn,
  .tts-btn .tts-icon,
  .tts-btn[data-state="playing"] .tts-icon-pause,
  .tts-btn[data-state="stopped"]:hover .tts-wave-1,
  .tts-btn[data-state="stopped"]:hover .tts-wave-2 {
    animation: none !important;
    transition: none !important;
  }
}