/* 意中阁 · 门楼页：照图铺画 + 风雾动效 + HTML 热点层 + 静态退路 */

.gate-body { margin: 0; overflow: hidden; background: #d9d3c2; }
.gate-scene { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 边缘填充：同图模糊放大，避免宽高比不同时露黑边 ─────── */
.gate-bg {
  position: absolute; inset: -10%; z-index: 0;
  background: url("art/yizhongge-gate.png") center / cover no-repeat;
  filter: blur(46px) saturate(.9) brightness(1.08);
  transform: scale(1.12);
}

/* ── 精确比例画面层 ────────────────────────────────────────
   容器比例 = 图片比例，热点百分比才能永远对齐图中匾额与门 */
.gate-art {
  --ar: 1.77778;
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(100vw, calc(100vh * var(--ar)));
  height: min(100vh, calc(100vw / var(--ar)));
  width: min(100vw, calc(100dvh * var(--ar)));
  height: min(100dvh, calc(100vw / var(--ar)));
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  overflow: hidden;
  box-shadow: 0 0 56px rgba(38, 32, 24, .22);
}
.art-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none;
}

/* 左右树冠：同图羽化裁切后极缓摆动，模拟风过枝叶 */
.art-tree { will-change: transform; }
.art-tree--l {
  clip-path: inset(0 82% 0 0);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 9%, transparent 18%);
  mask-image: linear-gradient(90deg, #000 0%, #000 9%, transparent 18%);
  transform-origin: 6% 88%;
  animation: swayL 7.5s ease-in-out infinite alternate;
}
.art-tree--r {
  clip-path: inset(0 0 0 82%);
  -webkit-mask-image: linear-gradient(90deg, transparent 82%, #000 91%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 82%, #000 91%, #000 100%);
  transform-origin: 94% 88%;
  animation: swayR 8.7s ease-in-out infinite alternate;
}
@keyframes swayL { from { transform: rotate(-.45deg); } to { transform: rotate(.42deg) translateY(2px); } }
@keyframes swayR { from { transform: rotate(.38deg); } to { transform: rotate(-.42deg) translateY(1px); } }

/* 地面晨雾缓慢流动 */
.art-haze {
  position: absolute; left: -15%; width: 130%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(240, 238, 226, .22), rgba(240, 238, 226, 0) 68%);
}
.art-haze--1 { bottom: 1%; height: 30%; animation: haze 34s ease-in-out infinite alternate; }
.art-haze--2 { bottom: 23%; height: 23%; opacity: .55; animation: haze 46s ease-in-out infinite alternate-reverse; }
@keyframes haze { from { transform: translateX(-7%) scaleX(1); } to { transform: translateX(9%) scaleX(1.08); } }

.art-leaves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.art-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 54%, rgba(38, 32, 24, .28) 100%);
}

/* 点匾时金边一闪 */
.plaque-glow {
  position: absolute; left: 44.6%; top: 50.5%; width: 11.4%; height: 9.5%;
  opacity: 0; pointer-events: none; border: 2px solid rgba(236, 204, 126, .95);
  box-shadow: 0 0 26px rgba(236, 204, 126, .8), inset 0 0 20px rgba(236, 204, 126, .35);
}
.is-by-plaque .plaque-glow { animation: plaqueFlash .95s ease-out forwards; }
@keyframes plaqueFlash {
  0% { opacity: 0; transform: scale(.94); }
  25% { opacity: 1; transform: scale(1.03); }
  100% { opacity: .85; transform: scale(1); }
}

/* ── 静态退路：图片加载失败时出现 ────────────────────────── */
.gate-fallback { display: none; position: absolute; inset: 0; z-index: 1; background: #e9e4d6; }
.gate-fallback svg { width: 100%; height: 100%; display: block; }
.is-fallback .gate-fallback { display: block; }
.is-fallback .art-img, .is-fallback .art-haze, .is-fallback .art-leaves,
.is-fallback .art-vignette, .is-fallback .art-tree { display: none; }
.is-fallback .gate-loader { display: none; }
.is-fallback .gate-tip { display: none; }

/* ── 加载层 ──────────────────────────────────────────────── */
.gate-loader {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #e9e3d4; color: #3b352c;
  font-family: "LXGW WenKai", "Kaiti SC", KaiTi, STKaiti, "Songti SC", SimSun, serif;
  transition: opacity .8s ease;
}
.gate-loader.is-done { opacity: 0; pointer-events: none; }
.gate-loader-title { margin: 0; font-size: 30px; letter-spacing: .5em; text-indent: .5em; }
.gate-loader-sub { margin: 0; font-size: 13px; letter-spacing: .22em; color: #766c5b; }
.gate-loader-bar { width: 210px; height: 2px; background: #cfc6b2; overflow: hidden; }
.gate-loader-bar i { display: block; height: 100%; width: 0; background: #9d4a38; transition: width .3s ease; }
.gate-loader-pct { margin: 0; font-size: 11px; letter-spacing: .18em; color: #9a8f7b; font-variant-numeric: tabular-nums; }

/* ── 热点：位置对应图中匾额与两扇门 ──────────────────────── */
.gate-hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hotspot {
  position: absolute; display: block; pointer-events: auto; cursor: pointer;
  background: transparent; border: 0; outline-offset: 3px;
  transition: background .25s ease, box-shadow .25s ease;
}
.hotspot:hover, .hotspot:focus-visible {
  background: rgba(232, 200, 122, .10);
  box-shadow: 0 0 0 1px rgba(232, 200, 122, .62), inset 0 0 20px rgba(232, 200, 122, .14);
}
.hotspot--plaque { left: 44.6%; top: 50.5%; width: 11.4%; height: 9.5%; }
.hotspot--ring-l { left: 46.6%; top: 61%; width: 3.9%; height: 16.5%; }
.hotspot--ring-r { left: 50.3%; top: 61%; width: 3.9%; height: 16.5%; }

/* ── HUD：题款、提示、今日一笺、直入 ─────────────────────── */
.gate-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.gate-hud a { pointer-events: auto; }
.gate-mark {
  position: absolute; top: 30px; right: 38px; display: flex; align-items: center; gap: 12px;
  writing-mode: vertical-rl; color: #3f372b;
  font-family: "LXGW WenKai", KaiTi, STKaiti, "Songti SC", SimSun, serif;
  font-size: 14px; letter-spacing: .32em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .8), 0 0 8px rgba(255, 255, 255, .6);
}
.gate-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 8px; background: #9d4332; color: #f5ead2;
  font-size: 15px; letter-spacing: 0; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(90, 40, 30, .28);
}
/* 左下提示撤掉，画面只留建筑、右上题款与右下压角小签 */
.gate-tip { display: none; }
/* 压角题跋：深色半透明小签，融入石板地面，不再是大块补丁 */
.gate-caption {
  position: absolute; right: 24px; bottom: 22px; text-align: right;
  padding: 11px 15px 10px 17px; color: #f2ead8;
  background: rgba(34, 29, 23, .76);
  border-right: 2px solid rgba(196, 154, 88, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 4px 18px rgba(20, 16, 12, .30);
  font-family: "LXGW WenKai", KaiTi, STKaiti, "Songti SC", SimSun, serif;
}
.gate-verse { margin: 0 0 4px; font-size: 15px; letter-spacing: .04em; }
.gate-verse-link {
  display: block; margin: 0 0 8px;
  color: #e8c888; font-size: 12.5px; letter-spacing: .04em; text-decoration: none;
}
.gate-verse-link:hover, .gate-verse-link:focus-visible { color: #fff0c8; text-decoration: underline; }
.gate-hint { margin: 0 0 7px; font-size: 12px; letter-spacing: .1em; color: #c9bfa9; }
.gate-direct {
  display: inline-block; padding: 4px 0 2px; color: #e8c888; font-size: 13px;
  letter-spacing: .14em; text-decoration: none; border-bottom: 1px solid rgba(232, 200, 136, .5);
}
.gate-direct:hover, .gate-direct:focus-visible { color: #fff0c8; border-bottom-color: #fff0c8; }
.gate-skip {
  position: absolute; z-index: 12; left: -9999px; top: 8px; padding: 8px 14px;
  background: #f3ecdb; color: #403a30; font-size: 13px; text-decoration: none;
}
.gate-skip:focus { left: 8px; }

/* ── 开门白光 ────────────────────────────────────────────── */
.gate-veil {
  position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 252, 242, .98), rgba(248, 242, 226, .92) 55%, rgba(232, 224, 204, .86));
}
.gate-noscript {
  position: absolute; z-index: 11; left: 50%; bottom: 96px; transform: translateX(-50%);
  margin: 0; padding: 8px 14px; background: rgba(245, 238, 222, .94); color: #4b4335; font-size: 13px;
}

/* ── 窄屏：保持画面比例（热点仍准确），上下由模糊底填充 ──── */
@media (max-width: 720px) {
  /* 上下留白改用天空→地面渐变，避免模糊底图压成两条深色块 */
  .gate-bg {
    inset: 0; filter: none; transform: none;
    background: linear-gradient(180deg, #c3cdd3 0%, #dcdccf 30%, #e2ddd0 50%, #cfc8b7 72%, #9c9483 100%);
  }
  .gate-art { width: 118vw; height: calc(118vw / var(--ar)); top: 44%; box-shadow: 0 0 28px rgba(38, 32, 24, .22); }
  .art-tree { display: none; }
  .gate-mark { top: 14px; right: 14px; font-size: 12px; }
  .gate-seal { width: 22px; height: 22px; font-size: 13px; }
  .gate-tip { display: none; }
  .gate-caption { right: 14px; bottom: 14px; padding: 9px 12px 8px 13px; }
  .gate-verse { font-size: 13px; }
  .gate-verse-link { font-size: 11.5px; margin-bottom: 6px; }
  .gate-hint { font-size: 11px; }
  .gate-loader-title { font-size: 24px; }
  .hotspot { min-width: 38px; min-height: 32px; }
  .hotspot--ring-l { left: 44%; width: 6%; }
  .hotspot--ring-r { left: 50%; width: 6%; }
}

/* ── 减少动效：关掉一切装饰动画，只留可达性 ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .art-tree, .art-haze { animation: none !important; }
  .gate-loader, .hotspot, .gate-loader-bar i { transition: none; }
  .gate-veil { display: none; }
}