@charset "UTF-8";
/* =====================================================================
   zoma.dev 静态化补丁
   原站由 React 客户端脚本负责的那部分视觉状态，在这里用少量 CSS 补齐
   两个 Tailwind 编译产物保持原样，不修改一个字节
   ===================================================================== */

/* 当前页 Home 图标下方的小圆点 */
a[data-dock-id="home"]::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  opacity: .85;
  pointer-events: none;
}

/* Dock 滑块 / 光晕 / tooltip 的过渡（位置与显隐由 site.js 控制） */
[data-dock-indicator],
[data-dock-glow],
[data-dock-tooltip] {
  transition:
    opacity 220ms ease,
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    width 260ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
[data-dock-tooltip] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* 早期项目折叠容器 */
[data-projects-panel] {
  transition: height 360ms cubic-bezier(.22, 1, .36, 1);
}
[data-projects-panel] > ul > li {
  transition:
    opacity 300ms ease,
    filter 300ms ease,
    transform 380ms cubic-bezier(.22, 1, .36, 1);
}

/* 主题按钮图标 */
[data-dock-id="theme"] svg {
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}

/* 折叠箭头 */
[data-toggle-chevron] {
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
[aria-expanded="true"] [data-toggle-chevron] {
  transform: rotate(180deg);
}

/* 头像：图片已预裁成 512×512 正方形；这里兜底，
   以后若直接换成非正方形照片也不会被拉伸变形 */
img[src*="avatar"] {
  object-fit: cover;
  object-position: center;
}

/* v1.4 · 三个栏目标题：字号调大 + 加粗 */
h2#about,
h2#socials,
h2#projects {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* v1.4 · 正文：右边界向右延伸到整列 + 文字加粗
   v1.5 · 再向右扩展 160px，并取消 text-balance 的均衡折行，
          让中文自然铺满每行，不再挤成靠左的窄块 */
#about ~ div.prose {
  max-width: none;
  width: min(calc(100% + 200px), calc(100vw - 48px));
  /* 注意：text-wrap:normal 不是 Chrome 认可的简写值，整条声明会被丢弃。
     pretty = 自然折行 + 避开末行孤字，既不会像 balance 把文字压成窄块，
     也不会出现「津。」独占一行的难看断行 */
  text-wrap: pretty;
  font-weight: 500;
}
#about ~ div.prose p {
  font-weight: 500;
}

/* v1.4 · 微信二维码浮层 */
a[data-wechat-qr] { cursor: pointer; }
#wechatQr {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 210px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .14);
  text-align: center;
  animation: qr-in 180ms cubic-bezier(.22, 1, .36, 1);
}
/* 作者样式里的 display 会盖掉 UA 的 [hidden]，必须显式兜底 */
#wechatQr[hidden] { display: none !important; }
#wechatQr img {
  display: block;
  width: 184px;
  height: 184px;
  margin: 0 auto;
  border-radius: 6px;
}
#wechatQr span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
@keyframes qr-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* 首屏渐入：避免无脚本时内容停在 opacity:0 */
.animate-in {
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   v1.5 · 整站字体统一为苹果字体栈
   macOS / iOS 命中 -apple-system (SF Pro) + PingFang SC (苹方)；
   Windows 上没有苹果字体时回退到微软雅黑，中文不会掉进不可控的默认字体。
   Geist 的 @font-face 仍保留在包内，但已不再被任何元素引用。
   =================================================================== */
:root {
  --font-geist-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-geist-mono: -apple-system, BlinkMacSystemFont, "SF Mono", "PingFang SC", "Microsoft YaHei", monospace;
  --default-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --default-mono-font-family: -apple-system, BlinkMacSystemFont, "SF Mono", "PingFang SC", "Microsoft YaHei", monospace;
}
html,
body,
body *,
body *::before,
body *::after {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
               "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}


/* ===================================================================
   v2.2 · 背景系统 = viral.app 完全复刻：静态层在 index.html
   （23px logo 图案平铺 + 底部径向 mask + opacity .35 + 6% 主色混底），
   鼠标透镜/聚焦/视差由 site.js 第 6 节 mountLogoField 移植驱动。
   此前的自制点阵/网格/光晕层（body::before/::after）已删除。
   =================================================================== */
body { isolation: isolate; }
  to   { transform: scale(1.06) translate3d(0, -1.2%, 0); opacity: 1; }
}

/* ===================================================================
   v1.8 · 头像 hover：放大 + 微转 + 橙色光环呼吸
   默认态保留原站 ring-4 / ring-offset-2，hover 时才换成多层橙光环。
   =================================================================== */
img[src*="avatar"] {
  transform-origin: center;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s ease, filter .5s ease;
  will-change: transform;
}
img[src*="avatar"]:hover {
  transform: scale(1.09) rotate(-4deg);
  filter: saturate(1.12) brightness(1.05);
  animation: qzyAvatarHalo 2.2s ease-out infinite;
}
@keyframes qzyAvatarHalo {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--background),
                0 0 0 6px rgba(255, 116, 61, .85),
                0 0 0 12px rgba(255, 116, 61, .20),
                0 16px 36px -10px rgba(255, 116, 61, .55);
  }
  50% {
    box-shadow: 0 0 0 2px var(--background),
                0 0 0 7px rgba(255, 116, 61, .85),
                0 0 0 19px rgba(255, 116, 61, .05),
                0 16px 42px -8px rgba(255, 116, 61, .70);
  }
}

/* ===================================================================
   v1.8 · 站名 hover：两段文字错峰上浮 + 一道橙光扫过字面
   用 background-clip:text 做扫光，文本节点不变（h1 仍是 Qiu Zhouyuan）。
   =================================================================== */
/* 扫光必须挂在 span 自己身上：若放在 h1 上，span 一旦 transform 就会
   脱离父级的 background-clip:text 裁剪，-webkit-text-fill-color:transparent
   会让整行文字直接消失。 */
h1[aria-label="Qiu Zhouyuan"] span {
  --qzy-ink: var(--foreground);
  display: inline-block;
  background-image: linear-gradient(100deg,
      var(--qzy-ink) 0%, var(--qzy-ink) 38%,
      #ff9a6b 46%, #ff743d 50%, #ff9a6b 54%,
      var(--qzy-ink) 62%, var(--qzy-ink) 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              background-position 1.05s cubic-bezier(.22, 1, .36, 1);
}
/* hover 期间循环扫光；渐变两端同为纯色，循环回跳不可见 */
h1[aria-label="Qiu Zhouyuan"]:hover span {
  animation: qzyH1Shine 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes qzyH1Shine {
  0%, 12%   { background-position: 0% 0; }
  62%, 100% { background-position: 100% 0; }
}
h1[aria-label="Qiu Zhouyuan"]:hover span:nth-child(1) {
  transform: translateY(-4px) rotate(-1.5deg);
}
h1[aria-label="Qiu Zhouyuan"]:hover span:nth-child(2) {
  transform: translateY(-4px) rotate(1.5deg);
  transition-delay: .06s;
  animation-delay: .14s;
}