@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --site-paper: #faf7f2;
  --site-ink: #182433;
  --site-night: #182433;
  --site-accent: #dfb980;
  --site-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --site-header: 68px;
}
html { scroll-padding-top: calc(var(--site-header) + 20px); }
body.cinematic-site { background: var(--site-paper); color: var(--site-ink); }
.cinematic-site :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cinematic-site .header {
  position: sticky;
  top: 0;
  color: #182433;
  background: #faf7f2f2;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #18243324;
}
.cinematic-site .header-inner { height: var(--site-header); }
.cinematic-site .header .brand-name { font: 700 24px/.92 var(--sans); letter-spacing: -.055em; word-spacing: .045em; }
.cinematic-site .header .brand-dot { color: #956731; }
.cinematic-site .header .brand-sub { color: #5e584f; font: 9px/1 var(--site-mono); letter-spacing: .08em; }
.cinematic-site .header .nav { font-size: 12px; gap: clamp(8px, 1.25vw, 19px); }
@media (min-width: 781px) {
  .cinematic-site .header .nav { padding: 4px 5px; border: 1px solid #18243324; border-radius: 999px; }
  .cinematic-site .header .nav a { padding: 7px 10px; border-radius: 999px; }
  .cinematic-site .header .nav a:hover { color: #182433; background: #e8dfd2; }
  .cinematic-site .header .nav .nav-contact { color: #faf7f2; background: #182433; border: 0; }
  .cinematic-site .header .nav .nav-contact:hover { color: #182433; background: #dfb980; }
}
.cinematic-site .header .lang,
.cinematic-site .header .mobile-menu { color: #182433; border-color: #18243324; }
.opening {
  --journey: 0;
  color: #182433;
  background: #f1ebe0;
  position: relative;
}
.model-ready .opening { min-height: calc(143svh - var(--site-header)); }
.opening-stage {
  position: relative;
  min-height: calc(100svh - var(--site-header));
  overflow: clip;
  isolation: isolate;
  display: grid;
  align-items: center;
  background: radial-gradient(ellipse at 63% 43%, #faf7f2 15%, #f3ece0 65%, #eae0d0 100%);
}
.model-ready .opening-stage { position: sticky; top: var(--site-header); }
.opening-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("assets/scene-grain.svg");
  opacity: .27;
  pointer-events: none;
}
.opening-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4.1fr) minmax(0, 6fr);
  align-items: center;
  gap: 24px 0;
  padding: clamp(32px, 5.4vh, 72px) 0 18px;
}
.opening-copy { position: relative; z-index: 2; padding: 0 0 26px; }
.scene-kicker, .opening-bottom, .scene-meta, .scene-compass,
.scene-drag, .scene-caption { font: 500 10px/1.4 var(--site-mono); letter-spacing: .12em; }
.scene-kicker { display: flex; align-items: center; gap: 11px; color: #625143; margin: 0 0 26px; }
.scene-kicker i { width: 7px; height: 7px; background: #956731; border-radius: 50%; }
.opening-copy h1,
html[lang=zh-CN] .opening-copy h1 {
  color: #182433;
  font: 500 clamp(70px, 8.25vw, 139px)/.91 var(--sans);
  margin: 0;
  letter-spacing: -.075em; word-spacing: .025em;
}
.opening-copy h1 em { color: #895a2c; font: italic 400 1.15em/.65 "Instrument Serif", Georgia, serif; letter-spacing: -.045em; }
html[lang=zh-CN] .opening-copy h1 em { font: inherit; }
html[lang=zh-CN] .opening-copy h1 { font-size: clamp(51px, 6vw, 99px); line-height: 1.05; letter-spacing: -.065em; }
.opening-intro { max-width: 320px; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.6; color: #514c47; margin: 28px 0 25px; }
.opening-cta {
  display: inline-flex; gap: 32px; align-items: center; min-height: 46px; padding: 0 18px;
  border: 1px solid #182433; border-radius: 999px; color: #faf7f2; background: #182433;
  font-size: 13px; font-weight: 700; transition: background .2s, color .2s;
}
.opening-cta:hover { color: #182433; background: transparent; }
.opening-cta span:last-child { font-size: 16px; }
.scene { margin: 0 0 0 -25px; min-width: 0; position: relative; }
.scene-viewport {
  position: relative;
  height: clamp(390px, 62svh, 700px);
  min-width: 0;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 45%, #405365, #263647 56%, #182433);
  box-shadow: 0 22px 44px #18243325;
}
.scene-frame { position: absolute; inset: 0; border: 1px solid #e2c6a94a; pointer-events: none; }
.scene-frame::before, .scene-frame::after { content: ""; position: absolute; opacity: .55; }
.scene-frame::before { left: 50%; top: 0; bottom: 0; border-left: 1px dashed #e2c6a945; }
.scene-frame::after { top: 50%; left: 0; right: 0; border-top: 1px dashed #e2c6a945; }
.scene-frame i { position: absolute; width: 11px; height: 11px; border: 1px solid #edcb9dc7; }
.scene-frame i:nth-child(1) { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.scene-frame i:nth-child(2) { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.scene-frame i:nth-child(3) { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.scene-frame i:nth-child(4) { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.scene-meta, .scene-compass, .scene-drag { position: absolute; color: #efe3d4; pointer-events: none; z-index: 2; }
.scene-meta { display: grid; left: 14px; top: 12px; }
.scene-compass { right: 14px; top: 12px; }
.scene-compass i { font-style: normal; color: var(--site-accent); }
.scene-drag {
  bottom: 11px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 9px; white-space: nowrap;
}
.scene-drag > span:first-child { color: var(--site-accent); font-size: 19px; }
.scene-fallback { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: cover; filter: saturate(.72); }
#house-scene { display: none; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
#house-scene.is-dragging { cursor: grabbing; }
.model-ready #house-scene, .model-ready .scene-drag { display: flex; }
.model-ready .scene-fallback { display: none; }
.scene-caption { min-height: 52px; padding: 8px 0 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; color: #182433; }
.scene-caption strong, .scene-caption-note { display: block; }
.scene-caption-note { color: #64584c; font-size: 9px; margin-top: 3px; }
.scene-views { display: none; gap: 4px; align-items: center; }
.model-ready .scene-views { display: flex; }
.scene-views button {
  width: 44px; height: 44px; background: transparent; color: #182433;
  border: 1px solid #1824333d; border-radius: 3px; font: inherit;
}
.scene-views button:hover, .scene-views button[aria-pressed="true"] { background: var(--site-accent); color: #182433; border-color: var(--site-accent); }
.opening-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; color: #514c47; gap: 22px; }
.opening-scroll { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; }
.opening-scroll:hover { color: #895a2c; }
.opening-scroll > span:first-child { font: 18px/1 var(--sans); color: #895a2c; border: 1px solid #895a2c75; border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; }
.opening-progress { height: 1px; background: #18243338; flex: 1; overflow: hidden; }
.opening-progress i { display: block; width: 100%; height: 1px; background: #956731; transform-origin: left; transform: scaleX(max(.025, var(--journey))); }
.motion-ready [data-reveal] { transition: opacity .64s ease, translate .75s cubic-bezier(.17,.7,.2,1); }
.motion-ready [data-reveal]:not(.revealed):not(:focus-within) { opacity: .55; translate: 0 22px; }
@media (max-width: 1000px) {
  .opening-copy h1 { font-size: clamp(66px, 8.6vw, 102px); }
  .scene { margin-left: -6px; }
}
@media (max-width: 800px) {
  :root { --site-header: 61px; }
  .cinematic-site .header .nav { top: var(--site-header); background: #faf7f2; color: #182433; }
  .opening-inner { grid-template-columns: 1fr; gap: 14px; padding-top: 26px; padding-bottom: 10px; }
  .opening-copy { padding: 0; }
  .scene-kicker { margin-bottom: 10px; }
  .opening-copy h1 { font-size: clamp(54px, 11vw, 89px); }
  .opening-intro { margin: 12px 0 13px; font-size: 14px; max-width: 385px; }
  .opening-cta { min-height: 44px; }
  .scene { margin-left: 0; }
  .scene-viewport { height: clamp(240px, 40svh, 490px); }
  .opening-bottom { gap: 11px; }
  .opening-location { display: none; }
  .model-ready .opening { min-height: calc(100svh - var(--site-header)); }
  .model-ready .opening-stage { position: relative; top: auto; }
}
@media (max-width: 390px) {
  .scene-caption { letter-spacing: .025em; }
  .scene-caption-note { font-size: 8px; }
}
@media (max-height: 675px) and (min-width: 801px) {
  .scene-viewport { height: clamp(315px, 59svh, 440px); }
  .opening-copy h1 { font-size: clamp(63px, 7.4vw, 100px); }
}
@media (prefers-reduced-motion: reduce) {
  .model-ready .opening { min-height: 0; }
  .model-ready .opening-stage { position: relative; top: auto; }
  .motion-ready [data-reveal] { transition: none; }
  .motion-ready [data-reveal]:not(.revealed) { opacity: 1; translate: none; }
}