/* 首页：中央邮局场景（店外 → 店内）+ 空页面框架 */
:root {
  --vh: 100vh;
}
@supports (height: 100svh) {
  :root {
    --vh: 100svh;
  }
}
.page[hidden],
.scene-layer[hidden],
.counter-letter[hidden],
.swipe-hint[hidden],
.scene-tag[hidden] {
  display: none !important;
}

/* ---------- 场景：铺满屏幕，比屏幕宽时左右滑 ---------- */
.page-home {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip; /* 店内层放大时不让整页被滚动 */
  background: #8a6a4a; /* 和店内木色接近，进门过渡时边缘不显眼 */
}
.scene-layer {
  position: absolute;
  inset: 0;
}
.scene-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
}
.scene-viewport::-webkit-scrollbar {
  display: none;
}
.scene-viewport.can-pan {
  cursor: grab;
  user-select: none;
}
.scene-viewport.panning {
  cursor: grabbing;
}
.scene-viewport.panning .scene-hotspot {
  pointer-events: none;
}
.scene {
  --h: max(var(--vh), calc(100vw / var(--ratio)));
  position: relative;
  flex: 0 0 auto;
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
}
.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 进门：店外朝门口放大淡出，店内从微亮里落定 */
.scene-exterior {
  z-index: 2;
}
.scene-interior {
  z-index: 1;
}

/* ---------- 店外 ---------- */
/* 招牌：木头色刻字。用 multiply 加深透出木纹；上沿阴影、下沿受光做出凹槽 */
.shop-sign {
  position: absolute;
  pointer-events: none;
}
.shop-sign span {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.shop-sign .sign-paint {
  background: rgb(206, 168, 128);
  mix-blend-mode: multiply;
}
.shop-sign .sign-shade,
.shop-sign .sign-light {
  --d: calc(var(--h) * 0.0018);
  -webkit-mask-image: var(--logo), var(--logo);
  mask-image: var(--logo), var(--logo);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
.shop-sign .sign-shade {
  background: rgba(16, 12, 36, 0.6);
  -webkit-mask-position: 0 0, 0 var(--d);
  mask-position: 0 0, 0 var(--d);
}
.shop-sign .sign-light {
  background: rgba(255, 240, 214, 0.6);
  -webkit-mask-position: 0 0, 0 calc(var(--d) * -1);
  mask-position: 0 0, 0 calc(var(--d) * -1);
}
/* 门帘上的字：米白，像染在布上 */
.noren-words {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.noren-words span {
  position: absolute;
  transform: translate(-50%, -50%);
  color: rgba(246, 239, 224, 0.9);
  font:
    400 calc(var(--h) * 0.0128) / 1 'Chalkboard SE',
    'Hannotate SC',
    'Comic Sans MS',
    cursive;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 0 1px rgba(246, 239, 224, 0.35);
  user-select: none;
}
.sliding-door {
  --open: 0;
  position: absolute;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.sliding-door.dragging {
  cursor: grabbing;
}
.sliding-door:focus-visible {
  outline: 2px solid rgba(255, 246, 220, 0.9);
  outline-offset: 3px;
}
.door-inside {
  position: absolute;
  inset: 0;
  background-size: auto 150%;
  background-position: 50% 52%;
  opacity: calc(var(--open) * 5);
}
.door-inside::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(255, 242, 210, 0.5),
    rgba(255, 222, 165, 0.16) 60%,
    rgba(60, 38, 18, 0.28)
  );
}
.door-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  will-change: transform;
}
.door-left {
  left: 0;
  transform: translateX(calc(var(--open) * -100%));
}
.door-right {
  right: 0;
  transform: translateX(calc(var(--open) * 100%));
}
.door-art {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ---------- 档案标签（场景里的提示字） ---------- */
.scene-tag,
.swipe-hint {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px 5px 22px;
  background: #f8f0e0;
  border-radius: 3px;
  color: #2c3a52;
  font:
    400 13px/1.25 'Chalkboard SE',
    'Hannotate SC',
    'PingFang SC',
    'Comic Sans MS',
    sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(40, 30, 20, 0.16);
  pointer-events: none;
}
/* 手绘感边框：只让边框抖一点，字不受影响 */
.scene-tag::after,
.swipe-hint::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1.3px solid rgba(71, 111, 150, 0.62);
  border-radius: 3px;
  filter: url(#hand-drawn);
  pointer-events: none;
}
.scene-tag::before,
.swipe-hint::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  border: 1px solid rgba(71, 111, 150, 0.7);
  background: var(--cream);
}
.door-hint {
  transform: translateX(-50%) rotate(-1.5deg);
  animation: tagSway 2.8s ease-in-out infinite;
}
@keyframes tagSway {
  50% {
    transform: translateX(-50%) rotate(1deg);
  }
}
.swipe-hint {
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

/* ---------- 物件热点 ---------- */
.scene-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 6px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.25s,
    box-shadow 0.25s;
}
.scene-hotspot .scene-tag {
  left: 50%;
  bottom: calc(100% + 6px);
  opacity: 0;
  transform: translate(-50%, 4px) rotate(-1.5deg);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.scene-hotspot:hover,
.scene-hotspot:focus-visible {
  background: rgba(255, 244, 214, 0.14);
  box-shadow: 0 0 26px rgba(255, 226, 160, 0.35);
}
@supports ((-webkit-backdrop-filter: brightness(1)) or (backdrop-filter: brightness(1))) {
  .scene-hotspot:hover,
  .scene-hotspot:focus-visible {
    background: rgba(255, 244, 214, 0.05);
    -webkit-backdrop-filter: brightness(1.14);
    backdrop-filter: brightness(1.14);
  }
}
.scene-hotspot:hover .scene-tag,
.scene-hotspot:focus-visible .scene-tag {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-1.5deg);
}
@media (hover: none) {
  .scene-hotspot .scene-tag {
    opacity: 0.94;
    transform: translate(-50%, 0) rotate(-1.5deg) scale(0.88);
  }
}

/* ---------- 柜台上的本月来信 ---------- */
.counter-letter {
  position: absolute;
  z-index: 4;
  padding: calc(var(--h) * 0.0065);
  border: 0;
  background: #fffdf7;
  transform: translate(-50%, -50%) rotate(-6deg);
  box-shadow: 0 6px 14px rgba(40, 24, 10, 0.28);
  cursor: pointer;
  container-type: inline-size;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.counter-letter img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.counter-letter:hover,
.counter-letter:focus-visible {
  outline: none;
  transform: translate(-50%, -54%) rotate(-4deg);
  box-shadow: 0 10px 20px rgba(40, 24, 10, 0.3);
}
.counter-letter.landed::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: letterGlow 2.6s ease-in-out infinite;
}
@keyframes letterGlow {
  0%,
  100% {
    box-shadow: 0 0 10px 1px rgba(255, 226, 150, 0);
  }
  50% {
    box-shadow: 0 0 22px 6px rgba(255, 226, 150, 0.55);
  }
}
.letter-postmark {
  position: absolute;
  right: -8%;
  top: -16%;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(71, 111, 150, 0.75);
  box-shadow:
    inset 0 0 0 2px rgba(255, 253, 247, 0.6),
    inset 0 0 0 3px rgba(71, 111, 150, 0.45);
  background: rgba(255, 253, 247, 0.5);
  color: rgba(71, 111, 150, 0.95);
  font:
    700 6cqw/1.05 Arial,
    sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  transform: rotate(14deg);
}
.letter-tag {
  left: 50%;
  top: calc(100% + 10px);
  opacity: 0;
  transform: translateX(-50%) rotate(6deg);
  transition: opacity 0.4s ease 0.15s;
}
.counter-letter.landed .letter-tag {
  opacity: 1;
}

/* ---------- 空页面框架 ---------- */
.page-frame {
  min-height: var(--vh);
  padding: clamp(28px, 8vh, 80px) 16px 60px;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(96, 148, 190, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 148, 190, 0.14) 1px, transparent 1px);
  background-size: 32px 32px;
}
.frame-sheet {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 5vw, 48px);
  background: var(--paper);
  border: 1px solid rgba(71, 111, 150, 0.28);
  box-shadow: 0 10px 30px rgba(20, 36, 59, 0.08);
}
.postmark-path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  padding: 6px 12px;
  border: 1.5px solid rgba(71, 111, 150, 0.55);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px var(--paper),
    inset 0 0 0 3px rgba(71, 111, 150, 0.3);
  color: var(--blue-dark);
  font:
    600 12px/1.3 'Avenir Next',
    'PingFang SC',
    sans-serif;
  letter-spacing: 0.08em;
  transform: rotate(-1.2deg);
}
.postmark-path a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.postmark-path i {
  font-style: normal;
  opacity: 0.6;
}
.page-frame .eyebrow {
  display: block;
}
.page-frame h1 {
  margin: 10px 0 14px;
}
.frame-note {
  margin: 0 0 24px;
  color: #5d6a78;
  line-height: 1.75;
}
.frame-note b {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.frame-list {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.frame-list a,
.return-tag {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px 12px 28px;
  background: #fffdf7;
  border: 1px solid rgba(71, 111, 150, 0.4);
  color: var(--ink);
  text-decoration: none;
}
.frame-list a::before,
.return-tag::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  border: 1px solid rgba(71, 111, 150, 0.7);
  background: var(--cream);
}
.frame-list a:hover {
  background: #eef4f8;
}
.frame-list .label {
  font:
    400 20px/1.2 Georgia,
    'Songti SC',
    serif;
}
.frame-list small {
  color: #66717d;
  letter-spacing: 0.04em;
}
.frame-list .empty {
  color: #8a939c;
  font-size: 14px;
}
.return-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.return-tag {
  display: inline-flex;
  padding: 8px 14px 8px 26px;
  background: var(--cream);
  font:
    600 13px/1.2 'Avenir Next',
    'PingFang SC',
    sans-serif;
  letter-spacing: 0.06em;
  transform: rotate(-1deg);
}
.return-tag:hover {
  background: var(--ink);
  color: #fff;
}

/* 空框架页的开头一句、投一封信的三步 */
.frame-lead {
  max-width: 620px;
  margin: 0 0 26px;
  color: #3d4a5a;
  font:
    400 17px/1.6 Georgia,
    'Songti SC',
    serif;
}
.send-steps {
  margin: 0 0 30px;
  padding-left: 22px;
  color: #3d4a5a;
  line-height: 1.7;
}
.send-steps li + li {
  margin-top: 6px;
}
.send-steps b {
  color: var(--ink);
}