/* ============================================
   折光藏品屋 — 暗调屋内沉浸式
   ============================================ */

:root {
  color-scheme: dark;
  --void:      #0c0a09;
  --wall:      #141210;
  --wood:      #1a1612;
  --wood-deep: #120f0c;
  --ink:       #e8e0d6;
  --ink-soft:  #a0988c;
  --muted:     #6b6358;
  --line:      rgba(232, 224, 214, 0.08);
  --line-mid:  rgba(232, 224, 214, 0.14);
  --line-strong:rgba(232, 224, 214, 0.22);
  --gold:      #c9a96e;
  --gold-soft: #8f7344;
  --star:      #f0e2c8;
  --red:       #a85c4c;
  --teal:      #5a8a82;
  --rose:      #a07068;
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.35);
  --shadow:    0 16px 48px rgba(0,0,0,0.45);
  --shadow-lg: 0 30px 90px rgba(0,0,0,0.55);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, Arial, sans-serif;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}
::selection { color: var(--void); background: var(--gold); }

/* ============================================
   四角常驻装饰
   ============================================ */

.corner-deco {
  position: fixed;
  z-index: 40;
  width: 2.2rem;
  height: 2.2rem;
  pointer-events: none;
}
.cd-tl { top: 0.8rem; left: 0.8rem; }
.cd-tr { top: 0.8rem; right: 0.8rem; transform: rotate(90deg); }
.cd-bl { bottom: 0.8rem; left: 0.8rem; transform: rotate(-90deg); }
.cd-br { bottom: 0.8rem; right: 0.8rem; transform: rotate(180deg); }

.cd-line-h,
.cd-line-v {
  position: absolute;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.cd-line-h { top: 0; left: 0; width: 1.6rem; height: 1px; }
.cd-line-v { top: 0; left: 0; width: 1px; height: 1.6rem; }

.cd-dot {
  position: absolute;
  top: -1.5px; left: -1.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.4);
  animation: dot-blink 4s ease-in-out infinite;
}
.cd-orb {
  position: absolute;
  top: 0.2rem; left: 0.2rem;
  width: 0.35rem; height: 0.35rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  filter: blur(2px);
  opacity: 0.5;
  animation: orb-drift 6s ease-in-out infinite;
}
.cd-tl .cd-dot { animation-delay: 0s; }
.cd-tr .cd-dot { animation-delay: -1s; }
.cd-bl .cd-dot { animation-delay: -2s; }
.cd-br .cd-dot { animation-delay: -3s; }
.cd-tl .cd-orb { animation-delay: 0s; }
.cd-tr .cd-orb { animation-delay: -1.5s; }
.cd-bl .cd-orb { animation-delay: -3s; }
.cd-br .cd-orb { animation-delay: -4.5s; }

@keyframes dot-blink {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.3); box-shadow: 0 0 12px rgba(201, 169, 110, 0.5); }
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50%      { transform: translate(3px, 3px); opacity: 0.7; }
}

/* ============================================
   Custom Cursor
   ============================================ */

.custom-cursor {
  position: fixed;
  top: -100px; left: -100px;
  z-index: 9999;
  pointer-events: none;
  width: 0; height: 0;
}

.cursor-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 110, 0.4);
  box-shadow: 0 0 10px rgba(201, 169, 110, 0.15);
  transition: width 180ms var(--ease-out), height 180ms var(--ease-out), margin 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

body:has(a:hover, button:hover, [role="button"]:hover) .custom-cursor .cursor-ring {
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-color: rgba(201, 169, 110, 0.7);
  box-shadow: 0 0 14px rgba(201, 169, 110, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  html, body, a, button, [role="button"], input, textarea, select {
    cursor: none !important;
  }
}

/* ============================================
   屋内环境层
   ============================================ */

.room-mood {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.window-light {
  position: absolute;
  top: -10%; right: 5%;
  width: 35vw; height: 120vh;
  background: linear-gradient(170deg, rgba(201, 169, 110, 0.05) 0%, rgba(240, 226, 200, 0.015) 40%, transparent 70%);
  filter: blur(50px);
  transform: rotate(-12deg);
  animation: light-shift 12s ease-in-out infinite alternate;
}
.window-light-2 { top: 20%; right: 25%; width: 20vw; opacity: 0.5; animation-delay: -4s; }

@keyframes light-shift {
  0%   { opacity: 0.6; transform: rotate(-12deg) translateX(0); }
  50%  { opacity: 0.9; transform: rotate(-10deg) translateX(2vw); }
  100% { opacity: 0.7; transform: rotate(-13deg) translateX(-1vw); }
}

.floor-glow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30vh;
  background: linear-gradient(180deg, transparent 30%, rgba(201, 169, 110, 0.02) 60%, rgba(201, 169, 110, 0.035) 100%);
  pointer-events: none;
}

.dust-layer { position: absolute; inset: 0; }
.dust-layer span {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(240, 226, 200, 0.3);
  box-shadow: 0 0 4px rgba(240, 226, 200, 0.15);
  animation: dust-float linear infinite;
}

.dust-layer span:nth-child(1)  { left: 10%; top: 12%;  animation-duration: 20s; animation-delay: 0s;    opacity: .35; }
.dust-layer span:nth-child(2)  { left: 23%; top: 32%;  animation-duration: 24s; animation-delay: -3s;   opacity: .25; width: 3px; height: 3px; }
.dust-layer span:nth-child(3)  { left: 38%; top: 8%;   animation-duration: 18s; animation-delay: -6s;   opacity: .4; }
.dust-layer span:nth-child(4)  { left: 52%; top: 48%;  animation-duration: 27s; animation-delay: -2s;   opacity: .2; }
.dust-layer span:nth-child(5)  { left: 68%; top: 18%;  animation-duration: 21s; animation-delay: -8s;   opacity: .35; }
.dust-layer span:nth-child(6)  { left: 83%; top: 58%;  animation-duration: 23s; animation-delay: -5s;   opacity: .25; width: 1px; height: 1px; }
.dust-layer span:nth-child(7)  { left: 15%; top: 68%;  animation-duration: 19s; animation-delay: -1s;   opacity: .3; }
.dust-layer span:nth-child(8)  { left: 33%; top: 78%;  animation-duration: 25s; animation-delay: -7s;   opacity: .4; }
.dust-layer span:nth-child(9)  { left: 48%; top: 22%;  animation-duration: 22s; animation-delay: -4s;   opacity: .25; }
.dust-layer span:nth-child(10) { left: 63%; top: 72%;  animation-duration: 16s; animation-delay: -9s;   opacity: .45; }
.dust-layer span:nth-child(11) { left: 78%; top: 38%;  animation-duration: 26s; animation-delay: -2s;   opacity: .2; width: 3px; height: 3px; }
.dust-layer span:nth-child(12) { left: 5%;  top: 42%;  animation-duration: 20s; animation-delay: -6s;   opacity: .35; }
.dust-layer span:nth-child(13) { left: 20%; top: 52%;  animation-duration: 28s; animation-delay: -10s;  opacity: .2; }
.dust-layer span:nth-child(14) { left: 43%; top: 65%;  animation-duration: 15s; animation-delay: -3s;   opacity: .5; }
.dust-layer span:nth-child(15) { left: 58%; top: 82%;  animation-duration: 20s; animation-delay: -7s;   opacity: .3; }
.dust-layer span:nth-child(16) { left: 73%; top: 8%;   animation-duration: 22s; animation-delay: -1s;   opacity: .35; }
.dust-layer span:nth-child(17) { left: 88%; top: 28%;  animation-duration: 18s; animation-delay: -5s;   opacity: .25; width: 1px; height: 1px; }
.dust-layer span:nth-child(18) { left: 28%; top: 5%;   animation-duration: 24s; animation-delay: -8s;   opacity: .4; }
.dust-layer span:nth-child(19) { left: 50%; top: 90%;  animation-duration: 17s; animation-delay: -2s;   opacity: .35; }
.dust-layer span:nth-child(20) { left: 93%; top: 75%;  animation-duration: 21s; animation-delay: -4s;   opacity: .25; }
.dust-layer span:nth-child(21) { left: 12%; top: 88%;  animation-duration: 19s; animation-delay: -11s;  opacity: .3; }
.dust-layer span:nth-child(22) { left: 35%; top: 15%;  animation-duration: 23s; animation-delay: -5.5s; opacity: .35; }
.dust-layer span:nth-child(23) { left: 55%; top: 35%;  animation-duration: 25s; animation-delay: -9s;   opacity: .2; width: 3px; height: 3px; }
.dust-layer span:nth-child(24) { left: 70%; top: 55%;  animation-duration: 18s; animation-delay: -1.5s; opacity: .4; }
.dust-layer span:nth-child(25) { left: 85%; top: 12%;  animation-duration: 22s; animation-delay: -7.5s; opacity: .25; }
.dust-layer span:nth-child(26) { left: 8%;  top: 55%;  animation-duration: 20s; animation-delay: -3.5s; opacity: .35; }
.dust-layer span:nth-child(27) { left: 42%; top: 42%;  animation-duration: 26s; animation-delay: -6.5s; opacity: .2; }
.dust-layer span:nth-child(28) { left: 60%; top: 65%;  animation-duration: 17s; animation-delay: -12s;  opacity: .4; }
.dust-layer span:nth-child(29) { left: 75%; top: 85%;  animation-duration: 24s; animation-delay: -4.5s; opacity: .3; }
.dust-layer span:nth-child(30) { left: 30%; top: 92%;  animation-duration: 21s; animation-delay: -8.5s; opacity: .25; }

@keyframes dust-float {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: var(--o, inherit); }
  92%  { opacity: var(--o, inherit); }
  100% { transform: translate(25px, -50px); opacity: 0; }
}

.starfield,
.trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.starfield { opacity: 0.75; }
.trail-canvas { z-index: 3; opacity: 0.55; }

/* ============================================
   Header
   ============================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem clamp(1.2rem, 4vw, 3rem);
  color: var(--ink);
  transition: all 500ms var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(12, 10, 9, 0.78);
  backdrop-filter: blur(24px) saturate(1.1);
  box-shadow: 0 1px 0 var(--line), 0 8px 32px rgba(0,0,0,0.35);
}

.brand-mark,
.site-nav,
.header-action { min-height: 2.5rem; }
.brand-mark,
.site-nav,
.header-action,
.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
}

.brand-mark {
  justify-self: start;
  gap: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.brand-glyph {
  display: grid;
  width: 2.4rem; height: 2.4rem;
  place-items: center;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 8px;
  color: var(--gold);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 1.1rem;
  background: rgba(201, 169, 110, 0.04);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.12), inset 0 0 16px rgba(201, 169, 110, 0.04);
  transition: all 400ms var(--ease-smooth);
}
.brand-mark:hover .brand-glyph {
  border-color: rgba(201, 169, 110, 0.65);
  box-shadow: 0 0 36px rgba(201, 169, 110, 0.2), inset 0 0 24px rgba(201, 169, 110, 0.08);
  transform: scale(1.04);
}
.brand-name {
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.site-nav {
  justify-content: center;
  gap: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  color: var(--ink-soft);
  transition: color 400ms var(--ease-smooth);
}
.site-nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 0.8rem;
  background: linear-gradient(180deg, transparent, var(--line-mid), transparent);
}
.nav-prefix {
  display: inline-block;
  width: 5px; height: 5px;
  border: 1px solid var(--gold);
  opacity: 0.25;
  transform: scale(0.7) rotate(45deg);
  transition: all 400ms var(--ease-back);
}
.nav-text {
  display: inline-block;
  transition: transform 400ms var(--ease-back), color 400ms var(--ease-smooth);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--star); }
.site-nav a:hover .nav-prefix,
.site-nav a:focus-visible .nav-prefix {
  opacity: 0.75;
  transform: scale(1) rotate(45deg);
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.3);
}
.site-nav a:hover .nav-text,
.site-nav a:focus-visible .nav-text {
  transform: translateY(-1px);
  text-shadow: 0 0 20px rgba(240, 226, 200, 0.15);
}

.header-action {
  justify-self: end;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(201, 169, 110, 0.04);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: all 400ms var(--ease-smooth);
}
.header-action:hover {
  border-color: rgba(201, 169, 110, 0.5);
  background: rgba(201, 169, 110, 0.08);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.12), inset 0 0 16px rgba(201, 169, 110, 0.04);
  transform: translateY(-1px);
}

.sparkle {
  display: inline-block;
  width: 8px; height: 8px;
  position: relative;
  animation: sparkle-spin 5s ease-in-out infinite;
}
.sparkle::before,
.sparkle::after {
  content: "";
  position: absolute;
  background: var(--gold);
  opacity: 0.7;
}
.sparkle::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.sparkle::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }

@keyframes sparkle-spin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(180deg) scale(1.15); }
}

/* ============================================
   Hero
   ============================================ */

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  background: var(--void);
}

.room-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../public/hero-room-minimal.png");
  background-position: center;
  background-size: cover;
}

.room-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 10, 9, 0.88) 0%, rgba(12, 10, 9, 0.5) 45%, rgba(12, 10, 9, 0.12) 70%, rgba(12, 10, 9, 0.3) 100%);
}

.room-shadows {
  position: absolute;
  inset: auto 0 0;
  height: 35vh;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(12, 10, 9, 0.7) 50%, var(--void));
  pointer-events: none;
}

/* 房间小物件 */
.room-prop {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.prop-tablet {
  right: 14vw; top: 28vh;
  width: 5rem; height: 6.5rem;
  border: 1px solid rgba(232, 224, 214, 0.12);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(232, 224, 214, 0.06), rgba(232, 224, 214, 0.015)), rgba(20, 18, 16, 0.3);
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.05), inset 0 0 20px rgba(232, 224, 214, 0.02);
  backdrop-filter: blur(3px);
  animation: prop-float-1 10s ease-in-out infinite;
}
.prop-tablet::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgba(201, 169, 110, 0.1);
  border-radius: 4px;
}

.prop-card {
  right: 7vw; bottom: 24vh;
  width: 6.5rem; height: 4.2rem;
  border: 1px solid rgba(232, 224, 214, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(232, 224, 214, 0.04), rgba(232, 224, 214, 0.01)), rgba(20, 18, 16, 0.25);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.03);
  animation: prop-float-2 12s ease-in-out infinite;
}
.prop-card::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.2rem; height: 1.2rem;
  border: 1px solid rgba(201, 169, 110, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.prop-tag {
  left: min(8vw, 5.5rem); top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: tag-sway 7s ease-in-out infinite;
}
.tag-string {
  width: 1px; height: 2rem;
  background: linear-gradient(180deg, rgba(201, 169, 110, 0.3), rgba(201, 169, 110, 0.08));
}
.tag-text {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: 5px;
  color: rgba(201, 169, 110, 0.55);
  background: rgba(12, 10, 9, 0.4);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(201, 169, 110, 0.04);
}

.prop-lamp {
  left: 18vw; bottom: 22vh;
  width: 3rem; height: 4rem;
  animation: prop-float-3 9s ease-in-out infinite;
}
.lamp-bulb {
  position: absolute;
  bottom: 0; left: 50%;
  width: 1.2rem; height: 1.6rem;
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 4px 4px 2px 2px;
  background: rgba(201, 169, 110, 0.06);
  transform: translateX(-50%);
}
.lamp-glow {
  position: absolute;
  bottom: 0.8rem; left: 50%;
  width: 6rem; height: 6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.1), transparent 70%);
  filter: blur(12px);
  transform: translateX(-50%);
  animation: lamp-breathe 4s ease-in-out infinite;
}

@keyframes prop-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50%      { transform: translate3d(-0.5rem, -1.2rem, 0) rotate(2deg); }
}
@keyframes prop-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50%      { transform: translate3d(0.4rem, -0.8rem, 0) rotate(-2deg); }
}
@keyframes prop-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0.2rem, -0.6rem, 0); }
}
@keyframes tag-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes lamp-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.9;  transform: translateX(-50%) scale(1.15); }
}

/* Hero 内容 */
.hero-content {
  position: relative;
  z-index: 10;
  align-self: center;
  width: min(90vw, 1040px);
  margin: 0 auto;
  padding: 8rem 0;
}

[data-hero-reveal] {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-enter 900ms var(--ease-out) forwards;
}
[data-hero-reveal]:nth-child(1) { animation-delay: 200ms; }
[data-hero-reveal]:nth-child(2) { animation-delay: 450ms; }
[data-hero-reveal]:nth-child(3) { animation-delay: 650ms; }
[data-hero-reveal]:nth-child(4) { animation-delay: 850ms; }

@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.badge-line {
  display: inline-block;
  width: 1.8rem; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.eyebrow,
.small-label {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1, h2, h3 {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 600;
}
h1 {
  max-width: 9em;
  margin-top: 0.9rem;
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 0 0 40px rgba(201, 169, 110, 0.1);
}
h2 {
  max-width: 14em;
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  line-height: 1.12;
  color: var(--ink);
}
h3 {
  font-size: 1.15rem;
  color: var(--ink);
}

.hero-lede {
  max-width: 40rem;
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: clamp(0.92rem, 1.6vw, 1.1rem);
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

/* 按钮 */
.primary-action,
.secondary-action {
  position: relative;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  overflow: hidden;
  transition: all 400ms var(--ease-out);
}

.primary-action {
  color: var(--wood);
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  box-shadow: 0 0 32px rgba(201, 169, 110, 0.18), 0 4px 16px rgba(0,0,0,0.3);
}
.primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 44px rgba(201, 169, 110, 0.28), 0 8px 24px rgba(0,0,0,0.3);
}
.primary-action:active { transform: translateY(0) scale(0.98); }

.btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.12) 48%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.12) 52%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}
.primary-action:hover .btn-shine {
  transition: transform 700ms var(--ease-out);
  transform: translateX(100%);
}

.secondary-action {
  border: 1.5px solid rgba(232, 224, 214, 0.2);
  color: var(--ink);
  background: rgba(232, 224, 214, 0.025);
  backdrop-filter: blur(8px);
}
.secondary-action:hover {
  border-color: rgba(201, 169, 110, 0.35);
  background: rgba(201, 169, 110, 0.05);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.06);
  transform: translateY(-2px);
}

/* 按钮图标 */
.btn-icon {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.icon-star { width: 10px; height: 10px; }
.icon-star::before,
.icon-star::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.icon-star::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.icon-star::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }

.icon-arrow { width: 10px; height: 10px; }
.icon-arrow::before {
  content: "";
  position: absolute;
  top: 1px; left: 50%;
  width: 2px; height: 7px;
  background: currentColor;
  transform: translateX(-50%);
}
.icon-arrow::after {
  content: "";
  position: absolute;
  bottom: 1px; left: 50%;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.icon-mail {
  width: 12px; height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
}
.icon-mail::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

/* 滚动提示 */
.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(232, 224, 214, 0.28);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  opacity: 0;
  animation: hint-appear 1s var(--ease-out) 1.4s forwards;
}
.scroll-line {
  width: 1px; height: 2.6rem;
  background: linear-gradient(180deg, rgba(232, 224, 214, 0.3), transparent);
  animation: line-grow 2.2s ease-in-out infinite;
}
@keyframes hint-appear { to { opacity: 1; } }
@keyframes line-grow {
  0%, 100% { transform: scaleY(1); opacity: 0.25; }
  50%      { transform: scaleY(1.25); opacity: 0.6; }
}

/* ============================================
   Section 分隔装饰
   ============================================ */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
  opacity: 0.4;
}
.sd-line {
  width: 3rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-mid), transparent);
}
.sd-diamond {
  display: inline-block;
  width: 6px; height: 6px;
  border: 1px solid var(--gold);
  opacity: 0.4;
  animation: diamond-pulse 4s ease-in-out infinite;
}
@keyframes diamond-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1) rotate(45deg); }
  50%      { opacity: 0.6;  transform: scale(1.3) rotate(45deg); box-shadow: 0 0 8px rgba(201, 169, 110, 0.2); }
}

/* ============================================
   Sections 通用
   ============================================ */

.section {
  position: relative;
  padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem);
}
.section-inner {
  position: relative;
  z-index: 10;
  width: min(1040px, 100%);
  margin: 0 auto;
}
.section-heading {
  display: grid;
  gap: 0.7rem;
}

/* ============================================
   Quiet Intro
   ============================================ */

.quiet-intro {
  background: linear-gradient(180deg, var(--void), var(--wall));
}
.intro-layout {
  display: grid;
  grid-template-columns: 0.4fr 1.5fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.intro-layout h2 { margin: 0; }
.intro-layout p {
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.85;
}

/* ============================================
   Drawer Section
   ============================================ */

.drawer-section {
  background: linear-gradient(180deg, var(--wall), var(--wood));
}

.cabinet-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-left: 0.2rem;
}
.cabinet-top span {
  width: 2rem; height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  opacity: 0.35;
}
.cabinet-top span:nth-child(2) { width: 1.2rem; opacity: 0.2; }
.cabinet-top span:nth-child(3) { width: 2.5rem; opacity: 0.25; }
.cabinet-top span:nth-child(4) { width: 0.8rem; opacity: 0.15; }

.cabinet-ornament {
  margin-left: auto;
  width: 0.4rem; height: 0.4rem;
  border: 1px solid rgba(201, 169, 110, 0.25);
  transform: rotate(45deg);
  animation: ornament-spin 8s ease-in-out infinite;
}
@keyframes ornament-spin {
  0%, 100% { transform: rotate(45deg); opacity: 0.3; }
  50%      { transform: rotate(135deg); opacity: 0.6; }
}

.drawer-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.drawer-card {
  position: relative;
  min-height: 18rem;
  padding: 1.4rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(232, 224, 214, 0.04), rgba(232, 224, 214, 0.01)), rgba(18, 15, 12, 0.82);
  transition: all 500ms var(--ease-out);
  cursor: default;
}
.drawer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(201, 169, 110, 0) 0%, rgba(201, 169, 110, 0.025) 100%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.drawer-card:hover {
  background: linear-gradient(180deg, rgba(232, 224, 214, 0.06), rgba(232, 224, 214, 0.015)), rgba(22, 18, 14, 0.88);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.drawer-card:hover::before { opacity: 1; }

.drawer-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}
.drawer-knob {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), transparent);
  opacity: 0.4;
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.12);
  transition: all 400ms var(--ease-out);
}
.drawer-card:hover .drawer-knob {
  opacity: 0.8;
  box-shadow: 0 0 14px rgba(201, 169, 110, 0.25);
  transform: scale(1.1);
}
.drawer-label {
  color: var(--gold);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 500;
  font-size: 0.8rem;
  opacity: 0.4;
  transition: opacity 400ms ease;
}
.drawer-card:hover .drawer-label { opacity: 0.75; }

.drawer-inside h3 { font-size: 1.1rem; }
.drawer-inside p {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.7;
}

.drawer-glow {
  position: absolute;
  left: 50%; bottom: -20%;
  width: 60%; height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.06), transparent 70%);
  filter: blur(20px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.drawer-card:hover .drawer-glow { opacity: 1; }

.cabinet-feet {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0 0.5rem;
}
.cabinet-feet span {
  width: 0.4rem; height: 0.7rem;
  background: linear-gradient(180deg, var(--line), transparent);
}

/* ============================================
   Bench Section
   ============================================ */

.bench-section {
  background: linear-gradient(180deg, var(--wood), var(--wood-deep));
  overflow: hidden;
}

.bench-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.bench-surface {
  position: relative;
  min-height: 20rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(90, 138, 130, 0.05), rgba(168, 92, 76, 0.03)), rgba(18, 15, 12, 0.55);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.bench-surface::before {
  content: "";
  position: absolute;
  inset: 0.9rem;
  border: 1px solid rgba(232, 224, 214, 0.05);
  border-radius: 8px;
  pointer-events: none;
}

.bench-tools {
  position: absolute;
  inset: 1.8rem;
  pointer-events: none;
}
.tool-ruler {
  position: absolute;
  top: 18%; left: 12%;
  width: 4.5rem; height: 0.12rem;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  opacity: 0.35;
  transform: rotate(-8deg);
  animation: tool-shift 8s ease-in-out infinite;
}
.tool-ink {
  position: absolute;
  top: 42%; right: 18%;
  width: 1.3rem; height: 1.8rem;
  border: 1px solid rgba(232, 224, 214, 0.1);
  border-radius: 3px;
  background: rgba(232, 224, 214, 0.03);
  animation: tool-shift 10s ease-in-out infinite reverse;
}
.tool-brush {
  position: absolute;
  bottom: 22%; left: 32%;
  width: 2.8rem; height: 0.1rem;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: 0.3;
  transform: rotate(15deg);
  animation: tool-shift 12s ease-in-out infinite;
}
@keyframes tool-shift {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--r, 0deg)) translateY(-3px); }
}
.tool-ruler { --r: -8deg; }
.tool-brush { --r: 15deg; }

.bench-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0; padding: 0;
  list-style: none;
}

.step-item {
  position: relative;
  min-height: 6rem;
  padding: 1rem 1rem 1rem 4.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.04), rgba(232, 224, 214, 0.01)), rgba(18, 15, 12, 0.5);
  box-shadow: var(--shadow-sm);
  transition: all 400ms var(--ease-out);
  overflow: hidden;
}
.step-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.step-item:hover {
  border-color: rgba(201, 169, 110, 0.12);
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.06), rgba(232, 224, 214, 0.015)), rgba(22, 18, 14, 0.55);
  transform: translateX(5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 16px rgba(201, 169, 110, 0.03);
}
.step-item:hover::before { opacity: 0.4; }

.step-num {
  position: absolute;
  left: 1.1rem; top: 1.1rem;
  color: var(--gold);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 500;
  font-size: 0.75rem;
  opacity: 0.35;
  transition: opacity 400ms ease;
}
.step-item:hover .step-num { opacity: 0.7; }

.step-title {
  color: var(--star);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.step-item p {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.87rem;
  line-height: 1.65;
}

/* ============================================
   Shelf Section
   ============================================ */

.shelf-section {
  background: linear-gradient(180deg, var(--wood-deep), var(--void));
}

.shelf-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.shelf-structure {
  position: relative;
  min-height: 22rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18, 15, 12, 0.55);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shelf-structure::before {
  content: "";
  position: absolute;
  inset: 0.9rem;
  border: 1px solid rgba(232, 224, 214, 0.04);
  border-radius: 8px;
  pointer-events: none;
}

.shelf-board {
  position: absolute;
  left: 1.3rem; right: 1.3rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-mid), transparent);
}
.board-1 { top: 28%; }
.board-2 { top: 52%; }
.board-3 { top: 76%; }

.shelf-book {
  position: absolute;
  bottom: 2px;
  width: 0.7rem; height: var(--h);
  background: linear-gradient(180deg, var(--c), rgba(0,0,0,0.3));
  border-radius: 1px 1px 0 0;
  opacity: 0.45;
  animation: book-settle 6s ease-in-out infinite;
}
.shelf-book:nth-child(1) { left: 14%; animation-delay: 0s;    }
.shelf-book:nth-child(2) { left: 21%; animation-delay: -1s;   }
.shelf-book:nth-child(3) { left: 28%; animation-delay: -2.5s; }
.shelf-book:nth-child(4) { left: 35%; animation-delay: -1.8s; }

@keyframes book-settle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

.shelf-frame {
  position: absolute;
  left: 52%; top: 8%;
  width: 3.2rem; height: 3.8rem;
  border: 1px solid rgba(232, 224, 214, 0.1);
  border-radius: 3px;
  background: rgba(232, 224, 214, 0.025);
}
.shelf-frame::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border: 1px solid rgba(232, 224, 214, 0.05);
}

.shelf-box {
  position: absolute;
  left: 70%; top: 16%;
  width: 2.2rem; height: 1.8rem;
  border: 1px solid rgba(201, 169, 110, 0.12);
  border-radius: 3px;
  background: rgba(201, 169, 110, 0.03);
  animation: box-hover 7s ease-in-out infinite;
}
@keyframes box-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.shelf-scroll {
  position: absolute;
  left: 16%; top: 56%;
  width: 0.5rem; height: 3.2rem;
  border: 1px solid rgba(232, 224, 214, 0.08);
  border-radius: 3px;
  background: rgba(232, 224, 214, 0.02);
}

.shelf-vial {
  position: absolute;
  left: 62%; top: 58%;
  width: 0.9rem; height: 1.6rem;
  border: 1px solid rgba(90, 138, 130, 0.15);
  border-radius: 0 0 3px 3px;
  background: rgba(90, 138, 130, 0.03);
  overflow: hidden;
}
.vial-liquid {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(90, 138, 130, 0.2), rgba(90, 138, 130, 0.08));
  animation: vial-bubble 4s ease-in-out infinite;
}
@keyframes vial-bubble {
  0%, 100% { height: 55%; }
  50%      { height: 65%; }
}

.shelf-layout p {
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ============================================
   Letter Section
   ============================================ */

.letter-section {
  padding-bottom: clamp(6rem, 10vw, 10rem);
  background: linear-gradient(180deg, var(--void), var(--wood-deep));
}

.letter-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(232, 224, 214, 0.03), rgba(201, 169, 110, 0.015)), rgba(18, 15, 12, 0.55);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.letter-corner {
  position: absolute;
  width: 1.2rem; height: 1.2rem;
  pointer-events: none;
}
.letter-corner::before,
.letter-corner::after {
  content: "";
  position: absolute;
  background: var(--gold);
  opacity: 0.25;
}
.letter-corner::before { width: 100%; height: 1px; }
.letter-corner::after  { width: 1px; height: 100%; }

.letter-corner.lt { top: 0.8rem; left: 0.8rem; }
.letter-corner.lt::before { top: 0; left: 0; }
.letter-corner.lt::after  { top: 0; left: 0; }

.letter-corner.rt { top: 0.8rem; right: 0.8rem; transform: rotate(90deg); }
.letter-corner.rt::before { top: 0; left: 0; }
.letter-corner.rt::after  { top: 0; left: 0; }

.letter-corner.lb { bottom: 0.8rem; left: 0.8rem; transform: rotate(-90deg); }
.letter-corner.lb::before { top: 0; left: 0; }
.letter-corner.lb::after  { top: 0; left: 0; }

.letter-corner.rb { bottom: 0.8rem; right: 0.8rem; transform: rotate(180deg); }
.letter-corner.rb::before { top: 0; left: 0; }
.letter-corner.rb::after  { top: 0; left: 0; }

.letter-wax {
  position: absolute;
  right: 1.6rem; top: 1.6rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(168, 92, 76, 0.25);
  background: radial-gradient(circle, rgba(168, 92, 76, 0.12), transparent 70%);
  box-shadow: 0 0 14px rgba(168, 92, 76, 0.08);
  animation: wax-shimmer 5s ease-in-out infinite;
}
.letter-wax::before,
.letter-wax::after {
  content: "";
  position: absolute;
  background: rgba(168, 92, 76, 0.45);
}
.letter-wax::before {
  top: 50%; left: 22%;
  width: 56%; height: 2px;
  transform: translateY(-50%);
}
.letter-wax::after {
  top: 22%; left: 50%;
  width: 2px; height: 56%;
  transform: translateX(-50%);
}

@keyframes wax-shimmer {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

.letter-panel p {
  color: var(--ink-soft);
  line-height: 1.8;
}
.letter-panel .primary-action {
  justify-self: start;
  margin-top: 0.4rem;
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  color: var(--muted);
  background: var(--wood-deep);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* ============================================
   Scroll reveal animations
   ============================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-drawer] {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
[data-drawer].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-drawer]:nth-child(1) { transition-delay: 0ms; }
[data-drawer]:nth-child(2) { transition-delay: 80ms; }
[data-drawer]:nth-child(3) { transition-delay: 160ms; }
[data-drawer]:nth-child(4) { transition-delay: 240ms; }

[data-step] {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
[data-step].is-visible {
  opacity: 1;
  transform: translateX(0);
}
[data-step]:nth-child(1) { transition-delay: 0ms; }
[data-step]:nth-child(2) { transition-delay: 90ms; }
[data-step]:nth-child(3) { transition-delay: 180ms; }
[data-step]:nth-child(4) { transition-delay: 270ms; }

/* ============================================
   Reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .room-mood,
  .starfield,
  .trail-canvas,
  .corner-deco {
    display: none;
  }
  [data-hero-reveal] {
    opacity: 1;
    transform: none;
    animation: none;
  }
  [data-reveal],
  [data-drawer],
  [data-step] {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 920px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .room-bg { background-position: 58% center; }
  .intro-layout,
  .bench-layout,
  .shelf-layout { grid-template-columns: 1fr; }
  .drawer-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-prop { opacity: 0.4; }
}

@media (max-width: 640px) {
  .site-header { padding: 0.8rem 1rem; }
  .brand-name { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; }
  .header-action { padding: 0.5rem 0.7rem; font-size: 0.8rem; }
  .hero { min-height: 92svh; }
  .room-bg { background-position: 62% center; }
  h1 { font-size: clamp(2.6rem, 15vw, 4.2rem); }
  .hero-actions, .drawer-rail { display: grid; grid-template-columns: 1fr; }
  .primary-action, .secondary-action { width: 100%; }
  .drawer-card { min-height: 14rem; }
  .room-prop, .scroll-hint, .corner-deco { display: none; }
  .bench-surface { min-height: 14rem; }
  .shelf-structure { min-height: 16rem; }
  .site-footer { display: grid; text-align: center; }
}