/*
 * 全站科技感背景 + 半透明卡片 + 日夜切换
 *
 * - 背景层（.tech-bg，由 tech-bg.js 生成）固定铺满窗口，首页头图和下面的内容区共用这一层
 * - 背景 = 渐变底色 + 静止的网格 + 缓慢漂浮的光晕（只动 transform，很省资源）
 * - 卡片、页脚半透明，透出背后的网格和光晕
 * - 日夜切换由 tech-bg.js 处理，这里是配套的动画样式
 *
 * 想调颜色，改下面「日间配色」「夜间配色」两段变量即可。
 */

/* 让颜色变量能做渐变过渡（不支持的浏览器会直接切换，不影响使用）。
   初始值要和下面日间配色保持一致 */
@property --hero-bg-1 { syntax: '<color>'; inherits: true; initial-value: #f4f7fc; }
@property --hero-bg-2 { syntax: '<color>'; inherits: true; initial-value: #e6edf8; }
@property --hero-grid { syntax: '<color>'; inherits: true; initial-value: rgba(40, 80, 160, 0.10); }
@property --hero-title { syntax: '<color>'; inherits: true; initial-value: #14213d; }

/* ---------- 日间配色 ---------- */
:root {
  --hero-bg-1: #f4f7fc;                    /* 背景上方 */
  --hero-bg-2: #e6edf8;                    /* 背景下方 */
  --hero-grid: rgba(40, 80, 160, 0.10);    /* 网格线（光标效果也读这个颜色） */
  --hero-title: #14213d;                   /* 首页标题、页脚文字 */
  --hero-day: 1;                           /* 日间光晕显示 */
  --hero-night: 0;                         /* 夜间光晕隐藏 */
  --card-bg: rgba(255, 255, 255, 0.82);    /* 文章卡片（主题变量） */
  --sidebar-bg: rgba(255, 255, 255, 0.92); /* 手机侧边菜单（主题变量） */
}

/* ---------- 夜间配色 ---------- */
[data-theme='dark'] {
  --hero-bg-1: #070b16;
  --hero-bg-2: #0d1426;
  --hero-grid: rgba(90, 160, 255, 0.10);
  --hero-title: #eef4ff;
  --hero-day: 0;
  --hero-night: 1;
  --card-bg: rgba(14, 19, 34, 0.82);
  --sidebar-bg: rgba(14, 19, 34, 0.94);
}

/* ---------- 页面底色 ----------
   和背景层同样的渐变：
   - 刷新时背景层还没生成的那一瞬间，看到的已经是同样的底色，不会闪
   - 手机地址栏收起的一瞬间露出来的区域也不会闪白
   不用 background-attachment: fixed（iOS 上会出问题）：
   渐变只铺第一屏，再往下是和渐变底部相同的纯色 */
html {
  background-color: var(--hero-bg-2);
  background-image: linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  background-size: 100% 100lvh;
}

body {
  background: transparent;
}

/* ---------- 背景层 ----------
   固定在窗口上，铺在所有内容后面。
   高度按「地址栏收起时的最大屏幕高度」（lvh）固定下来，
   手机滚动时地址栏伸缩，背景不会跟着拉伸、跳动 */
.tech-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
}

/* 网格、光晕、光标效果画布都铺满背景层
   （用上下左右四个属性而不是 inset 简写，老版本 Safari 也认识） */
.tech-bg__grid,
.tech-bg__glows,
.tech-bg__gl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 网格：静止不动，窗口四角稍微淡出 */
.tech-bg__grid {
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 48px 48px;   /* 和 tech-bg.js 里的 gridSize 保持一致 */
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 50%, transparent 100%);
}

/* 光标效果的 WebGL 画布：平时隐藏（显示清晰的 CSS 网格），
   光标移动时才显示，并临时替换掉 CSS 网格 */
.tech-bg__gl {
  width: 100%;    /* 画布是替换元素，需要明确写宽高才会铺满 */
  height: 100%;
  visibility: hidden;
}
.tech-bg--active .tech-bg__gl { visibility: visible; }
.tech-bg--active .tech-bg__grid { visibility: hidden; }

/* ---------- 光晕：日间一组、夜间一组，切换时交叉淡入淡出 ---------- */
.tech-bg__glows--day   { opacity: var(--hero-day); }
.tech-bg__glows--night { opacity: var(--hero-night); }

/* 只让当前看得见的那组光晕动，另一组暂停，少一半动画 */
[data-theme='dark'] .tech-bg__glows--day .tech-bg__glow,
:root:not([data-theme='dark']) .tech-bg__glows--night .tech-bg__glow {
  animation-play-state: paused;
}

.tech-bg__glow {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  will-change: transform;
}

.tech-bg__glow:nth-child(1) { top: -20vmax; left: -12vmax; animation: tech-float-a 22s ease-in-out infinite alternate; }
.tech-bg__glow:nth-child(2) { top: 10%;     right: -18vmax; animation: tech-float-b 26s ease-in-out infinite alternate; }
.tech-bg__glow:nth-child(3) { bottom: -28vmax; left: 25%;  animation: tech-float-c 30s ease-in-out infinite alternate; }

/* 日间光晕：淡蓝、淡青、淡紫 */
.tech-bg__glows--day .tech-bg__glow:nth-child(1) { background: radial-gradient(circle, rgba(80, 150, 255, 0.28) 0%, transparent 65%); }
.tech-bg__glows--day .tech-bg__glow:nth-child(2) { background: radial-gradient(circle, rgba(60, 210, 220, 0.22) 0%, transparent 65%); }
.tech-bg__glows--day .tech-bg__glow:nth-child(3) { background: radial-gradient(circle, rgba(150, 120, 255, 0.20) 0%, transparent 65%); }

/* 夜间光晕：霓虹蓝、青、紫 */
.tech-bg__glows--night .tech-bg__glow:nth-child(1) { background: radial-gradient(circle, rgba(40, 110, 255, 0.35) 0%, transparent 65%); }
.tech-bg__glows--night .tech-bg__glow:nth-child(2) { background: radial-gradient(circle, rgba(0, 220, 230, 0.22) 0%, transparent 65%); }
.tech-bg__glows--night .tech-bg__glow:nth-child(3) { background: radial-gradient(circle, rgba(150, 70, 255, 0.28) 0%, transparent 65%); }

@keyframes tech-float-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(12vmax, 8vmax, 0); } }
@keyframes tech-float-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-14vmax, 6vmax, 0); } }
@keyframes tech-float-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8vmax, -10vmax, 0); } }

/* 系统开了「减弱动态效果」：保留画面，停掉光晕漂浮 */
@media (prefers-reduced-motion: reduce) {
  .tech-bg .tech-bg__glow {
    animation: none !important;
  }
}

/* ---------- 头图（首页的整屏头图，归档页、文章页顶部的横幅）：
   自己不画背景、不加灰色遮罩，直接透出背景层 ---------- */
#page-header:not(.not-top-img),
#page-header:not(.not-top-img)::before {
  background: transparent !important;
}

/* 标题、副标题、向下箭头：放在背景上面，颜色随日夜变化 */
#page-header.full_page #site-info,
#page-header.full_page #scroll-down {
  z-index: 1;
}
#page-header.full_page #site-title,
#page-header.full_page #scroll-down,
#page-header.full_page #scroll-down i,
#page-header #page-site-info #site-title,
#page-header #post-info .post-title {
  color: var(--hero-title);
  text-shadow: none;
}
/* 文章页标题下面的日期等信息：同色，淡一些 */
#page-header #post-info #post-meta,
#page-header #post-info #post-meta a {
  color: var(--hero-title);
  text-shadow: none;
  opacity: 0.7;
}
#page-header #post-info #post-meta a {
  opacity: 1;
}

/* ---------- 首页标题：手写签名（signature.js 把文字换成会自己写出来的签名） ---------- */
#page-header.full_page #site-title.has-sig {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-height: 0;
}
/* 文字留给读屏软件和搜索引擎，画面上不显示 */
#site-title .sig-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#site-title .sig {
  display: block;
  width: 440px;
  max-width: 84vw;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
#site-title .sig path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation-name: sig-draw;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-fill-mode: forwards;
}
#site-title .sig .sig-pen {
  stroke: url(#sig-pen-grad);
  stroke-width: 0.9;
}
#site-title .sig .sig-ink {
  stroke: var(--hero-title);   /* 墨色随日夜变化 */
  stroke-width: 0.95;
}
#site-title .sig .sig-accent {
  stroke: url(#sig-accent-grad);
  stroke-width: 1;
}
/* 首字母 c：写完后保留彩色（粉 → 紫），和最后那一撇首尾呼应 */
#site-title .sig .sig-ink.is-color {
  stroke: url(#sig-c-grad);
}
@keyframes sig-draw {
  to { stroke-dashoffset: 0; }
}
@media (max-width: 768px) {
  #site-title .sig {
    width: 300px;
  }
}
@media (max-width: 768px) and (max-height: 720px) {
  #site-title .sig {
    width: 260px;
  }
}
/* 系统开启「减少动态效果」：直接显示写好的签名 */
@media (prefers-reduced-motion: reduce) {
  #site-title .sig path {
    animation: none;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------- 首页介绍（hero-intro.js 生成）：签名下面分层排版 ----------
   小号引导语 → 衬线字体的核心观点（关键词用和签名笔尖一样的渐变色）→ 一句说明
   → 一排细边框标签 → 两个按钮 → 一行小字。签名快写完时依次浮现。
   整块（签名 + 介绍）在首屏上下居中 */
@font-face {
  font-family: 'Chenxy Quote';
  src: url('/fonts/noto-serif-sc-quote.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
:root {
  --intro-soft: rgba(20, 33, 61, 0.62);
  --intro-faint: rgba(20, 33, 61, 0.42);
  --intro-line: rgba(20, 33, 61, 0.14);
  --intro-chip: rgba(255, 255, 255, 0.45);
  --intro-btn-text: #ffffff;
}
[data-theme='dark'] {
  --intro-soft: rgba(238, 244, 255, 0.66);
  --intro-faint: rgba(238, 244, 255, 0.42);
  --intro-line: rgba(238, 244, 255, 0.16);
  --intro-chip: rgba(255, 255, 255, 0.04);
  --intro-btn-text: #0b1020;
}

#page-header.full_page #site-info {
  top: 50%;
  transform: translateY(-50%);
}
#page-header.full_page #site-title {
  margin-bottom: 26px;
}
.hero-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  color: var(--hero-title);
}
.hero-intro p {
  margin: 0;
}

/* 引导语：小字、字距拉开，两边各一道细线 */
.hi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--intro-soft);
}
.hi-eyebrow::before,
.hi-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--intro-line);
}

/* 核心观点：衬线字体，大一号；关键词用签名笔尖的渐变色 */
.hi-quote {
  margin-top: 18px !important;
  font-family: 'Chenxy Quote', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.hi-quote em {
  font-style: normal;
  background: linear-gradient(100deg, #ff2d7a, #a855f7 55%, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 说明：小一号、淡一些 */
.hi-lead {
  margin-top: 12px !important;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--intro-soft);
}

/* 分享内容：细边框胶囊标签 */
.hi-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hi-tags li {
  margin: 0;
  padding: 5px 13px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--intro-soft);
  border: 1px solid var(--intro-line);
  border-radius: 999px;
  background: var(--intro-chip);
}
.hi-tags li::before {
  display: none; /* 去掉主题给列表加的圆点 */
}

/* 按钮：实心（Telegram）+ 描边（商务合作） */
.hi-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
#page-header .hi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--intro-line);
  color: var(--hero-title);
  background: var(--intro-chip);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#page-header .hi-btn--primary {
  border-color: transparent;
  color: var(--intro-btn-text);
  background: var(--hero-title);
}
#page-header a.hi-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.18);
}
/* 还没填链接的按钮：样子不变，只是点不了 */
#page-header .hi-btn.is-soon {
  cursor: default;
}

/* 最后一行小字 */
.hi-note {
  margin-top: 14px !important;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--intro-faint);
}

/* 依次浮现：签名快写完（约 1.5 秒）时开始，每个部分晚 0.07 秒 */
.hi-in {
  animation: hi-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(1.5s + var(--i, 0) * 0.07s);
}
@keyframes hi-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* ---------- 手机 ---------- */
@media (max-width: 768px) {
  #page-header.full_page #site-title {
    margin-bottom: 16px;
  }
  .hi-eyebrow { font-size: 12px; letter-spacing: 0.18em; gap: 10px; }
  .hi-eyebrow::before, .hi-eyebrow::after { width: 18px; }
  .hi-quote { margin-top: 12px !important; font-size: 21px; }
  .hi-lead { font-size: 14px; }
  .hi-tags { gap: 6px; margin-top: 16px; }
  .hi-tags li { padding: 4px 10px; font-size: 12px; }
  .hi-actions { gap: 10px; margin-top: 20px; }
  #page-header .hi-btn { padding: 9px 18px; font-size: 13.5px; }
}
/* 屏幕比较矮的手机（比如 iPhone SE）：再紧凑一点，去掉向下箭头；
   首屏改成跟着内容变高（内容多时可以往下滚着看），不会被顶部导航和底部标签栏挡住 */
@media (max-width: 768px) and (max-height: 720px) {
  html #page-header.full_page {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  #page-header.full_page #site-info {
    position: relative;
    top: auto;
    transform: none;
    padding: 84px 0 104px;
  }
  #page-header.full_page #site-title { margin-bottom: 10px; }
  .hi-quote { font-size: 17px; letter-spacing: 0; }
  #page-header .hi-btn { padding: 8px 14px; font-size: 13px; gap: 6px; }
  .hi-lead { margin-top: 8px !important; font-size: 13px; line-height: 1.7; }
  .hi-tags { margin-top: 12px; }
  .hi-actions { margin-top: 16px; }
  .hi-note { margin-top: 10px !important; font-size: 11.5px; }
  #page-header.full_page #scroll-down { display: none; }
}

/* 系统开启「减少动态效果」：直接显示 */
@media (prefers-reduced-motion: reduce) {
  .hi-in { animation: none; }
}

/* ---------- 页脚：去掉主题默认的蓝色底，透出背景 ---------- */
#footer,
#footer::before {
  background: transparent !important;
}
#footer,
#footer a,
#footer .footer-other {
  color: var(--hero-title) !important;
  opacity: 0.8;
}

/* 卡片不用背景模糊（滚动时很耗性能），靠上面 --card-bg 稍高的不透明度保证文字清楚 */

/* ---------- 日夜切换 ---------- */

/* 首选：视图过渡（新旧两张画面交叉淡化，由显卡完成） */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 切换期间关掉元素自带的颜色过渡，避免新画面里还有第二层慢半拍的渐变 */
html.vt-switching *,
html.vt-switching *::before,
html.vt-switching *::after {
  transition: none !important;
}

/* 备用：浏览器不支持视图过渡、或开了减弱动态效果时，整页颜色一起渐变 */
html.theme-switching,
html.theme-switching body,
html.theme-switching body * {
  transition:
    --hero-bg-1 0.35s ease-out,
    --hero-bg-2 0.35s ease-out,
    --hero-grid 0.35s ease-out,
    --hero-title 0.35s ease-out,
    opacity 0.35s ease-out,
    background 0.35s ease-out,
    color 0.35s ease-out,
    border-color 0.35s ease-out,
    box-shadow 0.35s ease-out,
    fill 0.35s ease-out !important;
}