/* ============================================================
   components.css · 全站可复用组件
   导航 / 汉堡 / 全屏菜单 / 播放按钮 / 作品占位卡 / 播放器 / 页脚
   ============================================================ */

/* ---------- 品牌字标 ---------- */
.wordmark {
  display: inline-block;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.nav__role {
  display: flex; flex-direction: column; gap: 2px;
  color: var(--c-mid);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  line-height: 1.55;
  text-transform: uppercase;
}
.nav-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
}
.nav-link.is-current::after { transform: scaleX(1); }

/* ---------- 汉堡按钮 ---------- */
.hamburger {
  position: fixed;
  top: 26px; right: var(--pad-x);
  z-index: 2100;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  /* 收起态：深色实心圆 + 浅色线条（与展开态的「浅底 + 深色叉」正好相反） */
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-ink);
  /* 参考站录屏：汉堡是纯淡入 / 淡出，不位移、不缩放。
     visibility 只在淡出结束时才关闭，保证淡出过程可见。 */
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s linear .35s,
              background var(--dur-xs);
}
.hamburger.is-visible {
  visibility: visible; opacity: 1;
  transition: opacity .35s var(--ease), visibility 0s, background var(--dur-xs);
}
.hamburger:hover { background: var(--c-slate); }
.hamburger__lines { position: relative; width: 18px; height: 12px; }
.hamburger__lines i {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--c-paper);
  transition: transform var(--dur-s) var(--ease), top var(--dur-s) var(--ease),
              background var(--dur-xs) var(--ease);
}
.hamburger__lines i:nth-child(1) { top: 2px; }
.hamburger__lines i:nth-child(2) { top: 10px; }
/* 展开态反过来：浅色实心圆 + 深色叉（形状与颜色同时反相，避免中途出现同色不可见） */
html.menu-open .hamburger { background: var(--c-paper); border-color: var(--c-paper); }
html.menu-open .hamburger__lines i { background: var(--c-ink); }
html.menu-open .hamburger__lines i:nth-child(1) { top: 6px; transform: rotate(45deg); }
html.menu-open .hamburger__lines i:nth-child(2) { top: 6px; transform: rotate(-45deg); }

/* ---------- 全屏菜单（圆形遮罩展开） ----------
   圆心必须与 fixed 汉堡按钮的「真实中心」重合。
   写死 calc(100% - 48px) 会随 --pad-x / 按钮尺寸漂移（1440 下差约 47px），
   所以由 menu.js 读 getBoundingClientRect() 写入 --menu-x / --menu-y，
   桌面、移动端、任意视口宽都自动对齐；下方数值只是 JS 未运行时的兜底。 */
.menu {
  --menu-x: calc(100% - 48px);
  --menu-y: 48px;
  position: fixed; inset: 0; z-index: 2000;
  background: var(--c-slate); color: var(--c-paper);
  clip-path: circle(0% at var(--menu-x) var(--menu-y));
  -webkit-clip-path: circle(0% at var(--menu-x) var(--menu-y));
  transition: clip-path var(--dur-m) var(--ease), -webkit-clip-path var(--dur-m) var(--ease);
  pointer-events: none;
  overflow-y: auto;
}
.menu.is-open {
  clip-path: circle(150% at var(--menu-x) var(--menu-y));
  -webkit-clip-path: circle(150% at var(--menu-x) var(--menu-y));
  pointer-events: auto;
}
.menu__inner { padding-block: clamp(96px, 12vh, 160px) 60px; }
.menu__eyebrow { color: var(--c-mid); margin-bottom: clamp(36px, 6vh, 72px); }
.menu__links { display: flex; flex-direction: column; }
.menu__link {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(8px, 1.2vw, 16px);
  font-size: clamp(38px, 6.4vw, 92px);
  font-weight: 500; letter-spacing: -.035em; line-height: 1.08;
  transition: color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.menu__link:hover { transform: translateX(10px); }
.menu__link .idx { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; color: var(--c-mid); }
.menu__aside {
  margin-top: clamp(48px, 8vh, 96px);
  display: flex; gap: clamp(28px, 6vw, 100px); flex-wrap: wrap;
  color: var(--c-mid); font-size: var(--fs-small);
}
.menu__aside p { max-width: 34ch; line-height: 1.8; }
.menu__aside .label { color: var(--c-paper); margin-bottom: 8px; }
/* 菜单底部信息里的链接：深色遮罩上必须用浅色下划线，否则 --c-feedback 近黑不可见 */
.menu__aside .link-feedback::after { background: var(--c-paper); }

/* ---------- 标签 / 说明文字 ---------- */
.tag {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--c-line-strong);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-ink);
}
.tag--muted { color: var(--c-mid); border-color: var(--c-line); }

/* ---------- 箭头链接 ---------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.5;
}
.arrow-link .arrow {
  display: inline-block; font-family: var(--font-mono);
  transition: transform var(--dur-s) var(--ease);
}
.arrow-link:hover .arrow { transform: translateX(6px); }

/* ---------- 作品卡（占位） ----------
   注：原首屏左下角独立的 .play-button 组件已随「Play Reel」一起移除，
   首屏播放入口统一为 home.css 的圆形 .reel。 */


.work-card { min-width: 0; }
.work-card__lockup { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.work-card__lockup--below { margin-bottom: 0; margin-top: 14px; }
.work-card__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.work-card__meta { color: var(--c-mid); }

/* 占位框：纯中性灰矩形，明确标注 PLACEHOLDER，不伪装成作品 */
.frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--ratio, 1 / 1);
  background: var(--c-placeholder);
  /* 容器描边已按需求删除：媒体框不再有 1px 边框 */
  border: 0;
  overflow: hidden;
  -webkit-appearance: none; appearance: none;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-s) var(--ease);
}
/* 描边删除后 hover 不再改变边框色，避免出现突现的细线 */
.frame__fill { position: absolute; inset: 0; background: var(--c-placeholder); transition: opacity var(--dur-s) var(--ease); }
.frame__label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center;
  transition: opacity var(--dur-s) var(--ease);
}
.frame__label b {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #3d3d39;
}
.frame__label span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: #5b5b55; }

/* 悬停播放：当前无真实视频 → 进入「占位演示」态（可见、可测、不伪装） */
.frame__demo {
  position: absolute; inset: 0; z-index: 3;
  opacity: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--c-feedback);
  transition: opacity var(--dur-s) var(--ease);
}
.frame.is-demo .frame__demo { opacity: 1; }
.frame.is-demo .frame__label { opacity: .28; }
.frame__demo-tag {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--c-ink); text-transform: uppercase;
}
.frame__progress {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--c-feedback); transform: scaleX(0); transform-origin: left;
}
.frame.is-demo .frame__progress { animation: frame-sweep 2.2s linear infinite; }
@keyframes frame-sweep { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

.frame__play {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  display: grid; place-items: center;
  border: 1px solid var(--c-ink); border-radius: 50%;
  background: var(--c-play);
  opacity: 0; transform: scale(.82);
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.frame__play svg { width: 13px; height: 15px; fill: var(--c-ink); }
.frame:hover .frame__play, .frame:focus-visible .frame__play { opacity: 1; transform: scale(1); }

/* 真实素材接入后：静帧淡出、视频铺满，占位标注自动隐藏 */
.frame__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__video  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame.has-media .frame__fill,
.frame.has-media .frame__label,
.frame.has-media .frame__demo { display: none; }

/* ---------- 全屏播放器 ----------
   取景修复：frame 用 relative + overflow:hidden 锁定高度，video 用 absolute inset:0
   让百分比高度有确定基准，object-fit:contain 才真正生效；1:1 / 16:9 都完整显示。
   控件由 player.js 注入，常驻 frame 底部，不随视频高度溢出视口。            */
.player {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--c-slate); color: var(--c-paper);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-s) var(--ease), visibility var(--dur-s);
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 40px);
}
.player.is-open { opacity: 1; visibility: visible; }
.player__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.player__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(242, 242, 240, .4); border-radius: 50%;
  font-family: var(--font-mono); font-size: 20px; line-height: 1;
  transition: background var(--dur-xs), color var(--dur-xs);
}
.player__close:hover { background: var(--c-paper); color: var(--c-ink); }
.player__frame {
  position: relative; overflow: hidden;
  flex: 1; min-height: 0; margin-top: 24px;
  border: 0;                      /* 容器描边已按需求删除 */
  background: var(--c-ink);
}
.player__empty {
  position: absolute; inset: 0;
  text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px;
}
.player__empty .title { font-size: clamp(24px, 3vw, 40px); font-weight: 500; letter-spacing: -.02em; }
.player__empty .hint { color: var(--c-mid); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; }
.player__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.player__empty[hidden], .player__video[hidden] { display: none !important; }
.player__hint { margin-top: 14px; color: var(--c-mid); text-align: right; }

/* 自建控件：播放/暂停 · 可拖动进度 · 时间 · 声音 · 全屏 */
.player__controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px);
  padding: 34px clamp(12px, 1.6vw, 24px) clamp(12px, 1.4vw, 20px);
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  color: var(--c-paper);
}
.player__btn {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(248, 248, 248, .45); border-radius: 50%;
  transition: background var(--dur-xs), color var(--dur-xs);
}
.player__btn:hover { background: var(--c-paper); color: var(--c-ink); }
.player__glyph {
  width: 0; height: 0; margin-left: 2px;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.player__toggle.is-playing .player__glyph {
  width: 10px; height: 12px; margin: 0; border: 0;
  background: linear-gradient(to right,
    currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}
.player__time {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; color: rgba(248, 248, 248, .82); white-space: nowrap;
}
.player__seek {
  flex: 1 1 auto; min-width: 60px; height: 28px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right,
    var(--c-paper) 0 var(--p, 0%), rgba(248, 248, 248, .32) var(--p, 0%) 100%);
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px;
  border: 0; border-radius: 50%; background: var(--c-paper);
}
.player__seek::-moz-range-track {
  height: 2px;
  background: linear-gradient(to right,
    var(--c-paper) 0 var(--p, 0%), rgba(248, 248, 248, .32) var(--p, 0%) 100%);
}
.player__seek::-moz-range-thumb {
  width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--c-paper);
}
.player__txt {
  flex: 0 0 auto; height: 38px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(248, 248, 248, .82);
  transition: color var(--dur-xs);
}
.player__txt:hover { color: var(--c-paper); }
@media (max-width: 767px) {
  .player__time { display: none; }
  .player__controls { gap: 8px; padding: 26px 12px 12px; }
  .player__btn { width: 34px; height: 34px; }
  .player__txt { font-size: 9px; padding: 0 2px; }
}

/* ---------- 页脚 ---------- */
.footer__wordmark { font-size: clamp(26px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.footer__intro { margin-top: 18px; max-width: 34ch; color: #4c4c48; }
/* align-items: flex-start —— 链接不再被拉伸成整列宽，
   hover 下划线（.link-feedback::after 的 width:100%）随文本长度收缩，
   与 Contact 栏目里行内链接的表现一致 */
.footer__list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--fs-small); }
.footer__meta p { margin-bottom: 8px; }

/* ---------- 导航占位页（第三阶段的页面尚未开发） ---------- */
.stub {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(80px, 12vw, 180px);
}
.stub__title { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.stub__note { margin-top: 20px; max-width: 46ch; color: var(--c-mid); }

@media (max-width: 767px) {
  .hamburger { top: 16px; width: 42px; height: 42px; }
  /* 圆心沿用 menu.js 写入的 --menu-x / --menu-y（移动端汉堡尺寸/位置不同也能对齐），
     这里只把展开半径调大，保证窄屏对角覆盖完整。 */
  .menu.is-open { clip-path: circle(170% at var(--menu-x) var(--menu-y)); -webkit-clip-path: circle(170% at var(--menu-x) var(--menu-y)); }
  .menu__inner { padding-block: 92px 48px; }
  .menu__aside { flex-direction: column; gap: 24px; }
  .frame__label b { font-size: 11px; }
}