/* 木马奇境 · 前厅。外面是盐海里的黑石，里面是四扇门。三张图同一画幅（1672×941），
   用同一个"铺满视口"的框承载，热区按百分比落在图上的真实位置。 */
:root { --ink:#11140f; --paper:#f3eee3; --mist:#c5c1b8; --serif: Georgia, "Times New Roman", "Songti SC", serif; --sans: "Helvetica Neue", Arial, "PingFang SC", sans-serif; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; overflow:hidden; color:var(--paper); background:#cfd0cd; font-family:var(--sans); }
button { font:inherit; color:inherit; }

/* 固定定位自成层叠上下文，混合模式放在整组上，白底才能融进背景。 */
.brand { position:fixed; z-index:5; top:1.2rem; left:clamp(1.25rem,3vw,3rem); display:block; line-height:0; }
.brand img { height:3.6rem; width:auto; transition:filter .6s ease; }
body[data-state="hall"] .brand img { filter:invert(1) brightness(.92); }

.skip, .again { position:fixed; z-index:5; padding:.5rem 0; border:0; border-bottom:1px solid currentColor; background:none; cursor:pointer; font-size:.72rem; letter-spacing:.08em; opacity:.72; transition:opacity .2s ease; }
.skip:hover, .skip:focus-visible, .again:hover, .again:focus-visible { opacity:1; outline:0; }
.skip { top:1.9rem; right:clamp(1.25rem,3vw,3rem); color:var(--ink); }
body[data-state="hall"] .skip { display:none; }
.again { bottom:1.6rem; left:clamp(1.25rem,3vw,3rem); color:var(--paper); }

.scene { position:fixed; inset:0; overflow:hidden; }
.scene[hidden] { display:none; }
.frame { position:absolute; left:50%; top:50%; width:max(100vw, calc(100vh * 1672 / 941)); height:max(100vh, calc(100vw * 941 / 1672)); transform:translate(-50%,-50%); }
.frame > img { position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }

/* 走近：远景以黑石为中心放大，同时淡入同机位的近景。由 JS 写入 --walk（0→1）。 */
.outside { --walk:0; cursor:grab; touch-action:none; }
.outside.is-holding { cursor:grabbing; }
.stone-far { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:49.7% 48%; transform:scale(calc(1 + var(--walk) * 1.25)); opacity:calc(1 - clamp(0, (var(--walk) - .5) * 2.4, 1)); will-change:transform, opacity; }
.stone-near { transform-origin:52% 45%; transform:scale(calc(1.1 - clamp(0, (var(--walk) - .5) * 2, 1) * .1)); opacity:clamp(0, (var(--walk) - .5) * 2.4, 1); will-change:transform, opacity; }

.title { position:absolute; left:50%; top:16%; transform:translateX(-50%); color:var(--ink); text-align:center; opacity:calc(1 - var(--walk) * 3); pointer-events:none; }
h1 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.6rem); letter-spacing:.32em; text-indent:.32em; }
.title-en { display:block; margin-top:.8rem; font-family:var(--sans); font-size:.62rem; letter-spacing:.32em; opacity:.6; }

.hint { position:absolute; left:50%; bottom:7%; width:max-content; max-width:92vw; margin:0; transform:translateX(-50%); color:var(--ink); text-align:center; font-family:var(--serif); font-size:1rem; letter-spacing:.2em; pointer-events:none; text-shadow:0 0 14px rgba(255,255,255,.9), 0 0 4px rgba(255,255,255,.7); transition:color .6s ease; }
.hint span { display:block; }
.hint-en { margin-top:.35rem; font-family:var(--sans); font-size:.64rem; letter-spacing:.18em; opacity:.85; }
.outside[data-arrived] .hint { color:var(--paper); text-shadow:0 1px 8px rgba(0,0,0,.5); }
.hint::after { content:""; display:block; width:1px; height:2.2rem; margin:.9rem auto 0; background:currentColor; opacity:.5; transform-origin:top; animation:hint-breathe 2.4s ease-in-out infinite; }
.outside[data-arrived] .hint::after { display:none; }

/* 光缝：到了跟前才亮、才可点。光缝本身就是门，不加任何图标。 */
.slit-glow { position:absolute; left:30%; top:12%; width:32%; height:66%; opacity:0; pointer-events:none; mix-blend-mode:screen;
  /* 光带沿石缝从左上斜向右下（约 142°），门口在框内 72%/80% 处。 */
  background:radial-gradient(ellipse 26% 24% at 72% 82%, rgba(255,226,170,1), rgba(255,226,170,.35) 45%, transparent 72%), linear-gradient(52deg, transparent 41%, rgba(255,236,200,.45) 48%, rgba(255,236,200,.45) 54%, transparent 60%);
  filter:blur(6px); transition:opacity .8s ease; }
.outside[data-arrived] .slit-glow { animation:slit-breathe 2.6s ease-in-out infinite; }
.outside[data-arrived] .slit-glow.is-hot { animation:none; opacity:1; }
.slit { position:absolute; left:30%; top:12%; width:32%; height:66%; padding:0; border:0; background:transparent; cursor:pointer; clip-path:polygon(4% 0, 24% 0, 98% 100%, 55% 100%); }
.slit:disabled { pointer-events:none; }
.slit:focus-visible { outline:0; }
.slit:focus-visible ~ .slit-glow, .slit:focus-visible + .slit-glow { opacity:1; }

/* 大厅：鼠标停在哪扇门，哪扇门就亮。门三门四暂时压暗。 */
.hall { background:#0b0c0a; }
/* 大厅要四扇门都看得见：整图完整显示（不裁边），多出的边是黑色，与岩洞融为一体。 */
.hall .frame { width:min(100vw, calc(100vh * 1672 / 941)); height:min(100vh, calc(100vw * 941 / 1672)); }
.door { position:absolute; display:block; color:var(--paper); text-decoration:none; cursor:pointer; outline:0; }
.door-1 { left:9.5%; top:0; width:10%; height:80%; --ly:111%; }
.door-2 { left:29.4%; top:31%; width:16.6%; height:48.6%; border-radius:46% 46% 0 0 / 18% 18% 0 0; --ly:119%; }
.door-3 { left:50.6%; top:45%; width:18.4%; height:33.6%; border-radius:50%; --ly:131%; }
.door-4 { left:75.4%; top:5%; width:19.4%; height:77.4%; border-radius:48% 48% 0 0 / 22% 22% 0 0; --ly:108.5%; }
.door-light { position:absolute; inset:-8%; border-radius:inherit; opacity:0; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(closest-side, rgba(255,232,190,.55), rgba(255,232,190,.12) 60%, transparent); transition:opacity .45s ease; }
.door-shade { position:absolute; inset:-4%; border-radius:inherit; background:radial-gradient(closest-side, rgba(8,9,7,.72), rgba(8,9,7,.5) 70%, transparent); pointer-events:none; }
.door-label { position:absolute; left:50%; top:var(--ly); min-width:9rem; transform:translateX(-50%); text-align:center; font-family:var(--serif); font-size:clamp(.9rem,1.1vw,1.15rem); letter-spacing:.12em; white-space:nowrap; opacity:.62; transition:opacity .35s ease, transform .35s ease; text-shadow:0 1px 10px rgba(0,0,0,.8); }
.door-label b { margin-right:.5rem; font-family:var(--sans); font-weight:300; font-size:.72em; letter-spacing:0; opacity:.55; }
.door-label i { display:block; margin-top:.75rem; font-family:var(--sans); font-style:normal; font-size:.56rem; letter-spacing:.2em; opacity:.7; }
.door:hover .door-light, .door:focus-visible .door-light { opacity:1; }
.door:hover .door-label, .door:focus-visible .door-label { opacity:1; transform:translateX(-50%) translateY(-.2rem); }
.door.is-closed { cursor:default; }
.door.is-closed .door-light { background:radial-gradient(closest-side, rgba(200,200,190,.18), transparent); }

.flash { position:fixed; inset:0; z-index:10; background:#fffaf0; opacity:0; pointer-events:none; transition:opacity .6s ease; }
.flash.is-on { opacity:1; transition:opacity .55s cubic-bezier(.5,0,.75,0); }

@keyframes slit-breathe { 0%,100% { opacity:.35; } 50% { opacity:.9; } }
@keyframes hint-breathe { 0%,100% { transform:scaleY(.4); } 50% { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) { .outside[data-arrived] .slit-glow { animation:none; opacity:.8; } .hint::after { animation:none; } .flash, .flash.is-on { transition:none; } }
/* 大厅图四边淡入黑暗，不留硬边。 */
.hall-image { -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-composite:intersect; }

/* 竖屏（手机）：大厅按屏幕高度铺满，左右滑看四扇门；滑到正中的那扇门自动亮起（触屏没有悬停）。 */
.swipe-hint { display:none; }
@media (max-aspect-ratio: 4/5) {
  .hall { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hall::-webkit-scrollbar { display:none; }
  .hall .frame { position:relative; left:auto; top:auto; transform:none; height:100svh; width:calc(100svh * 1672 / 941); }
  .door { scroll-snap-align:center; }
  .door.is-lit .door-light { opacity:1; }
  .door.is-lit .door-label { opacity:1; }
  .door-label { font-size:1.05rem; }
  .door-label i { font-size:.58rem; }
  .swipe-hint { display:block; position:fixed; z-index:5; left:50%; top:5.4rem; margin:0; transform:translateX(-50%); color:var(--paper); font-size:.68rem; letter-spacing:.16em; white-space:nowrap; opacity:.6; pointer-events:none; }
  .again { top:1.9rem; right:1.25rem; bottom:auto; left:auto; font-size:.66rem; }
  .brand img { height:3rem; }
  .skip { top:1.6rem; font-size:.66rem; }
}

.hall-copyright { position:fixed; z-index:5; right:clamp(1.25rem,3vw,3rem); bottom:1.9rem; margin:0; color:var(--paper); font-size:.62rem; letter-spacing:.1em; opacity:.38; }
@media (max-aspect-ratio: 4/5) { .hall-copyright { right:auto; left:1.25rem; bottom:1.2rem; } }

/* 竖屏首页：用竖版远景铺满屏幕，石头小而远；走近时放大到与近景衔接。 */
@media (max-aspect-ratio: 4/5) {
  .outside .stone-far { transform-origin:51% 52.5%; transform:scale(calc(1 + var(--walk) * 5.5)); }
}