/* ==========================================================================
   赵洋 · 个人作品集
   --------------------------------------------------------------------------
   设计原则（手机优先）：
   1. 基础样式 = 手机竖屏，@media (min-width) 逐级增强到平板/桌面
   2. 所有尺寸用 clamp()/dvh/safe-area，兼顾 iPhone 刘海与安卓地址栏收缩
   3. 视频「按真实比例自适应」：竖屏素材满屏不留黑边，横屏素材自动 letterbox
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --bg:#090909;
  --bg-soft:#0f0f0f;
  --line:#292929;
  --line-soft:#1c1c1c;
  --text:#f4f1eb;
  --muted:#918d86;
  --accent:#d9ff52;

  --pad:clamp(18px, 5vw, 72px);      /* 左右安全内边距 */
  --sec-gap:clamp(56px, 9vw, 110px); /* 区块上下间距 */
  --radius:14px;

  --nav-h:56px;

  /* iOS 安全区域：刘海、灵动岛、底部横条 */
  --sa-t:env(safe-area-inset-top, 0px);
  --sa-b:env(safe-area-inset-bottom, 0px);
  --sa-l:env(safe-area-inset-left, 0px);
  --sa-r:env(safe-area-inset-right, 0px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* 避免手机横屏时字号被系统放大 */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC",
              "Noto Sans SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  /* 手机端点击不出现灰色高亮块 */
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* 打开播放层/抽屉时锁定背景滚动 */
body.is-locked{overflow:hidden;touch-action:none}

/* 隐藏滚动条但保留滚动能力（分类条、管理列表） */
.no-sb{scrollbar-width:none;-ms-overflow-style:none}
.no-sb::-webkit-scrollbar{display:none}

a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800}
button{font:inherit;color:inherit}

/* 键盘聚焦可见（无障碍） */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- 2. 装饰层：胶片颗粒 + 暗角 ---------- */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
.vignette{background:radial-gradient(120% 80% at 50% 40%,transparent 42%,rgba(0,0,0,.55) 100%)}

/* ---------- 3. 顶部导航 ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  height:calc(var(--nav-h) + var(--sa-t));
  padding:var(--sa-t) calc(var(--pad) + var(--sa-r)) 0 calc(var(--pad) + var(--sa-l));
  background:rgba(9,9,9,.72);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgba(9,9,9,.9)}

.logo{display:flex;align-items:baseline;gap:8px;min-width:0}
.logo-zh{font-size:17px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.logo-en{
  font-size:9.5px;color:#777;letter-spacing:.14em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

.navlinks{display:flex;gap:clamp(14px,4vw,30px);font-size:14px;color:#bbb;flex:0 0 auto}
.navlinks a{position:relative;padding:6px 2px;transition:color .2s var(--ease)}
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--accent);transition:right .28s var(--ease);
}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--accent)}
.navlinks a:hover::after,.navlinks a:focus-visible::after{right:0}

/* ---------- 4. 首屏 ---------- */
.hero{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100svh - var(--nav-h) - var(--sa-t));
  padding:clamp(40px,10vh,120px) calc(var(--pad) + var(--sa-r))
          clamp(40px,8vh,90px) calc(var(--pad) + var(--sa-l));
  border-bottom:1px solid var(--line);
}
.eyebrow,.kicker{
  margin:0;color:var(--accent);
  font-size:10.5px;letter-spacing:.24em;font-weight:600;
}
.hero h1{margin:clamp(14px,4vw,26px) 0 0;letter-spacing:-.045em;line-height:.94}
.h1-main{
  display:block;
  font-size:clamp(58px,20vw,150px);
  font-weight:800;
}
.h1-sub{
  display:block;
  margin-top:clamp(10px,2.4vw,20px);
  font-size:clamp(9.5px,2.7vw,15px);
  font-weight:600;
  letter-spacing:.2em;
  color:#666;
  line-height:1.5;
}
.hero-lead{
  max-width:34em;
  margin:clamp(20px,5vw,34px) 0 0;
  color:#a8a49d;
  font-size:clamp(14px,3.7vw,16px);
  line-height:1.85;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  min-height:46px;             /* 手机上保证足够大的点击区域 */
  margin-top:clamp(22px,5vw,32px);
  padding:12px 22px;
  border:1px solid #454545;border-radius:999px;
  background:none;color:#fff;
  font-size:13px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .18s var(--ease);
}
.btn:hover,.btn:focus-visible{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:scale(.97)}
.btn span{transition:transform .25s var(--ease)}
.btn:hover span{transform:translateY(3px)}

/* ---------- 5. 区块通用 ---------- */
.section{
  padding:var(--sec-gap) calc(var(--pad) + var(--sa-r)) var(--sec-gap) calc(var(--pad) + var(--sa-l));
  /* 锚点跳转时避开吸顶导航 */
  scroll-margin-top:calc(var(--nav-h) + var(--sa-t));
}
.section h2{
  margin:8px 0 0;
  font-size:clamp(30px,8.4vw,60px);
  letter-spacing:-.045em;
  line-height:1.05;
}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(20px,4vw,32px)}
.head-note{margin:0;color:var(--muted);font-size:12.5px;letter-spacing:.04em}

/* ---------- 6. 分类筛选（手机横向滚动） ---------- */
.filters{
  display:flex;gap:8px;
  margin:0 calc(-1 * var(--pad)) clamp(18px,4vw,26px);
  padding:4px calc(var(--pad) + var(--sa-r)) 4px calc(var(--pad) + var(--sa-l));
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.filter{
  flex:0 0 auto;
  min-height:38px;
  padding:8px 16px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--bg-soft);color:#999;
  font-size:12.5px;white-space:nowrap;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.filter:hover{border-color:#3d3d3d;color:#ddd}
.filter.active{background:var(--accent);border-color:var(--accent);color:#111;font-weight:600}

/* ---------- 7. 作品网格：手机 1 列 → 平板 2 列 → 桌面 3 列 ---------- */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,4vw,22px);
}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card{
  position:relative;
  display:block;width:100%;
  padding:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-soft);
  text-align:left;cursor:pointer;overflow:hidden;
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.card:hover{border-color:#4a4a4a;transform:translateY(-3px)}
.card:active{transform:scale(.985)}

.thumb{
  position:relative;
  aspect-ratio:16/9;
  background:#0c0c0c center/cover no-repeat;
  overflow:hidden;
}
/* 竖屏素材的卡片封面显示为 9:16，更符合手机浏览观感 */
.thumb.is-portrait{aspect-ratio:9/16;max-height:78svh}
.thumb::after{                       /* 底部渐变，保证文字可读 */
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
}
.thumb-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  font-size:10.5px;letter-spacing:.1em;color:#e8e8e8;
}
.thumb-dur{
  position:absolute;right:10px;bottom:10px;z-index:2;
  padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.62);
  font-size:11px;font-variant-numeric:tabular-nums;color:#eee;
}
.play{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
}
.play i{
  display:grid;place-items:center;
  width:clamp(46px,13vw,58px);height:clamp(46px,13vw,58px);
  border-radius:50%;
  background:rgba(217,255,82,.94);
  color:#111;font-size:15px;font-style:normal;
  padding-left:3px;                 /* 视觉居中三角形 */
  box-shadow:0 6px 26px rgba(217,255,82,.22);
  transition:transform .3s var(--ease);
}
.card:hover .play i{transform:scale(1.1)}

.meta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px 15px;
}
.meta-txt{min-width:0}
.title{
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sub{
  margin-top:3px;color:var(--muted);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag{
  flex:0 0 auto;color:#6d6d6d;font-size:10.5px;letter-spacing:.14em;
}
.card:hover .tag{color:var(--accent)}

/* ---------- 8. 关于 ---------- */
.about-body{max-width:60ch;margin-top:clamp(16px,4vw,26px);color:#a8a49d;
  font-size:clamp(14px,3.7vw,16px);line-height:1.9}
.about-body p{margin:0 0 1em}
.skills{
  list-style:none;margin:clamp(6px,3vw,18px) 0 0;padding:0;
  display:grid;gap:9px;max-width:60ch;
}
.skills li{
  position:relative;padding-left:18px;
  color:#8e8a84;font-size:13.5px;
}
.skills li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--accent);
}

/* ---------- 9. 联系 ---------- */
.contact{border-top:1px solid var(--line)}
.contact-sub{margin:14px 0 0;color:#999;font-size:14.5px}
.email{
  display:inline-block;
  margin-top:clamp(16px,4vw,24px);
  font-size:clamp(20px,6.4vw,46px);
  font-weight:800;letter-spacing:-.03em;
  word-break:break-all;
  border-bottom:2px solid var(--line);
  padding-bottom:6px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.email:hover,.email:focus-visible{color:var(--accent);border-color:var(--accent)}
.contact-meta{margin:16px 0 0;color:#6f6b66;font-size:12.5px;letter-spacing:.03em}

/* ---------- 10. 页脚 ---------- */
.footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px calc(var(--pad) + var(--sa-r))
          calc(22px + var(--sa-b)) calc(var(--pad) + var(--sa-l));
  border-top:1px solid var(--line-soft);
  color:#6a6660;font-size:11px;letter-spacing:.12em;
}
/* 页脚里的「管理作品」入口：低调，不抢视觉 */
.footer-admin{
  color:#57534e;font-size:11px;letter-spacing:.12em;
  padding:6px 2px;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer-admin:hover,.footer-admin:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* ==========================================================================
   11. 播放层
   手机：固定满屏，视频按真实比例 contain（竖屏素材自然铺满竖向空间）
   桌面：固定满屏但视频限制最大宽高，居中悬浮
   ========================================================================== */
.player{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:#000;
  padding:
    calc(var(--sa-t) + 8px) calc(var(--sa-r) + 8px)
    calc(var(--sa-b) + 74px) calc(var(--sa-l) + 8px);   /* 底部留出工具栏 */
  /* 阻断滚动穿透，手机上尤其重要 */
  overscroll-behavior:contain;
  touch-action:manipulation;
  animation:fade .22s var(--ease);
}
.player[hidden]{display:none}
/* 注意：这里不能有 backdrop-filter，
   否则会生成新的包含块，position:fixed 的全屏在部分浏览器上会失效 */

#video{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  background:#000;
  border-radius:8px;
  /* 关键：让 object-fit 决定画面填满方式，contain = 完整显示不裁切 */
  object-fit:contain;
}
/* 竖屏素材：撑满可用高度，宽度按比例 */
.player.is-portrait #video{height:100%;width:auto;max-width:100%}
/* 横屏素材：撑满可用宽度 */
.player.is-landscape #video{width:100%;height:auto;max-height:100%}

/* ---------- 第三方嵌入（B站 / YouTube） ---------- */
.embed{
  display:block;
  width:100%;height:100%;
  max-width:100%;max-height:100%;
  border:0;background:#000;border-radius:8px;
}
@media (min-width:900px){
  .player.is-landscape .embed{max-width:min(100%,1180px);max-height:min(100%,664px)}
}

@media (min-width:900px){
  .player{padding:40px 40px 96px}
  .player.is-portrait #video{height:100%;max-height:82svh;border-radius:12px;
    box-shadow:0 30px 90px rgba(0,0,0,.8)}
  .player.is-landscape #video{width:min(100%,1180px);border-radius:12px;
    box-shadow:0 30px 90px rgba(0,0,0,.8)}
}

.player-loading{
  position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;opacity:0;transition:opacity .25s var(--ease);
}
.player-loading.show{opacity:1}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}

/* 播放器首次加载淡入 */
.player.is-ready #video{animation:zoomIn .34s var(--ease)}
@keyframes zoomIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   12. 底部操作条（毛玻璃，拇指可达）
   ========================================================================== */
.toolbar{
  position:fixed;z-index:90;
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--sa-b) + 12px);
  display:flex;align-items:center;gap:2px;
  padding:6px;
  border:1px solid rgba(255,255,255,.13);border-radius:999px;
  background:rgba(20,20,20,.72);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  animation:rise .26s var(--ease);
}
.toolbar[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

.tool{
  display:grid;place-items:center;gap:2px;
  min-width:62px;min-height:52px;
  padding:6px 10px;
  border:0;border-radius:999px;
  background:none;color:#d8d8d8;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.tool:hover{background:rgba(255,255,255,.08);color:#fff}
.tool:active{background:rgba(217,255,82,.16)}
.tool-ico{font-size:16px;line-height:1}
.tool-txt{font-size:9.5px;letter-spacing:.08em;color:#9a9a9a}
.tool.is-on .tool-ico{color:var(--accent)}

/* ==========================================================================
   13. 作品信息抽屉（手机从底部滑出，桌面从右侧滑出）
   ========================================================================== */
.sheet{
  position:fixed;z-index:85;
  left:0;right:0;bottom:0;
  max-height:min(72svh,620px);
  display:flex;flex-direction:column;
  padding:20px calc(var(--pad) + var(--sa-r))
          calc(88px + var(--sa-b)) calc(var(--pad) + var(--sa-l));
  border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  background:rgba(13,13,13,.96);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  overflow-y:auto;overscroll-behavior:contain;
  animation:slideUp .3s var(--ease);
}
.sheet[hidden]{display:none}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}

.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.sheet-head h3{margin:6px 0 0;font-size:clamp(20px,5.6vw,30px);letter-spacing:-.03em}
.sheet-close{
  flex:0 0 auto;
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:none;color:#ccc;font-size:15px;cursor:pointer;
}
.sheet-close:hover{border-color:var(--accent);color:var(--accent)}
.sheet-body{margin-top:16px}
.sheet-meta{margin:0;color:var(--accent);font-size:11.5px;letter-spacing:.12em}
.sheet-desc{margin:12px 0 0;color:#aaa;font-size:14.5px;line-height:1.85}

@media (min-width:900px){
  .sheet{
    left:auto;top:0;bottom:0;right:0;
    width:min(420px,34vw);max-height:none;
    border-top:0;border-left:1px solid var(--line);border-radius:0;
    padding:56px 40px 96px;
    animation:slideRight .3s var(--ease);
  }
  @keyframes slideRight{from{transform:translateX(100%)}to{transform:none}}
}

/* ==========================================================================
   14. 空状态 / 提示
   ========================================================================== */
.empty{
  grid-column:1/-1;
  padding:64px 20px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius);
  color:#6f6b66;font-size:14px;line-height:1.9;
}
.empty b{display:block;margin-bottom:8px;color:#bbb;font-size:15px}

.toast{
  position:fixed;z-index:100;
  left:50%;bottom:calc(var(--sa-b) + 92px);transform:translateX(-50%);
  max-width:calc(100vw - 40px);
  padding:11px 18px;border-radius:999px;
  background:rgba(28,28,28,.96);border:1px solid var(--line);
  color:#eee;font-size:13px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:fade .2s var(--ease);
}

/* ---------- 15. 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.card{opacity:0;transform:translateY(16px)}
.card.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s var(--ease);
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .reveal,.card{opacity:1;transform:none}
}