@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {   /* 跑马灯、衣服名：衬线斜体（Times 风格） */
  font-family: "Tinos";
  src: url("../assets/fonts/tinos-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --bg: #e8e7e3;
  --ink: #151515;          /* logo、文字、按钮 */
  --muted: #8a8a8a;
  --bar: #0b0b0b;          /* 底部跑马灯 */
  --bar-ink: #ffffff;
  --serif: "Tinos", "Times New Roman", Times, serif;
  --ease: cubic-bezier(.22, .8, .2, 1);

  /* 尺寸全部按衣服高度 --gh 推算（衣服图 300×406 单位，1 单位 = gh/340） */
  --gh: min(38vh, 21vw);
  --hook: calc(var(--gh) * 50 / 340);   /* 挂杆中心到领口 */
  --fw: calc(var(--gh) * 300 / 340);    /* 衣服正面宽 */
  --slot: calc(var(--gh) * .3);         /* 转开挂着时每件占的位置 */
  --open: calc(var(--fw) + var(--gh) * .08); /* 转正面后占的位置 */
  --rodh: max(10px, calc(var(--gh) * .042));
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23151515' stroke-opacity='.055' stroke-width='1'%3E%3Crect x='19' y='21' width='10' height='8' rx='1'/%3E%3Cpath d='M19 24h10M24 21v8M24 21c-1.5-3-4-3-4-1.2 0 1.2 2.2 1.2 4 1.2 1.8 0 4 0 4-1.2 0-1.8-2.5-1.8-4 1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 顶栏 ---------- */
.top {
  position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px 32px 0;
}
.nav-link, .close-link {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .4s var(--ease);
}
.nav-link:first-child { justify-self: start; }
.nav-link:nth-of-type(2) { justify-self: end; }
.nav-link:hover, .close-link:hover { opacity: .55; }
.logo {
  display: block; width: 104px; aspect-ratio: 1034 / 432;
  background: var(--ink);
  -webkit-mask: url("../assets/logo.png") center / contain no-repeat;
          mask: url("../assets/logo.png") center / contain no-repeat;
  transition: opacity .4s var(--ease);
}
.close-link { position: absolute; right: 32px; top: 26px; opacity: 0; pointer-events: none; }

/* ---------- 场景 ---------- */
.scene { position: relative; display: grid; place-items: center; min-height: 0; }
.rack-wrap {
  position: relative; margin-top: -4vh;
  transition: filter .38s var(--ease), opacity .38s var(--ease), transform .38s var(--ease);
}
.rack {
  position: relative;
  width: calc(var(--slot) * var(--n, 10) + var(--open) - var(--slot) + var(--gh) * .34);
  height: calc(var(--hook) + var(--gh) + var(--gh) * .1);
}

/* ---------- 不锈钢挂杆 + 墙面底座 ---------- */
.rod {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: calc(var(--rodh) * 5.3); transform: translateY(-50%);
  pointer-events: none;
}
.bracket {
  position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 46 / 92;
  filter: drop-shadow(0 calc(var(--rodh) * .35) calc(var(--rodh) * .45) rgba(0, 0, 0, .2));
}
.bracket.l { left: 0; }
.bracket.r { right: 0; transform: scaleX(-1); }
.tube {
  position: absolute; top: 50%; height: var(--rodh); transform: translateY(-50%);
  left: calc(var(--rodh) * 5.3 * .5 * .8); right: calc(var(--rodh) * 5.3 * .5 * .8);
  border-radius: 99px;
  /* 抛光镀铬：竖向是圆管的明暗（上亮下暗、底边回光），横向乘上环境反光（两端亮、中段一大片深色） */
  background:
    linear-gradient(90deg, #fff 0%, #fff 22%, #e4e4e7 30%, #b4b4b9 40%, #a6a6ab 52%, #b2b2b7 64%, #ebebed 74%, #fff 80%, #e6e6e9 88%, #fff 96%),
    linear-gradient(180deg, #a0a0a5 0%, #ffffff 11%, #ffffff 26%, #f0f0f2 36%, #c6c6ca 50%, #929298 64%, #7c7c82 77%, #a8a8ad 88%, #f4f4f6 95%, #8a8a8f 100%);
  background-blend-mode: multiply;
  box-shadow: 0 calc(var(--rodh) * 1.1) calc(var(--rodh) * .9) calc(var(--rodh) * -.4) rgba(0, 0, 0, .3);
}
.tube::before {   /* 顶部一条贯穿的镜面亮线 */
  content: ""; position: absolute; left: 1%; right: 1%; top: 14%; height: 13%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .95) 12%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, .7) 80%, rgba(255, 255, 255, .95));
}
.tube::after {   /* 底边一道细回光 */
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 7%; height: 8%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .25) 30%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .7));
}

/* ---------- 衣服 ---------- */
/* 衣服的位置、摆动、转身都由 js 里的物理模拟逐帧设置 */
.items {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: calc(var(--hook) + var(--gh));
}
.items.pointing { cursor: pointer; }
.item {
  position: absolute; left: 50%; top: 0;
  width: var(--slot); height: calc(var(--hook) + var(--gh)); margin-left: calc(var(--slot) / -2);
  pointer-events: none; outline: none; will-change: transform;
}
.item.on { z-index: 2; }
.item:focus-visible::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; width: 16px; height: 2px;
  margin-left: -8px; background: var(--ink); border-radius: 2px;
}

/* 摆动层（绕挂杆晃）→ 衣服帧条 */
.swing {
  position: absolute; inset: 0; transform-origin: 50% 0;
  filter: drop-shadow(0 calc(var(--gh) * .022) calc(var(--gh) * .028) rgba(0, 0, 0, .16));
}
.face {
  position: absolute; top: 0; left: calc(50% - var(--fw) / 2);
  width: var(--fw); height: calc(var(--hook) + var(--gh));
}
.face img, .face .turn {
  position: absolute; left: 0; top: calc(var(--gh) * -16 / 340);
  width: 100%; height: calc(var(--gh) * 406 / 340);
}
.face .turn { height: calc(var(--gh) * 440 / 340); }   /* 帧条底部多留 34 单位给下垂的布料 */
.face { pointer-events: none; }   /* 画布比挂位宽，不能挡住旁边那件的鼠标 */
.face .turn { background-repeat: no-repeat; background-position: 0 0; }
.swing { will-change: transform; }
.face img { user-select: none; -webkit-user-drag: none; pointer-events: none; }

.hover-label {
  position: absolute; left: 0; top: calc(var(--hook) + var(--gh) + var(--gh) * .1);
  margin: 0; font-size: 11px; color: var(--muted); white-space: nowrap;
  transform: translateX(-50%); opacity: 0;
  transition: opacity .3s var(--ease), left .5s var(--ease);
  pointer-events: none;
}
.hover-label.show { opacity: 1; }

/* ---------- 底部按钮 ---------- */
.cta-row {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 14px; z-index: 6;
}
.pill {
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 7px 18px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.pill:hover { background: var(--ink); color: var(--bg); }
.pill.small { padding: 6px 14px; }
.handle { width: 32px; height: 4px; border-radius: 4px; background: #5f5f5f; opacity: 0; transition: opacity .4s var(--ease); }

/* ---------- 详情 ---------- */
.detail {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; pointer-events: none;
}
.d-stage { position: relative; margin-top: -8vh; }
.d-item {
  --gh: min(50vh, 36vw);
  position: relative; width: var(--fw); height: calc(var(--hook) + var(--gh));
  transform-origin: 0 0; visibility: hidden;
  filter: drop-shadow(0 calc(var(--gh) * .022) calc(var(--gh) * .03) rgba(0, 0, 0, .16));
}
.d-item.show { visibility: visible; }
.d-item .face { left: 0; }
.arrow, .d-meta { opacity: 0; transition: opacity .45s var(--ease); }
.arrow {
  position: absolute; top: calc(50% - 8vh + min(50vh, 36vw) * 25 / 340); width: 38px; height: 38px;
  border: 1.5px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; transform: translateY(-50%);
  transition: opacity .45s var(--ease), background .25s, color .25s;
}
.arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover { background: var(--ink); color: var(--bg); }
.arrow:focus { outline: none; }
.arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.arrow.prev { left: calc(50% - min(50vh, 36vw) * 150 / 340 - 7vw - 38px); }
.arrow.next { left: calc(50% + min(50vh, 36vw) * 150 / 340 + 7vw); }
.d-meta { position: absolute; left: 0; right: 0; bottom: calc(4.5vh + 62px); text-align: center; }
.d-count { margin: 0 0 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.d-name {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px); letter-spacing: 0; transition: opacity .2s;
}
.no-anim .item { transition: none !important; }

/* 进入详情后的整体状态 */
body.is-detail .rack-wrap { filter: blur(9px); opacity: .34; transform: scale(1.01); pointer-events: none; }
body.is-detail .detail { pointer-events: auto; }
body.is-detail .arrow, body.is-detail .d-meta { opacity: 1; }
body.is-detail .nav-link, body.is-detail .logo { opacity: 0; pointer-events: none; }
body.is-detail .close-link { opacity: 1; pointer-events: auto; }
body.is-detail .handle { opacity: 1; }
body.is-detail .marquee { opacity: 0; }

/* ---------- 跑马灯：黑底白字 ---------- */
.marquee {
  background: var(--bar); color: var(--bar-ink); overflow: hidden;
  height: 36px; display: flex; align-items: center;
  transition: opacity .5s var(--ease);
}
.marquee-track { display: flex; align-items: center; white-space: nowrap; animation: marquee 46s linear infinite; }
.marquee-track span { font-family: var(--serif); font-style: italic; font-size: 18px; padding: 0 22px; }
.marquee-track span.dot { font-family: inherit; font-style: normal; font-size: 9px; padding: 0; opacity: .75; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 弹出小卡片 ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(232, 231, 227, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet-card {
  width: min(380px, calc(100vw - 32px)); padding: 28px 28px 22px;
  background: #f4f3f0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .14);
  transform: translateY(10px); transition: transform .35s var(--ease);
}
.sheet.open .sheet-card { transform: none; }
.sheet-card h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.sheet-card p { margin: 0 0 20px; font-family: var(--serif); font-size: 18px; line-height: 1.45; font-style: italic; }

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  :root { --gh: min(42vh, 64vw); }
  .top { padding: 16px 16px 0; }
  .close-link { right: 16px; top: 20px; }
  .logo { width: 84px; }
  .rack-wrap {
    width: 100vw; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
    padding: calc(var(--gh) * .12) 16px calc(var(--gh) * .3);
    margin-top: 0;
  }
  .rack-wrap::-webkit-scrollbar { display: none; }
  .rack { margin: 0 auto; }
  .d-item { --gh: min(46vh, 68vw); }
  .d-stage { margin-top: -12vh; }
  .arrow { top: auto; bottom: calc(4.5vh + 2px); transform: none; }
  .arrow.prev { left: 16px; } .arrow.next { left: auto; right: 16px; }
  .d-meta { bottom: calc(4.5vh + 66px); }
  .marquee-track span { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .item { transition-duration: .01s; }
  .marquee-track { animation-duration: 160s; }
}