/* ============================================
 * style.css —— 基础样式
 * 层级：tailwind.css → style.css → glass.css → anime.css
 * ============================================ */

/* 变量兜底：base.html 已经注入了全部变量，
   这里只补几个纯 CSS 侧的计算量，避免模板里写复杂表达式 */
:root {
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------- 基础 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  color: var(--text-main);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 玻璃元素需要页面有背景内容可采样，渐变由 inline style 提供 */
  min-height: 100vh;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

code,
pre,
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

/* ---------------------------------------------------------------- 无障碍 */

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 用户在系统里开了「减少动态效果」时，无条件关掉所有动画。
   既是无障碍要求，也顺带照顾晕动症用户。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- 滚动条 */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--primary-rgb) / 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--primary-rgb) / 0.6);
  background-clip: content-box;
}

/* ---------------------------------------------------------------- 层级表
 *
 * 与 tailwind.config.js 的 zIndex 保持一致。见 docs/06 第 6.9 节。
 *
 *   背景   -1
 *   装饰    1   ← 在内容之上、固定元素之下，否则花瓣会飘过播放器
 *   内容   10
 *   导航   40
 *   看板娘 45
 *   播放器 50
 *   警示条 60
 *   模态  100
 *
 * 需要用具体数值时按下表取值，不要再临时发明新的 z-index。
 */

#decor-layer  { z-index: 1; }
#main-content { z-index: 10; }
.site-nav     { z-index: 40; }
#mascot       { z-index: 45; }
#music-player { z-index: 50; }

/* ---------------------------------------------------------------- 工具类 */

/* 文字截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* HTMX 请求中的加载态 */
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms var(--ease-smooth);
}

/* ---------------------------------------------------------------- 瀑布流
 *
 * 用 CSS columns 而非 JS 布局 —— 无重排、无库依赖。
 * break-inside:avoid 是必须的，否则图片会被从中间截断分到两列。
 */

.masonry {
  columns: 3;
  column-gap: 1rem;
}

.masonry > * {
  display: block;
  margin-bottom: 1rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (max-width: 640px) {
  .masonry { columns: 1; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .masonry { columns: 2; }
}

/* ---------------------------------------------------------------- 技能条 */

.skill-bar {
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--secondary),
    var(--accent),
    var(--primary)
  );
  background-size: 300% 100%;
  animation: rainbow-flow 3s linear infinite;
  transition: width 600ms var(--ease-bounce);
}

/* ---------------------------------------------------------------- 正文排版
 *
 * 文章详情与关于页的 Markdown 渲染结果。
 * 不用 @tailwindcss/typography 是因为它的默认配色与站点主题不搭，
 * 而覆盖它的成本高于直接手写这几十行。
 */

.prose-anime {
  color: var(--text-main);
  font-size: 1.0625rem;
  line-height: 1.85;
  word-break: break-word;
}

.prose-anime > *:first-child { margin-top: 0; }
.prose-anime > *:last-child { margin-bottom: 0; }

.prose-anime h1,
.prose-anime h2,
.prose-anime h3,
.prose-anime h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  margin: 2em 0 0.8em;
}

.prose-anime h1 { font-size: 1.7em; }
.prose-anime h2 {
  font-size: 1.4em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid rgb(var(--primary-rgb) / 0.25);
}
.prose-anime h3 { font-size: 1.2em; }
.prose-anime h4 { font-size: 1.05em; }

/* 标题左侧的小装饰，呼应二次元风格 */
.prose-anime h2::before {
  content: "🌸";
  margin-right: 0.4em;
  font-size: 0.85em;
}

.prose-anime p { margin: 1.1em 0; }

.prose-anime a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: opacity 200ms var(--ease-smooth);
}
.prose-anime a:hover { opacity: 0.75; }

.prose-anime ul,
.prose-anime ol {
  margin: 1.1em 0;
  padding-left: 1.6em;
}
.prose-anime ul { list-style: disc; }
.prose-anime ol { list-style: decimal; }
.prose-anime li { margin: 0.4em 0; }

.prose-anime blockquote {
  margin: 1.4em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid var(--primary);
  border-radius: 0 12px 12px 0;
  background: rgb(var(--primary-rgb) / 0.08);
  color: var(--text-soft);
}
.prose-anime blockquote p { margin: 0.4em 0; }

/* 行内代码 */
.prose-anime :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: rgb(var(--primary-rgb) / 0.12);
  color: var(--primary);
  font-size: 0.9em;
}

/* 代码块。Prism 的主题样式负责内部的 token 着色，
   这里只管外框 —— 圆角、边距、与站点的视觉衔接。 */
.prose-anime pre {
  margin: 1.4em 0;
  padding: 1.1em 1.3em;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}
.prose-anime pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.prose-anime img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6em auto;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgb(var(--primary-rgb) / 0.15);
}

.prose-anime table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 0.95em;
  overflow-x: auto;             /* 移动端表格超出时横向滚动，而不是撑破页面 */
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.prose-anime th,
.prose-anime td {
  padding: 0.6em 0.9em;
  border: 1px solid rgb(var(--primary-rgb) / 0.18);
  text-align: left;
}
.prose-anime th {
  background: rgb(var(--primary-rgb) / 0.12);
  font-weight: 600;
}

.prose-anime hr {
  margin: 2.4em 0;
  border: none;
  border-top: 2px dashed rgb(var(--primary-rgb) / 0.3);
}

/* 移动端正文略小一点，行距略紧一点 */
@media (max-width: 640px) {
  .prose-anime {
    font-size: 1rem;
    line-height: 1.8;
  }
  .prose-anime pre {
    padding: 0.9em 1em;
    border-radius: 14px;
  }
}

/* ============================================================
 * 深色主题适配
 * body 带 .theme-dark 时生效（genshin 星夜 / dark 两个预设）。
 * 模板里的表单控件用的是 bg-white/50 这类 Tailwind 类，深色下
 * 半透明白会显得刺眼且文字看不清，这里用更高优先级的选择器覆盖。
 * ============================================================ */

/* ---- 表单控件 ---- */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
body.theme-dark textarea,
body.theme-dark select {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-main);
}

body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--primary);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: color-mix(in srgb, var(--text-main) 45%, transparent);
}

/* 下拉框的选项（原生弹层受系统控制，但能设个底色） */
body.theme-dark select option {
  background: #1b2a4a;
  color: var(--text-main);
}

/* ---- 正文排版 ---- */
body.theme-dark .prose-anime blockquote {
  background: rgb(var(--primary-rgb) / 0.1);
}

body.theme-dark .prose-anime :not(pre) > code {
  background: rgb(var(--primary-rgb) / 0.16);
}

body.theme-dark .prose-anime pre {
  background: rgba(0, 0, 0, 0.35);
}

body.theme-dark .prose-anime th {
  background: rgb(var(--primary-rgb) / 0.14);
}

body.theme-dark .prose-anime img {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* ---- 滚动条 ---- */
body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgb(var(--primary-rgb) / 0.4);
  background-clip: content-box;
}

/* ---------------------------------------------------------------- 首页 Hero 大图
 *
 * 单张图为静态展示，多张图由 Alpine 轮播（淡入淡出）。
 * 圆角 / 边框 / 阴影沿用与 .liquid-glass 同一套设计变量，视觉不割裂。
 */

.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow:
    0 8px 32px rgb(var(--primary-rgb) / 0.15),
    inset 0 1px 0 var(--glass-highlight);
}

/* 图片铺满容器，任何异常尺寸都不变形 */
.hero-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播切片的淡入淡出。不依赖 Tailwind 的 transition 类，
   避免漏编译导致图片瞬间切换。 */
.hero-slide {
  transition: opacity 700ms var(--ease-smooth);
}

/* ---------------------------------------------------------------- 页面背景层
 *
 * 各页背景图（page_backgrounds），z-index -1 —— 在 body 渐变之上、内容之下。
 * 背景图 URL 由 main.js 按当前路径写入，这里只管铺满 + 均匀暗化，
 * 保证前景文字（页头标题、无卡片区域）始终可读。
 */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 遮罩：颜色由主题提供（--page-bg-overlay）。
   浅色主题压白、深色主题压暗 —— 让背景图退成「隐约的氛围」，
   而不是与文字争夺可读性。 */
.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--page-bg-overlay, rgba(0, 0, 0, 0.22));
}