/* V9: a single real-time scene from the first aerial frame to the walking view. */
body.at-entrance, body.in-scene { overflow: hidden; background: #eef0e5; }
body .experience { position: fixed; inset: 0; width: 100%; height: 100svh; margin: 0; z-index: 0; }
body .experience .scene-shell { height: 100%; }
.header { position: fixed; inset: 0 0 auto; z-index: 35; }
body.at-entrance:has(#landing:not([hidden])) .header { background: transparent; border-color: transparent; }
body.at-entrance .header-nav, body.at-entrance .header-right { display: none; }
body.at-entrance .brand { color: #35452f; }
body.at-entrance .skip { display: none; }
.opening-topline { display: flex; align-items: center; gap: 26px; color: #4b5944; font-size: 10px; letter-spacing: 2px; }
.opening-topline button { min-height: 40px; min-width: 100px; padding: 0 15px; color: #42533b; background: #fafbefb8; border: 1px solid #ffffff90; border-radius: 30px; font-size: 10px; letter-spacing: .6px; box-shadow: 0 3px 15px #23391c08; transition: background .2s,transform .2s; }
.opening-topline button:hover { background: #fffff3; transform: translateY(-1px); }
.opening-topline button:disabled { opacity: .55; }
body.in-scene .opening-topline { display: none; }
.landing.opening { position: fixed; inset: 0; z-index: 25; height: 100svh; min-height: 0; width: 100%; padding: 0; overflow: clip; background: transparent; color: #34452e; isolation: isolate; pointer-events: none; }
.opening-scrim { position: absolute; inset: 0; z-index: -1; background: #eef0e5; transition: background 1.1s, opacity 1s; }
.scene-visible .opening-scrim { background: linear-gradient(90deg,#f5f5e9f5 0%,#f5f5e9e0 15%,#f5f5e978 35%,#f5f5e908 60%),linear-gradient(180deg,#f5f5e9d9 0%,transparent 21%,transparent 68%,#f2f3e1d1 100%); }
.opening-title { position: absolute; top: 26%; left: clamp(28px,6vw,108px); max-width: 500px; text-align: left; }
.opening-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; font-size: 9px; letter-spacing: 2.7px; color: #687658; }
.opening-kicker>span { width: 30px; height: 1px; background: #819267; }
.opening h1 { margin: 0; color: #34452e; font-family: 'Songti SC','Noto Serif SC',SimSun,serif; font-weight: 400; font-size: clamp(48px,5.4vw,84px); letter-spacing: .12em; line-height: 1.25; text-shadow: 0 2px 32px #fffbe7a0; }
.opening h1>span { display: block; }
.opening h1>span+span { margin-top: 3px; }
.opening-period { letter-spacing: 0; margin-left: -.05em; }
.opening-subtitle { font-size: 12px; letter-spacing: 1.5px; line-height: 2.2; color: #5b6d50; margin: 23px 0 0; }
.opening-entry { position: absolute; left: clamp(28px,6vw,108px); bottom: 12%; width: 288px; max-width: calc(100% - 40px); pointer-events: auto; }
.opening-load { display: flex; align-items: center; gap: 7px; min-height: 25px; color: #596b4d; font-size: 10px; }
.opening-load p { margin: 0; }
.opening-load-dot { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: #708f53; }
#opening-count { margin-left: auto; font-size: 9px; font-variant-numeric: tabular-nums; opacity: .75; }
.opening-track { height: 1px; margin: 0 0 15px; background: #94a47a30; overflow: hidden; }
.opening-track i { display: block; height: 100%; width: 30%; background: #7e9166; animation: load-glide 2s ease-in-out infinite; }
.opening[data-state=ready] .opening-track i, .opening[data-state=degraded] .opening-track i { width: 100%; animation: none; }
.opening-enter { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 25px; width: 100%; min-height: 76px; padding: 15px 16px 15px 24px; border: 1px solid #546746; border-radius: 16px; background: linear-gradient(135deg,#617449,#3f5636); color: #fffef4; text-align: left; box-shadow: inset 0 1px 0 #d3dfb33b,0 12px 26px #35492226,0 2px 5px #25381418; transition: transform .25s,box-shadow .25s,border-color .25s; }
.opening-enter::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg,transparent 20%,#ffffff22 48%,transparent 75%); transform: translateX(-130%); }
.opening[data-state=ready] .opening-enter::before { animation: entry-sheen 1.8s .2s both; }
.opening-button-copy { display: flex; flex-direction: column; gap: 7px; }
.opening-button-copy small { font-size: 7px; font-weight: 400; letter-spacing: 2px; opacity: .62; }
#opening-button-text { font-size: 15px; letter-spacing: 1.5px; }
.opening-enter-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #e9f0d71a; border: 1px solid #d1dfb633; transition: transform .3s,background .3s; }
.opening-enter-icon svg { width: 20px; height: 20px; transition: transform .3s; }
.opening-enter:not(:disabled):hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #d3dfb354,0 17px 32px #35492236; }
.opening-enter:not(:disabled):hover .opening-enter-icon { background: #e9f0d72c; }
.opening-enter:not(:disabled):hover svg { transform: translate(2px,-2px); }
.opening-enter:not(:disabled):active { transform: translateY(0) scale(.985); }
.opening-enter:disabled { cursor: progress; opacity: 1; background: #f5f6eacc; color: #6b7a5d; border-color: #aabb8f66; box-shadow: inset 0 1px 0 #fff; }
.opening-enter:disabled .opening-enter-icon { border-color: #8b9e6e42; }
#opening-entry-note { font-size: 9px; color: #657655; letter-spacing: .5px; margin: 12px 0 0; line-height: 1.7; }
.opening-scene-note { position: absolute; right: 4vw; bottom: 15%; display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: #fcfdf0d9; border: 1px solid #ffffefb3; border-radius: 40px; box-shadow: 0 6px 30px #24391f12; font-size: 10px; color: #4b6140; letter-spacing: 1px; }
.opening-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #829c67; box-shadow: 0 0 0 4px #8da17616; }
.opening-scene-number { padding-left: 15px; margin-left: 8px; border-left: 1px solid #758a5733; color: #8b987b; font-size: 8px; letter-spacing: 1.4px; }
.opening-foot { position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); left: clamp(28px,6vw,108px); right: 4vw; display: flex; justify-content: space-between; gap: 16px; color: #69785d; font-size: 8px; letter-spacing: .4px; }
.opening-foot>span:last-child { font-size: 7px; letter-spacing: 2px; }
.opening-descent { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; padding: 14px 22px; border: 1px solid #fffff399; border-radius: 32px; background: #fffff0dc; color: #4c6340; font-size: 11px; letter-spacing: 1px; opacity: 0; transition: opacity .4s; white-space: nowrap; }
.opening-descent span { width: 20px; height: 1px; background: #899a6b; }
.opening-title, .opening-entry, .opening-scene-note, .opening-foot { transition: opacity .55s,transform .7s cubic-bezier(.22,.7,.3,1); }
body.entering-expo .opening-title, body.entering-expo .opening-entry, body.entering-expo .opening-scene-note, body.entering-expo .opening-foot { opacity: 0; transform: translateY(-14px); pointer-events: none; }
body.entering-expo .opening-scrim { opacity: 0; }
body.entering-expo .opening-descent { opacity: 1; }
body.entering-expo .header { opacity: 0; pointer-events: none; transition: opacity .4s; }
.opening.animate-intro .opening-kicker { animation: text-arrive .85s .1s both; }
.opening.animate-intro h1>span { animation: text-arrive 1.1s .25s both; }
.opening.animate-intro h1>span+span { animation-delay: .4s; }
.opening.animate-intro .opening-subtitle { animation: text-arrive 1s .65s both; }
.opening.animate-intro .opening-entry { animation: text-arrive .9s .8s both; }
body.at-entrance .scene-shell > :not(#scene) { visibility: hidden; pointer-events: none; }
body .scene-topbar { top: calc(var(--header-height) + 20px); }
body.in-scene .header, body.in-scene .scene-topbar, body.in-scene .scene-bottom { animation: controls-arrive .5s ease-out both; }
.opening-noscript { position: absolute; left: 6vw; bottom: 5%; color: #34452e; background: #f5f5e9; font-size: 13px; }
@keyframes text-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes controls-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes load-glide { from { transform: translateX(-105%); } to { transform: translateX(440%); } }
@keyframes entry-sheen { to { transform: translateX(130%); } }
@media(min-width:701px) and (min-height:800px) { .opening-title { top: 25%; } .opening-entry { bottom: 14%; } }
@media(max-width:700px) {
 .opening-topline>span { display: none; }
 .opening-topline button { min-height: 38px; min-width: 88px; font-size: 9px; padding: 0 11px; }
 .opening-title { top: 17%; left: 25px; right: 20px; }
 .opening-kicker { font-size: 7px; letter-spacing: 1.7px; margin-bottom: 17px; gap: 8px; }
 .opening-kicker>span { width: 20px; }
 .opening h1 { font-size: clamp(40px,10.2vw,60px); letter-spacing: .09em; line-height: 1.23; }
 .opening-subtitle { font-size: 10px; letter-spacing: 1px; margin-top: 17px; line-height: 2; }
 .scene-visible .opening-scrim { background: linear-gradient(180deg,#f5f5e9e6 0%,#f5f5e9b0 17%,#f5f5e947 36%,transparent 50%,#f4f5e369 66%,#f4f5e3f2 93%),linear-gradient(90deg,#f5f5e957,transparent 85%); }
 .opening-entry { left: 25px; right: 25px; bottom: 10%; width: auto; max-width: none; }
 .opening-enter { min-height: 72px; padding-left: 22px; border-radius: 16px; }
 #opening-entry-note { font-size: 8px; }
 .opening-scene-note { bottom: 31%; right: 23px; font-size: 8px; padding: 10px 12px; }
 .opening-scene-number { display: none; }
 .opening-foot { left: 25px; right: 20px; bottom: max(23px,env(safe-area-inset-bottom)); font-size: 7px; }
 .opening-foot>span:last-child { display: none; }
 .opening-descent { font-size: 10px; bottom: 8%; }
 body .scene-topbar { top: calc(var(--header-height) + 12px); }
}
@media(max-height:650px) {
 .opening-title { top: 20%; }
 .opening h1 { font-size: clamp(32px,8vh,52px); }
 .opening-kicker { margin-bottom: 13px; }
 .opening-subtitle { margin-top: 13px; }
 .opening-entry { bottom: 10%; }
 .opening-enter { min-height: 64px; }
 .opening-foot { bottom: 16px; }
}
@media(max-height:540px) and (min-width:560px) {
 .opening-title { top: 28%; left: 5vw; }
 .opening h1 { font-size: 36px; }
 .opening-kicker { font-size: 7px; letter-spacing: 1.5px; }
 .opening-subtitle { display: none; }
 .opening-entry { left: auto; right: 5vw; bottom: 19%; width: 250px; }
 .opening-scene-note { display: none; }
 .opening-foot { left: 5vw; }
}
@media(max-height:540px) and (max-width:559px) {
 .opening-title { top: 22%; } .opening h1 { font-size: 30px; }
 .opening-subtitle, .opening-scene-note, .opening-foot>span:last-child { display: none; }
 .opening-entry { bottom: 12%; }
}
@media(prefers-reduced-motion:reduce) { .opening *, .opening *::before, body.in-scene .header, body.in-scene .scene-topbar, body.in-scene .scene-bottom { animation: none !important; transition: none !important; } }

/* Overlays keep their original spacing below the header over a full-height canvas. */
body .tour-bar { top: calc(var(--header-height) + 83px); }
@media(min-width:701px) { body .detail-panel { top: calc(var(--header-height) + 90px); } }
@media(max-width:700px) { body .tour-bar { top: calc(var(--header-height) + 65px); } }
@media(max-height:600px) and (min-width:701px) {
 body .detail-panel { top: calc(var(--header-height) + 84px); bottom: 78px; }
 body .tour-bar { top: calc(var(--header-height) + 84px); }
}
/* Projected pins explicitly set their own visibility, so hide their parents. */
body.at-entrance .scene-shell > :not(#scene) { display: none !important; }