/* ============================================================
   陈豪俊作品展示 · 样式
   两套主题通过 body[data-section] 切换 CSS 变量
   ============================================================ */
:root {
  --nav-h: 58px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "MiSans", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s ease;
}

/* ---------- 主题变量 ---------- */
body[data-section="nature"] {
  --accent: #2e7d5b;
  --bg: #ffffff;
  --ink: #22332a;
  --muted: #93a89b;
  --card-border: none;
  --card-radius: 6px;
  --thumb-bg: #eef3ef;
}
body[data-section="architecture"] {
  --accent: #26262a;
  --bg: #f5f5f6;
  --ink: #26262a;
  --muted: #9a9aa0;
  --card-border: 1px solid #dddde0;
  --card-radius: 0px;
  --thumb-bg: #e7e7ea;
}

/* ---------- 顶部导航 ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.brand { font-size: 15px; font-weight: 600; letter-spacing: .14em; white-space: nowrap; }
.tabs { display: flex; gap: 22px; }
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; letter-spacing: .1em;
  color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 2px 8px; border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.tab svg { display: block; }
.tab:hover { color: var(--accent); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 主体 ---------- */
main { padding-top: calc(var(--nav-h) + 30px); }
.section {
  display: none; position: relative;
  max-width: 1200px; margin: 0 auto; padding: 0 20px 70px;
}
.section.active { display: block; animation: sectionIn .55s ease both; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 穿插线条（随滚动轻移） ---------- */
.deco { position: absolute; pointer-events: none; z-index: 3; }
.deco-nature-a {
  left: -6%; top: 42%; width: 112%; height: 2px;
  background: linear-gradient(90deg, transparent,
    rgba(46,125,91,.42) 18%, rgba(126,168,214,.42) 52%,
    rgba(212,166,109,.35) 78%, transparent);
  transform: rotate(-7deg) translateY(var(--shift, 0px));
}
.deco-nature-b {
  left: -6%; top: 70%; width: 112%; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(126,168,214,.35) 30%, rgba(46,125,91,.28) 72%, transparent);
  transform: rotate(5deg) translateY(var(--shift, 0px));
}
.deco-arch-h {
  left: 0; top: 38%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(38,38,42,.32) 15%, rgba(38,38,42,.32) 85%, transparent);
  transform: translateY(var(--shift, 0px));
}
.deco-arch-v {
  top: 0; bottom: 0; left: 62%; width: 1px;
  background: linear-gradient(180deg, transparent,
    rgba(38,38,42,.26) 20%, rgba(38,38,42,.26) 80%, transparent);
  transform: translateX(var(--shift, 0px));
}

/* 彩色圆点点缀 */
.dots { display: flex; gap: 8px; margin: 0 0 18px 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }

/* ---------- 瀑布流图墙 ---------- */
.gallery { position: relative; z-index: 1; columns: 3; column-gap: 16px; }
.card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 16px; position: relative; cursor: zoom-in;
}
.thumb {
  position: relative; overflow: hidden;
  border-radius: var(--card-radius); border: var(--card-border);
  background: var(--thumb-bg);
}
.thumb img {
  width: 100%; height: auto; display: block;
  transition: transform .5s ease;
}
.card:hover .thumb img { transform: scale(1.035); }
.play-badge {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(20, 24, 22, .45);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: background .3s;
}
.play-badge::after {
  content: ""; display: block; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}
.card:hover .play-badge { background: var(--accent); }
.card figcaption {
  font-size: 11px; color: var(--muted); letter-spacing: .08em;
  padding: 7px 2px 0; display: flex; justify-content: space-between; gap: 8px;
}
.card .num { opacity: .75; }

/* 渐入动画 */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid rgba(0, 0, 0, .07);
  background: rgba(255, 255, 255, .6);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #6b7280; letter-spacing: .05em;
}
.footer-inner .contact { color: var(--ink); text-decoration: none; font-weight: 500; transition: color .3s; }
.footer-inner .contact:hover { color: var(--accent); }

/* ---------- 灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 14, 13, .93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lb-stage {
  max-width: min(92vw, 1200px); max-height: 78vh;
  display: flex; align-items: center; justify-content: center;
}
.lb-stage img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  animation: lbIn .35s ease;
}
.lb-stage video {
  max-width: 100%; max-height: 78vh; width: auto; height: auto; background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  animation: lbIn .35s ease;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lb-btn {
  position: fixed; z-index: 61; appearance: none; background: none; border: none;
  color: rgba(255, 255, 255, .82); cursor: pointer; line-height: 1;
  font-size: 40px; font-family: var(--font);
  transition: color .25s, transform .25s; user-select: none;
}
.lb-btn:hover { color: #fff; }
.lb-close { top: 12px; right: 20px; font-size: 36px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }
.lb-caption {
  margin-top: 16px; color: rgba(255, 255, 255, .85);
  font-size: 12px; letter-spacing: .1em; display: flex; gap: 16px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .brand { font-size: 13px; letter-spacing: .1em; }
  .tabs { gap: 16px; }
  .nav-inner { padding: 0 16px; }
  .section { padding: 0 14px 56px; }
  .gallery { columns: 2; column-gap: 10px; }
  .card { margin-bottom: 10px; }
  .play-badge { width: 38px; height: 38px; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
  .lb-btn { font-size: 32px; }
  .lb-close { top: 8px; right: 12px; font-size: 30px; }
  .footer-inner { flex-direction: column; gap: 6px; padding: 14px 16px; }
}
@media (min-width: 1500px) {
  .gallery { columns: 4; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}