/* ============================================================
   李沛泽 Peize Li — 个人影像作品集
   配色/字体在 :root 变量里改；卡片比例见 .work__card
   ============================================================ */
:root {
  --bg: #0a0a0a;
  --bg-soft: #131313;
  --fg: #f2f2f2;
  --muted: #999;
  --accent: #c9a24b;       /* 电影感暖金 */
  --maxw: 1200px;
  --serif: "Playfair Display", Georgia, "Songti SC", serif;
  --sans: "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 导航 ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  transition: background .3s ease, padding .3s ease;
}
.nav.is-scrolled {
  background: rgba(10,10,10,.86);
  backdrop-filter: blur(10px);
  padding: 14px 40px;
}
.nav__logo { color: var(--fg); font-family: var(--serif); font-size: 22px; letter-spacing: 3px; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { color: var(--fg); text-decoration: none; font-size: 14px; letter-spacing: 1px; opacity: .85; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* 无背景视频时的兜底：冷调深色渐晕 */
  background: radial-gradient(ellipse at 50% 38%, #1a2433 0%, #0d1219 45%, #070707 100%);
}
/* 若放入了 assets/hero.mp4，取消 HTML 中 hero 内 video 标签的注释，它会覆盖背景 */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7)); }
.hero__content { position: relative; text-align: center; padding: 0 20px; }
.hero__name { font-family: var(--serif); font-size: clamp(42px, 9vw, 108px); font-weight: 700; letter-spacing: 6px; }
.hero__cn { margin-top: 10px; font-family: var(--serif); font-size: clamp(20px, 3vw, 30px); letter-spacing: 10px; color: var(--accent); }
/* 两行职务文字：限宽 + 居中，保证中英文混排在桌面端与移动端都能正常换行 */
.hero__role, .hero__roles {
  max-width: min(88vw, 660px); margin-left: auto; margin-right: auto;
  line-height: 1.75; word-break: keep-all;
}
.hero__role { margin-top: 26px; font-size: clamp(15px, 2.3vw, 20px); letter-spacing: 3px; color: var(--muted); text-transform: uppercase; }
.hero__roles { margin-top: 10px; font-size: clamp(13px, 1.9vw, 16px); letter-spacing: 2px; color: #6f6f6f; }
.hero__scroll { display: inline-block; margin-top: 54px; color: var(--fg); text-decoration: none; font-size: 13px; letter-spacing: 2px; opacity: .7; animation: bob 2s infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

/* ---------- 通用区块 ---------- */
.section-head { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-title { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); font-weight: 500; }
.work, .about, .contact { padding: 110px 0; }

/* ---------- 作品分类 ---------- */
.work__tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tab {
  background: none; border: 1px solid #2a2a2a; color: var(--muted);
  padding: 8px 16px; border-radius: 30px; font-size: 13px; cursor: pointer;
  letter-spacing: 1px; transition: all .2s; white-space: nowrap;
}
.tab:hover { color: var(--fg); border-color: #555; }
.tab.is-active { background: var(--fg); color: #000; border-color: var(--fg); }

/* ---------- 分组标题 ---------- */
.group { max-width: var(--maxw); margin: 60px auto 0; padding: 0 40px; }
.group:first-child { margin-top: 50px; }
.group__label {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 1px solid #1e1e1e; display: flex; align-items: baseline; gap: 10px;
}
.group__label em { font-style: normal; font-size: 15px; color: var(--fg); letter-spacing: 2px; }

/* ---------- 作品卡片（纯文字封面）---------- */
.work__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 34px 22px; }
.work__item { cursor: pointer; }
.work__card {
  position: relative; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden;
  background: var(--bg-soft);
  transition: transform .5s ease, box-shadow .5s ease;
}
.work__item:hover .work__card { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

/* 文字封面：背景为取自海报主色调的渐变（行内 style 注入），
   文字颜色由 JS 按背景明暗自动切换，并叠一层反向柔光/暗影保证可读性 */
.work__cover {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 26px 20px; text-align: center;
}
.work__cover-cn {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.32; letter-spacing: 2px;
  white-space: pre-line;   /* 支持在片名中用 \n 指定断行位置 */
  text-shadow: 0 1px 14px var(--card-shadow, rgba(0,0,0,.35));
}
.work__cover-en {
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; opacity: .74;
  text-shadow: 0 1px 12px var(--card-shadow, rgba(0,0,0,.35));
}

.work__veil { position: absolute; inset: 0; background: rgba(0,0,0,.18); opacity: 0; transition: opacity .3s; }
.work__item:hover .work__veil { opacity: 1; }
.work__veil b {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-weight: 400; font-size: 12px; letter-spacing: 3px;
  color: inherit; border: 1px solid currentColor; padding: 9px 18px; border-radius: 30px;
}

/* 卡片下方信息：年份 · 类型 + 奖项 */
.work__meta { padding: 14px 4px 0; }
.work__sub { font-size: 11px; color: var(--muted); letter-spacing: 1px; margin-top: 5px; }
.work__award { display: inline-block; margin-top: 7px; font-size: 10px; letter-spacing: 1px; color: var(--accent); border: 1px solid rgba(201,162,75,.4); padding: 2px 7px; border-radius: 3px; }

/* ---------- 关于 ---------- */
.about { background: var(--bg-soft); }
.about__inner { max-width: 1060px; margin: 0 auto; padding: 0 40px; }
/* 双栏：左侧中英双语正文 + 右侧作者肖像 */
.about__grid { display: grid; grid-template-columns: 1fr 0.74fr; gap: 56px; align-items: start; margin-top: 30px; }
.about__text { color: #cfcfcf; font-size: 16px; }
.about__text p { margin-bottom: 14px; }
/* 英文段落：紧随对应的中文段落之后，用次级色 + 略小字号区分层级，段间距更大以形成段落组 */
.about__text .about__en { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 26px; }

/* 作者肖像：压暗、降饱和以贴合深色基调，底部渐隐融进 About 背景，避免生硬边界 */
.about__portrait { position: relative; margin: 0; border-radius: 6px; overflow: hidden; }
.about__portrait img {
  display: block; width: 100%; height: auto;
  filter: brightness(.86) saturate(.82) contrast(.95);
}
.about__portrait::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(0deg, var(--bg-soft) 0%, rgba(0,0,0,0) 100%);
}

/* ---------- 联系 ---------- */
.contact__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; text-align: center; }
.contact__email { margin-top: 24px; font-family: var(--serif); font-size: clamp(20px, 3.6vw, 34px); word-break: break-all; }
.contact__email a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); }
.contact__social { margin-top: 30px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.contact__social a {
  color: var(--muted); text-decoration: none; font-size: 14px; letter-spacing: 1px;
  padding-bottom: 3px; border-bottom: 1px solid transparent; transition: all .2s;
}
.contact__social a:hover { color: var(--accent); border-color: var(--accent); }
.contact__wx { color: var(--muted); font-size: 14px; letter-spacing: 1px; }

/* ---------- 页脚 ---------- */
.footer { text-align: center; padding: 40px; color: #6f6f6f; font-size: 12px; border-top: 1px solid #1c1c1c; }

/* ---------- 作品详情弹窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.93);
  display: none; align-items: center; justify-content: center;
  padding: 50px 20px; overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal__panel {
  position: relative; width: min(94vw, 980px); max-height: 90vh; overflow-y: auto;
  background: #111; border-radius: 8px; overflow: hidden;
  display: grid; grid-template-columns: 42% 58%;
}
.modal__close {
  position: absolute; top: 16px; right: 20px; z-index: 3;
  background: rgba(0,0,0,.5); border: none; color: #fff;
  font-size: 30px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
.modal__close:hover { background: rgba(255,255,255,.15); }
.modal__poster { min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 22px; text-align: center; }
/* 详情页海报：未经任何处理的原始图，完整清晰显示（不裁切、不羽化、不拉伸） */
.modal__poster img { max-width: 100%; max-height: 78vh; width: auto; height: auto; display: block; }
.modal__poster span { font-family: var(--serif); font-size: 24px; color: rgba(255,255,255,.6); letter-spacing: 1px; }
.modal__info { padding: 44px 38px; }
.modal__title { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.3; white-space: pre-line; }
.modal__en { margin-top: 6px; color: var(--muted); font-size: 14px; letter-spacing: 1px; }
.modal__meta { margin-top: 14px; font-size: 12px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.modal__row { margin-top: 20px; }
.modal__row > span { display: block; font-size: 10px; letter-spacing: 2px; color: #777; text-transform: uppercase; }
.modal__row p { margin-top: 5px; font-size: 15px; color: #d8d8d8; }
/* 中文行下方的英文并列行（职务 / 简介等通用）特异性需覆盖 .modal__row p */
.modal__row .modal__en-line { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--muted); }

.modal__video { margin-top: 24px; display: none; }
.modal__video video { width: 100%; border-radius: 4px; background: #000; }

.modal__links { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.modal__link {
  color: var(--fg); text-decoration: none; border: 1px solid #333;
  padding: 13px 16px; border-radius: 4px; display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
  font-size: 14px; transition: all .2s;
}
.modal__link:hover { border-color: var(--accent); color: var(--accent); }
.modal__link small { color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.modal__nolink { color: #666; font-size: 13px; letter-spacing: 1px; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .modal__panel { grid-template-columns: 1fr; }
  .modal__poster { min-height: 200px; }
  .modal__info { padding: 30px 26px 36px; }
  /* 窄屏单栏：肖像移到正文上方，作为视觉锚点 */
  .about__grid { grid-template-columns: 1fr; gap: 34px; }
  .about__portrait { max-width: 312px; order: -1; }
}
@media (max-width: 640px) {
  .nav { padding: 16px 20px; }
  .nav.is-scrolled { padding: 12px 20px; }
  .nav__links { gap: 15px; }
  .nav__links a { font-size: 13px; }
  .section-head { padding: 0 20px; }
  .group { padding: 0 20px; margin-top: 45px; }
  .work__grid { grid-template-columns: 1fr; }
  .work, .about, .contact { padding: 80px 0; }
  .hero__name { letter-spacing: 3px; }
  .hero__cn { letter-spacing: 6px; }
  .about__text .about__en { font-size: 14px; }
  .modal__row .modal__en-line { font-size: 13px; }
}