/* ============================================================
   ZUO PIN JI — 瑞士国际主义风格作品集 样式表
   设计系统：
     色彩  — 米白纸面 #f7f6f2 / 黑墨 #111 / 瑞士红 #e30613（唯一强调色）
     字体  — Helvetica Neue 优先，中文回落 PingFang SC
     布局  — 12 列参考网格（GRID 按钮可视化），作品网格 auto-fit 自适应
     交互  — 自定义光标、长按二级菜单、查看器/上传弹窗、跑马灯作品索引
   目录：
     1. 设计变量与基础重置    6. Hero            11. 作品网格与卡片
     2. 自定义光标            7. 跑马灯          12. 上传区
     3. 网格参考线            8. 区块标题        13. 页脚
     4. 导航与长按二级菜单    9. 个人介绍        14. 弹窗与查看器
     5. 长按进度环           10. 作品区顶栏      15. 响应式与降低动效
   ============================================================ */

/* ---------- 设计变量 ---------- */
/* AaJiJiaHei-2 自定义字体：Hero 大标题专用 */
@font-face {
  font-family: "AaJiJiaHei-2";
  src: url("fonts/AaJiJiaHei-2.woff2") format("woff2"),
       url("fonts/AaJiJiaHei-2.ttf") format("truetype");
  font-weight: 400;
  font-display: swap; /* 字体加载期间用 fallback 先渲染，避免空白 */
}

:root {
  --ink: #111111;             /* 主墨色 */
  --paper: #ffffff;           /* 纸面底色 */
  --red: #e30613;             /* 瑞士红，全站唯一强调色 */
  --line: rgba(17, 17, 17, 0.14);      /* 细分隔线 */
  --line-strong: rgba(17, 17, 17, 0.9);/* 主分隔线 */
  --grey: #8a8a86;            /* 辅助灰 */

  /* 字体栈：Helvetica 优先保证瑞士风格，中文系统字体兜底 */
  --font: "Helvetica Neue", "Neue Haas Grotesk Display Pro", Helvetica, Arial,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --nav-h: 64px;              /* 固定导航高度 */
  --gutter: clamp(20px, 4vw, 56px);  /* 页面左右留白，随视口弹性变化 */
  --maxw: 1560px;             /* 内容最大宽度 */

  --ease: cubic-bezier(0.19, 1, 0.22, 1); /* 全站统一缓动：快出慢入 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; } /* 锚点跳转平滑滚动 */

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* 防止跑马灯等宽内容撑出横向滚动条 */
  line-height: 1.5;
}

::selection { background: var(--red); color: #fff; } /* 选中文字变瑞士红 */

/* 内容容器：最大宽度居中 + 弹性左右留白 */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============ 自定义光标 ============ */
/* 红点 = 鼠标真实位置；圆环 = 惯性跟随（JS lerp 缓动），悬停交互元素时放大变红 */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999; /* 不拦截任何点击 */
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 6px; height: 6px; background: var(--red); border-radius: 50%;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cursor-ring span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; opacity: 0; text-transform: uppercase;
  transition: opacity 0.2s;
}
.cursor-ring.is-active {
  width: 72px; height: 72px;
  background: var(--red); border-color: var(--red);
  mix-blend-mode: normal;
}
.cursor-ring.is-active span { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  /* 触屏设备：大字入场改为纯淡入。iOS Safari 上 -webkit-text-stroke 配合
     translateY 动画会出现字形重影/重叠，去掉位移动画可规避 */
  .hero__line em:not(.hero__dot) { animation-name: fadeIn; }
  .hero__line em.hero__dot { animation: dotPulse 2.2s ease-in-out infinite; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ 网格参考线 ============ */
/* 11 根红色细线把内容区划成 12 列，由导航 GRID 按钮切换 body.show-grid 控制 */
.grid-lines {
  position: fixed; inset: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: none;
  pointer-events: none;
  z-index: 1;
}
.grid-lines i {
  float: left;
  width: calc(100% / 12);
  height: 100vh;
  border-left: 1px solid rgba(227, 6, 19, 0.12);
}
body.show-grid .grid-lines { display: block; }

/* ============ 导航 ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  transition: transform 0.5s var(--ease);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__logo {
  font-family: "AaJiJiaHei-2", var(--font);
  font-weight: 400; font-size: 15px; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 10px;
}
.nav__logo sup { font-size: 8px; font-family: var(--font); } /* 英文上标保持 Helvetica */
.nav__logo-mark {
  width: 14px; height: 14px; background: var(--red);
  transition: transform 0.5s var(--ease);
}
.nav__logo:hover .nav__logo-mark { transform: rotate(135deg); }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); }

.nav__link {
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 2px;
  position: relative;
}
.nav__idx { font-size: 9px; color: var(--grey); font-weight: 400; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__caret { transition: transform 0.3s var(--ease); }
.nav__works.is-open .nav__caret { transform: rotate(180deg); }

/* 长按二级菜单 */
.nav__works { position: relative; }

.nav__submenu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 12px);
  min-width: 250px;
  background: var(--ink); color: var(--paper);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  z-index: 200;
}
.nav__works.is-open .nav__submenu {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
.nav__submenu::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; background: var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.nav__submenu-hint {
  font-size: 9px; letter-spacing: 0.2em; color: var(--grey);
  padding: 12px 18px 8px;
  border-bottom: 1px solid rgba(247, 246, 242, 0.14);
}
.nav__subitem {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  padding: 14px 18px;
  font-size: 14px; font-weight: 500;
  border-bottom: 1px solid rgba(247, 246, 242, 0.08);
  transition: background 0.25s, color 0.25s, padding-left 0.3s var(--ease);
}
.nav__subitem:last-child { border-bottom: 0; }
.nav__subitem:hover { background: var(--red); color: #fff; padding-left: 26px; }
.nav__subitem.is-active { color: var(--red); }
.nav__subitem.is-active:hover { color: #fff; }
.nav__subitem-idx { font-size: 9px; color: var(--grey); }
.nav__subitem:hover .nav__subitem-idx { color: #fff; }
.nav__subitem-en { margin-left: auto; font-size: 10px; letter-spacing: 0.1em; opacity: 0.55; }

.nav__gridtoggle { display: none; }

/* 导航右上角上传按钮（替换了原来的 GRID 按钮） */
.nav__uploadcta {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  padding: 9px 16px;
  color: var(--paper); background: var(--red);
  transition: background 0.25s, color 0.25s;
}
.nav__uploadcta:hover { background: var(--ink); }

/* 模式切换按钮：作者（红点，可编辑）/ 观众（灰点，只读） */
.nav__mode {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  padding: 9px 14px;
  color: var(--ink); border: 1px solid var(--line-strong);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.nav__mode-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  transition: background 0.25s;
}
.nav__mode:hover { border-color: var(--ink); }
body.is-viewer .nav__mode { color: var(--grey); border-color: var(--line); }
body.is-viewer .nav__mode-dot { background: var(--grey); }
body.is-viewer .nav__mode:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- 观众模式：只读 ---------- */
body.is-viewer .nav__uploadcta { display: none; }           /* 隐藏上传按钮 */
body.is-viewer .nav__mode { display: none; }                /* 观众不显示模式切换，需登录进入 */
body.is-viewer .work-card__del { display: none !important; } /* 隐藏删除按钮 */
body.is-viewer .about__status { pointer-events: none; cursor: default; } /* 委托状态不可点 */
body.is-viewer #photoSlot { pointer-events: none; cursor: default; } /* 照片不可更换 */

/* 长按进度环：JS 通过 stroke-dashoffset 逐帧填充圆环 */
.hold-progress {
  position: fixed; z-index: 300;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -120%);
  transition: opacity 0.2s;
}
.hold-progress.is-visible { opacity: 1; }
.hold-progress svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.hold-progress circle {
  fill: none; stroke-width: 3;
  stroke: var(--line);
}
.hold-progress circle:last-child {
  stroke: var(--red);
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5;
}
.hold-progress span {
  font-size: 9px; letter-spacing: 0.15em; font-weight: 700;
  background: var(--ink); color: var(--paper); padding: 4px 8px;
  white-space: nowrap;
}

/* ============ HERO ============ */
/* 超大标题逐字入场（animation-delay 递进），悬停单字变红并倾斜 */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--nav-h) + 28px);
  padding-bottom: 40px;
  position: relative;
  overflow: hidden; /* 裁掉画布与装饰方块的溢出 */
}

/* 交互网格画布：铺在内容下面 */
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* 不拦截鼠标，交互监听挂在 hero 上 */
}

/* 实时坐标读数：右侧竖排 */
.hero__coords {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--grey);
  pointer-events: none;
}

/* 慢速旋转的红色线框方块 */
.hero__square {
  position: absolute; left: 56%; top: 24%;
  width: clamp(120px, 14vw, 220px); height: clamp(120px, 14vw, 220px);
  border: 1.5px solid var(--red);
  opacity: 0.55;
  pointer-events: none;
  animation: heroSpin 26s linear infinite;
}
@keyframes heroSpin { to { rotate: 360deg; } }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  border-top: 1px solid var(--line-strong);
  padding-top: 14px;
}
.hero__meta-red { color: var(--red); text-align: right; }
.hero__meta span:nth-child(3) { text-align: right; }

.hero__title {
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  user-select: none;
  margin: 4vh auto;
  width: 100%;
}
.hero__line { display: flex; justify-content: space-between; }
.hero__line em {
  font-style: normal;
  font-size: clamp(80px, 17.5vw, 300px);
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.1s var(--ease) forwards;
  /* translate 属性留给 JS 磁吸位移（逐帧写入），不进 transition；
     transform 被 rise 入场动画 fill:forwards 持有，悬停位移改用 translate/rotate */
  transition: color 0.3s, transform 0.5s var(--ease), rotate 0.5s var(--ease);
  cursor: default;
}
/* 中文四个大字用 AaJiJiaHei-2：该字体本身粗重，强制 400 避免浏览器合成加粗导致模糊 */
.hero__line:not(.hero__line--en) em {
  font-family: "AaJiJiaHei-2", var(--font);
  font-weight: 400;
}
/* 悬停：变红 + 微倾斜；上浮位移由 JS 磁吸负责 */
.hero__line em:hover { color: var(--red); rotate: -3deg; }
/* 悬停时相邻字符轻微让位，形成波动感（JS 添加 is-near） */
.hero__line em.is-near { color: var(--grey); }
/* 英文行：描边空心字，与实心中文形成虚实对比（瑞士海报经典手法） */
.hero__line--en em {
  font-family: var(--font); /* 英文字母保持 Helvetica，避免 AaJiJiaHei-2 无拉丁字形 */
  font-size: clamp(48px, 10.4vw, 178px); animation-delay: 0.08s;
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.14vw, 2px) var(--ink);
}
.hero__line--en em:hover {
  color: var(--red);
  -webkit-text-stroke-color: var(--red);
}
.hero__dot { color: var(--red); -webkit-text-stroke: 0; animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 50% { opacity: 0.25; } }
@keyframes rise { to { transform: translateY(0); } }

.hero__foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.hero__intro {
  max-width: 52ch;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.7;
}
.hero__intro strong { color: var(--red); font-weight: 700; }
.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 9px; letter-spacing: 0.3em;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(8px); } }

/* ============ 跑马灯 ============ */
/* 内容由 JS 复制为两份，动画平移 -50% 恰好循环一轮，实现无缝滚动 */
.marquee {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
  padding: 14px 0;
  background: var(--ink); color: var(--paper);
}
.marquee__track {
  display: flex; align-items: center; gap: 48px;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee__track i {
  width: 10px; height: 10px; background: var(--red); flex: none;
}
.marquee__item {
  font-size: 13px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--paper); background: none; border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s, text-decoration-color 0.25s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.marquee__item:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ 区块标题 ============ */
.section-head {
  display: flex; align-items: baseline; gap: 20px;
  padding-top: 72px; margin-bottom: 36px;
}
/* 序号与标题统一比例：同字号族、同字重，用颜色区分层级 */
.section-head__idx {
  font-size: clamp(18px, 2.2vw, 32px); color: var(--red); font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.3s var(--ease);
}
.section-head__idx::before {
  content: ""; width: 10px; height: 10px; background: var(--red);
  transition: transform 0.4s var(--ease);
}
.section-head:hover .section-head__idx { gap: 14px; }
.section-head:hover .section-head__idx::before { transform: rotate(45deg); }
.section-head__title {
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 16px;
  cursor: default;
  position: relative;
  transition: color 0.3s, translate 0.45s var(--ease);
}
/* 标题悬停：整体轻微右移，中文变红，英文小字显色 */
.section-head__title:hover { translate: 6px 0; }
.section-head__title:hover small { color: var(--red); }
.section-head__title small {
  font-size: 11px; letter-spacing: 0.24em; color: var(--grey); font-weight: 400;
  transition: color 0.3s;
}
/* 分隔线：悬停时变红并从左生长 */
.section-head__rule {
  flex: 1; height: 1px; background: var(--line-strong);
  align-self: center;
  position: relative; overflow: hidden;
}
.section-head__rule::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.section-head:hover .section-head__rule::after { transform: scaleX(1); }

/* ============ 关于 ============ */
.about__grid {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  gap: clamp(20px, 2.6vw, 40px);
  padding-bottom: 72px;
  align-items: start;
}
.about__photo { position: relative; overflow: hidden; cursor: pointer; }
.about__photo img[hidden] { display: none; } /* 覆盖全局 img{display:block}，无照片时真正隐藏 */
.about__photo img {
  aspect-ratio: 1/1;
  transition: transform 0.8s var(--ease);
}
.about__photo:hover img { transform: scale(1.03); }

/* 无照片时的占位：虚线框 + 居中加号 */
.about__photo-empty {
  aspect-ratio: 1/1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  border: 1.5px dashed var(--line-strong);
  transition: border-color 0.3s, background 0.3s;
}
/* display:flex 会覆盖 hidden 属性的 display:none，需显式声明 */
.about__photo-empty[hidden] { display: none; }
.about__photo:hover .about__photo-empty { border-color: var(--red); background: rgba(227, 6, 19, 0.04); }
.about__photo-plus { font-size: 56px; font-weight: 300; line-height: 1; color: var(--red); }
.about__photo-tip { font-size: 11px; letter-spacing: 0.16em; color: var(--grey); }
.about__photo figcaption {
  position: absolute; bottom: 12px; left: 12px;
  font-size: 9px; letter-spacing: 0.2em;
  background: var(--paper); padding: 4px 8px; font-weight: 700;
}
.about__lead {
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700; line-height: 1.45;
  margin-bottom: 18px;
}
.about__text p + p { margin-top: 12px; color: #3d3d3a; }
.about__facts { display: flex; flex-direction: column; }
.about__facts > div {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.about__facts dt {
  font-size: 9px; letter-spacing: 0.22em; color: var(--grey); margin-bottom: 4px;
}
.about__facts dd { font-size: 14px; font-weight: 500; }

/* 委托状态开关：红 = 接受委托(Open)，灰 = 暂停委托(Close) */
.about__status { font-size: 14px; font-weight: 500; padding: 0; transition: color 0.3s; }
.about__status b { font-weight: 700; }
.about__status.is-open { color: var(--red); }
.about__status:not(.is-open) { color: var(--grey); }
.about__status:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ 作品 ============ */
.works__bar {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 40px;
}
.works__current-label {
  display: block; font-size: 9px; letter-spacing: 0.22em; color: var(--grey);
  margin-bottom: 4px;
}
.works__current-name {
  font-size: clamp(22px, 2.4vw, 34px); font-weight: 700;
}
.works__current-count { color: var(--red); font-weight: 700; font-size: 14px; margin-left: 6px; }

.works__tabs { display: flex; gap: 8px; }
.works__tab {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s;
}
.works__tab:hover { transform: translateY(-2px); }
.works__tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }

.works__tip {
  font-size: 11px; letter-spacing: 0.1em; color: var(--grey);
  margin-bottom: 24px;
}

/* 统一自适应网格 — auto-fit 按容器宽度自动增减列数，
   min(340px, 100%) 保证窄屏下最小宽度让位于 100% 不溢出 */
/* 作品区改为横向轮播轨道：内容翻倍实现无缝循环，
   JS 用 transform 平移；悬停暂停自动播放，可自由左右拖动 */
.works { overflow: hidden; }
.works__grid {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  width: max-content;
  padding-bottom: 96px;
  will-change: transform;
  cursor: grab;
  /* 触屏：纵向手势留给页面滚动，横向手势交给 JS 拖动轮播，
     否则浏览器会按默认滚动吞掉 pointermove 导致滑不动 */
  touch-action: pan-y;
}
.works__grid.is-dragging { cursor: grabbing; }
.work-card {
  flex: none;
  width: clamp(280px, 26vw, 400px);
  position: relative;
  display: block;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(32px);
  animation: cardIn 0.8s var(--ease) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }

.work-card__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #e6e4de;
  border: 1px solid var(--line);
}
.work-card__desc { display: block; }
.work-card__frame img, .work-card__frame video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.5s;
}
.work-card:hover .work-card__frame img,
.work-card:hover .work-card__frame video { transform: scale(1.045); }

/* 悬停操作提示层 */
.work-card__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 17, 0.55);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.work-card:hover .work-card__overlay,
.work-card:focus-visible .work-card__overlay { opacity: 1; }
.work-card__overlay span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  color: #fff; border: 1px solid #fff; padding: 12px 22px;
  transform: translateY(8px);
  transition: transform 0.35s var(--ease);
}
.work-card:hover .work-card__overlay span { transform: translateY(0); }

.work-card__play {
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  background: var(--red); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease);
}
.work-card:hover .work-card__play { transform: translate(-50%, -50%) scale(1.12); }
.work-card__play svg { margin-left: 3px; }

.work-card__cube {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
}

.work-card__filetype {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(45deg, #efeee9 0 12px, #e9e8e2 12px 24px);
  font-weight: 700; font-size: 20px; letter-spacing: 0.1em;
}
.work-card__filetype small { font-size: 10px; color: var(--grey); font-weight: 400; letter-spacing: 0.2em; }

.work-card__badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  background: var(--paper); padding: 4px 8px;
}

/* 长按卡片后出现的删除按钮（右上角）。
   z-index 必须高于 .work-card__overlay(2)，否则悬停遮罩会盖住按钮拦截点击 */
.work-card__del {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  background: var(--ink); color: var(--paper);
  padding: 7px 12px;
  cursor: pointer;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s var(--ease), background 0.25s;
}
.work-card.is-deletable .work-card__del {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.work-card.is-deletable .work-card__del:hover { background: var(--red); }
/* 长按激活时卡片整体轻微抖动提示进入了删除模式 */
.work-card.is-deletable .work-card__frame { outline: 2px solid var(--red); outline-offset: -2px; }
/* 二次确认状态 */
.work-card__del.is-confirm { background: var(--red); }
.work-card__badge--new { background: var(--red); color: #fff; left: auto; right: 10px; top: 44px; }

.work-card__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; gap: 12px;
}
.work-card__title { font-size: 16px; font-weight: 700; }
.work-card__no { font-size: 10px; color: var(--grey); letter-spacing: 0.1em; flex: none; }
.work-card__desc { font-size: 12px; color: #55554f; margin-top: 4px; }

.works__empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-strong);
  padding: 80px 24px; text-align: center;
  color: var(--grey); font-size: 13px; letter-spacing: 0.08em;
}

/* ============ 上传 ============ */
.upload { padding-bottom: 96px; }
.upload__zone {
  border: 2px dashed var(--line-strong);
  padding: clamp(48px, 7vw, 96px) 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background 0.3s;
  outline-offset: 4px;
}
.upload__zone:hover, .upload__zone:focus-visible { border-color: var(--red); }
.upload__zone.is-dragover {
  border-color: var(--red); border-style: solid;
  background: rgba(227, 6, 19, 0.05);
}
.upload__zone.is-dragover .upload__icon { transform: translateY(-8px); color: var(--red); }
.upload__icon { margin: 0 auto 20px; transition: transform 0.4s var(--ease), color 0.3s; }
.upload__title { font-size: clamp(18px, 2vw, 26px); font-weight: 700; }
.upload__sub { font-size: 12px; color: var(--grey); margin-top: 8px; letter-spacing: 0.06em; }
.upload__hint {
  display: inline-block;
  margin-top: 24px; font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid var(--line); padding: 8px 16px;
}
.upload__hint strong { color: var(--red); }

.upload__list {
  list-style: none;
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.upload-item {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: #fff;
  animation: cardIn 0.5s var(--ease);
}
.upload-item__thumb {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  overflow: hidden;
}
.upload-item__thumb img, .upload-item__thumb video { width: 100%; height: 100%; object-fit: cover; }
.upload-item__info { min-width: 0; flex: 1; }
.upload-item__name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-item__meta { font-size: 10px; color: var(--grey); letter-spacing: 0.06em; margin-top: 2px; }
.upload-item__ok {
  width: 20px; height: 20px; flex: none;
  background: var(--red); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* ============ 页脚 ============ */
.footer { padding-bottom: 48px; }

/* 联系区：左 CTA + 右链接列表 双栏网格 */
.footer__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: 64px;
}
.footer__cta-label {
  font-size: 12px; letter-spacing: 0.22em; font-weight: 700;
  color: var(--grey);
  margin-bottom: 20px;
  line-height: 1.9;
}
.footer__mail {
  display: inline-block;
  font-size: clamp(30px, 4.6vw, 72px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.08;
  position: relative;
  transition: color 0.35s;
}
/* 红色下划线从左滑入 */
.footer__mail::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 100%; height: clamp(2px, 0.4vw, 5px); background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.footer__mail:hover { color: var(--red); }
.footer__mail:hover::after { transform: scaleX(1); transform-origin: left; }
/* 箭头：默认隐藏，悬停时滑入 */
.footer__mail-arrow {
  display: inline-block;
  color: var(--red);
  margin-left: 0.15em;
  opacity: 0; translate: -12px 0;
  transition: opacity 0.35s, translate 0.45s var(--ease);
}
.footer__mail:hover .footer__mail-arrow { opacity: 1; translate: 0 0; }

/* 右侧：带编号的社交链接列表 */
.footer__list { list-style: none; border-top: 2px solid var(--ink); }
.footer__list li { border-bottom: 1px solid var(--line); }
.footer__list a {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 12px;
  font-size: 16px; font-weight: 700;
  transition: background 0.3s, color 0.3s, padding-left 0.35s var(--ease);
}
.footer__list-idx {
  font-size: 10px; letter-spacing: 0.14em; color: var(--red);
  font-weight: 700;
}
.footer__list-en {
  margin-left: auto;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 500;
  color: var(--grey);
}
.footer__list-arrow {
  font-weight: 400;
  transition: transform 0.35s var(--ease), color 0.3s;
}
.footer__list a:hover {
  background: var(--ink); color: var(--paper);
  padding-left: 20px;
}
.footer__list a:hover .footer__list-en { color: rgba(247,246,242,0.6); }
.footer__list a:hover .footer__list-arrow { transform: translate(4px, -4px); color: var(--red); }
/* 图标：描边统一风格，悬停时轻微放大倾斜 */
.footer__list a svg { flex: none; transition: transform 0.35s var(--ease); }
.footer__list a:hover svg { transform: scale(1.15) rotate(-6deg); }
.footer__meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
  font-size: 10px; letter-spacing: 0.16em; color: var(--grey);
  text-transform: uppercase;
}
.footer__meta a:hover { color: var(--red); }

/* ============ 滚动显现 ============ */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============ 弹窗（上传 & 查看器共用） ============ */
dialog {
  border: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  max-width: none; max-height: none;
  /* 所有弹窗强制视口居中 */
  position: fixed;
  inset: 0;
  margin: auto;
}
dialog::backdrop {
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(4px);
}
dialog[open] { animation: modalIn 0.45s var(--ease); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
}

.modal {
  width: min(680px, calc(100vw - 40px));
  border: 1px solid var(--line-strong);
}
.modal__head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-strong);
}
.modal__idx {
  font-size: 11px; color: var(--red); font-weight: 700;
  border: 1px solid var(--red); padding: 2px 7px;
}
.modal__title {
  font-size: 22px; font-weight: 700;
  display: flex; align-items: baseline; gap: 12px;
}
.modal__title small { font-size: 9px; letter-spacing: 0.22em; color: var(--grey); font-weight: 400; }
.modal__tip {
  margin-left: auto;
  font-size: 10px; letter-spacing: 0.14em; color: var(--grey);
  white-space: nowrap;
}
.modal__tip--light { color: rgba(247, 246, 242, 0.55); margin-left: 16px; }

.modal__body { padding: 24px; max-height: 70vh; overflow: auto; }
.modal__field { margin-bottom: 20px; }
.modal__label {
  display: block; font-size: 9px; letter-spacing: 0.22em; color: var(--grey); margin-bottom: 8px;
}
.modal__cats { display: flex; gap: 8px; }
.modal__cat {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  padding: 9px 16px; border: 1px solid var(--line-strong);
  transition: background 0.3s, color 0.3s;
}
.modal__cat.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* 弹窗内的上传区 */
.modal .upload__zone { padding: 40px 20px; }
.modal .upload__list { grid-template-columns: 1fr; }

/* ---------- 登录弹窗 ---------- */
.modal--login { width: min(420px, calc(100vw - 40px)); }
.login { display: flex; flex-direction: column; gap: 22px; }
.login__input {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 14px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong);
  transition: border-color 0.25s;
}
.login__input:focus { outline: none; border-color: var(--red); }
.login__error {
  min-height: 1em; margin: 0;
  font-size: 12px; color: var(--red); letter-spacing: 0.06em;
}
.login__submit {
  padding: 13px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.login__submit:hover { background: var(--red); border-color: var(--red); }
/* 密码错误时的抖动动画 */
.login.is-shake { animation: login-shake 0.4s; }
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ============ 作品查看器 ============ */
/* 作者样式的 display 会覆盖 UA 的 dialog:not([open]){display:none}，
   必须显式声明关闭状态隐藏，否则弹窗会常驻页面底部 */
.viewer:not([open]) { display: none; }

.viewer {
  width: min(1180px, calc(100vw - 48px));
  height: min(82vh, 860px);
  display: flex; flex-direction: column;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--paper);
}
.viewer__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(247, 246, 242, 0.2);
  flex: none;
}
/* 左上角红色标签 = 分类徽章 + 关闭按钮二合一：悬停时切换为「✕ 关闭」 */
.viewer__badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  background: var(--red); color: #fff; padding: 4px 10px; flex: none;
  position: relative; overflow: hidden; cursor: pointer;
  min-width: 76px; height: 24px; /* 两个 span 均为绝对定位，需显式高度 */
  /* flex 居中；letter-spacing 会在文字右侧多出字距，用左 padding 补偿 */
  display: flex; align-items: center; justify-content: center;
  padding-left: calc(10px + 0.2em);
}
.viewer__badge span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease), opacity 0.25s;
}
.viewer__badge-x {
  transform: translateY(100%); opacity: 0;
}
.viewer__badge:hover #viewerBadge { transform: translateY(-100%); opacity: 0; }
.viewer__badge:hover .viewer__badge-x { transform: translateY(0); opacity: 1; }
.viewer__title { font-size: 16px; font-weight: 700; }
.viewer__hint {
  margin-left: auto; font-size: 10px; letter-spacing: 0.14em; color: var(--grey);
  white-space: nowrap;
}

.viewer__stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
/* 图片：滚轮缩放 + 拖拽平移 */
.viewer__imgwrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in; overflow: hidden;
}
.viewer__imgwrap img {
  max-width: 92%; max-height: 92%;
  width: auto; height: auto; object-fit: contain;
  transition: transform 0.25s ease-out;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.viewer__imgwrap.is-zoomed { cursor: grab; }
.viewer__imgwrap.is-dragging { cursor: grabbing; }
.viewer__imgwrap.is-zoomed img { transition: none; }

/* 视频 */
.viewer__stage video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

/* 3D 模型 */
.viewer__stage model-viewer {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, #2a2a28 0%, #141413 70%);
  --poster-color: transparent;
}

/* 不可预览文件 */
.viewer__file {
  text-align: center;
}
.viewer__file-ext {
  font-size: clamp(48px, 8vw, 96px); font-weight: 700; letter-spacing: 0.04em;
  color: var(--red);
}
.viewer__file-meta { font-size: 12px; color: var(--grey); margin-top: 8px; letter-spacing: 0.1em; }
.viewer__file-dl {
  display: inline-block; margin-top: 28px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  border: 1px solid var(--paper); color: var(--paper);
  padding: 14px 28px;
  transition: background 0.3s, color 0.3s;
}
.viewer__file-dl:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* 查看器底部：名称 / 时间 / 介绍 */
.viewer__detail {
  display: grid; grid-template-columns: auto auto 1fr; gap: 32px;
  padding: 14px 20px;
  border-top: 1px solid rgba(247,246,242,0.2);
  color: var(--paper);
}
.viewer__detail-item dt {
  font-size: 9px; letter-spacing: 0.22em; color: rgba(247,246,242,0.5); margin-bottom: 4px;
}
.viewer__detail-item dd { font-size: 13px; font-weight: 500; line-height: 1.5; }
.viewer__detail-item--wide dd { font-weight: 400; color: rgba(247,246,242,0.8); }

/* ============ 响应式：完整断点系统 ============
   1200px — 平板横屏 / 小桌面
   900px  — 平板竖屏（about 双栏折叠、footer 单栏、隐藏坐标）
   640px  — 手机大屏（隐藏汉堡菜单/网格按钮、查看器全屏、卡片占屏 72%）
   480px  — 手机小屏（导航压缩、hero 字号、弹窗全屏、隐藏光标）
   ================================================ */

@media (max-width: 1200px) {
  .work-card { width: clamp(240px, 28vw, 360px); }
  .about__grid { grid-template-columns: 3fr 4fr 2fr; gap: 24px; }
  .footer__grid { gap: 56px; }
  .modal__box { width: min(720px, 90vw); }
  .viewer { width: min(860px, 92vw); }
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__coords { display: none; }
  .work-card { width: clamp(220px, 32vw, 320px); }
  .hero__line em { font-size: clamp(56px, 12vw, 120px); }
  .hero__line--en em { font-size: clamp(36px, 8vw, 80px); }
  .footer__mail { font-size: clamp(24px, 5vw, 48px); }
}

@media (max-width: 640px) {
  .nav__idx { display: none; }
  .nav__gridtoggle { display: none; }
  .nav { gap: 12px; }
  .nav__links { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__link { white-space: nowrap; }
  .hero__meta { grid-template-columns: 1fr 1fr; }
  .hero__meta-red, .hero__meta span:nth-child(3) { text-align: left; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__scroll { display: none; }
  .hero { min-height: 100svh; } /* 窄屏首页只显示 hero，占满一屏 */
  .hero__title { margin: auto; }
  .hero__square { display: none; } /* 删除旋转方框 */
  /* 窄屏：中文「零号 / 仓库」两行两列，错落无序 + 大行距 + 缓动 */
  .hero__line:not(.hero__line--en) {
    display: grid; grid-template-columns: 1fr 1fr; justify-items: center;
    gap: 5vh 4px; /* 行距拉大 */
  }
  .hero__line:not(.hero__line--en) em {
    font-size: clamp(88px, 26vw, 140px);
    /* 错落无序：每个字不同的偏移与旋转，hover 时回正 */
    transition: color 0.3s, transform 0.9s var(--ease), rotate 0.9s var(--ease);
  }
  .hero__line:not(.hero__line--en) em:nth-child(1) { rotate: -5deg; translate: -6px 4px; animation-delay: 0s; }
  .hero__line:not(.hero__line--en) em:nth-child(2) { rotate: 3deg; translate: 8px -6px; animation-delay: 0.12s; }
  .hero__line:not(.hero__line--en) em:nth-child(3) { rotate: 4deg; translate: -8px -2px; animation-delay: 0.24s; }
  .hero__line:not(.hero__line--en) em:nth-child(4) { rotate: -3deg; translate: 6px 6px; animation-delay: 0.36s; }
  .hero__line:not(.hero__line--en) em:hover {
    rotate: 0deg; translate: 0 0;
    color: var(--red);
  }
  /* 英文行：居中均分小字号，避免 space-between 把句号挤出屏幕、
     不同系统字体度量不一导致的重叠 */
  .hero__line--en {
    margin-top: 4vh;
    justify-content: center;
    letter-spacing: 0;
    column-gap: 0.04em;
  }
  .hero__line--en em {
    font-size: clamp(24px, 8.2vw, 52px);
    -webkit-text-stroke-width: 1px;
    letter-spacing: 0;
  }
  .about__grid { grid-template-columns: 1fr; }
  .viewer { width: 100vw; height: 100vh; border: 0; }
  .viewer__hint { display: none; }
  .works__bar { flex-direction: column; align-items: flex-start; }
  .nav__submenu { left: auto; right: -20px; transform: translate(0, 12px); }
  .nav__works.is-open .nav__submenu { transform: translate(0, 0); }
  .nav__submenu::before { left: auto; right: 40px; transform: rotate(45deg); }
  .work-card { width: clamp(200px, 72vw, 300px); }
  .modal { width: 95vw; height: 92vh; }
  .modal .upload__zone { padding: 32px 16px; }
  .upload__zone { padding: 40px 20px; }
  .footer__grid { gap: 32px; padding-bottom: 44px; }
  .footer__cta-label { margin-bottom: 14px; font-size: 11px; line-height: 1.7; }
  /* 长邮箱允许在任意字符间断行，防止溢出撑破布局 */
  .footer__mail {
    font-size: clamp(19px, 5.8vw, 30px);
    overflow-wrap: anywhere; word-break: break-word;
  }
  .footer__list a { font-size: 14px; padding: 15px 6px; gap: 12px; }
  .footer__list-name { width: auto; min-width: 78px; }
  .footer__list-en { font-size: 9px; }
  .footer__meta { font-size: 10px; padding-top: 16px; }
  .section-head { flex-wrap: wrap; gap: 8px 16px; }
  .marquee__track { gap: 28px; }
  .marquee__item { font-size: 11px; }
}

@media (max-width: 480px) {
  :root { --nav-h: 54px; }
  .hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 24px; min-height: 100svh; }
  .hero__line:not(.hero__line--en) em { font-size: clamp(68px, 22vw, 110px); }
  .hero__line--en em { font-size: clamp(22px, 7.6vw, 46px); }
  .hero__title { margin: 4vh auto; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 6px; font-size: 10px; }
  .hero__intro { font-size: 12px; max-width: 100%; }
  .section-head__title { font-size: clamp(24px, 8vw, 40px); gap: 8px; }
  .section-head__idx { font-size: clamp(14px, 4vw, 20px); }
  .section-head__rule { display: none; }
  .work-card { width: clamp(170px, 78vw, 260px); }
  .work-card__meta { font-size: 13px; }
  .about__photo-empty { padding: 20px; }
  .about__photo-plus { font-size: 40px; }
  .about__facts dt { font-size: 9px; }
  .about__facts dd { font-size: 13px; }
  .footer__mail { font-size: clamp(17px, 5.6vw, 26px); letter-spacing: -0.01em; }
  .viewer__detail { grid-template-columns: 1fr 1fr; }
  .viewer__detail-item--wide { grid-column: 1 / -1; }
  .cursor-dot, .cursor-ring { display: none; }
  .nav__hamburger { width: 32px; height: 20px; }
}

/* ============ 降低动效 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}