/* Museum motion: Baoji's framed opening and Shaanxi's staged entrance. */
.museum-opening{position:fixed;inset:0;z-index:90;isolation:isolate;overflow:hidden;color:var(--paper);background:transparent}
.opening-shutter{position:absolute;inset:0;background:#111d17;z-index:-3;transition:transform .55s cubic-bezier(.65,0,.25,1)}
.opening-shutter--left{right:50%}.opening-shutter--right{left:50%}
.opening-art{position:absolute;inset:-4%;z-index:-2;background:radial-gradient(circle at 50% 47%,rgba(190,153,73,.18),transparent 24%),linear-gradient(116deg,transparent 0 32%,rgba(190,153,73,.08) 32.1% 32.3%,transparent 32.4% 67%,rgba(190,153,73,.07) 67.1% 67.3%,transparent 67.4%),repeating-linear-gradient(90deg,transparent 0 12.45%,rgba(208,178,108,.035) 12.5% 12.58%),linear-gradient(135deg,#0c1812,#17271d 51%,#0d1913);opacity:0;animation:opening-tableau 1.25s .04s ease-out forwards}
.opening-axis{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(transparent,rgba(213,184,118,.42),transparent);transform:scaleY(0);animation:axis-draw .7s .1s ease-out forwards;z-index:-1}
.opening-frame{position:absolute;inset:27px 35px;border:1px solid rgba(206,179,116,.35);transform:scale(.96);opacity:0;animation:frame-appear .65s .1s ease-out forwards;pointer-events:none}
.opening-frame::before,.opening-frame::after{content:"";position:absolute;width:24px;height:24px;border-color:var(--gold);border-style:solid}
.opening-frame::before{left:-1px;top:-1px;border-width:2px 0 0 2px}.opening-frame::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.opening-topline,.opening-bottomline{position:absolute;left:60px;right:60px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:9px/1.8 var(--mono);letter-spacing:.12em;color:#b7b391}
.opening-topline{top:48px}.opening-bottomline{bottom:43px}
.opening-center{position:absolute;inset:70px 90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.opening-emblem{position:relative;width:92px;height:92px;margin-bottom:18px;opacity:0;animation:emblem-appear .55s .08s ease-out forwards}
.opening-emblem img{width:100%;height:100%}
.opening-emblem>span{position:absolute;inset:-11px;border:1px solid rgba(213,184,118,.2);transform:rotate(45deg);animation:emblem-frame 1.2s ease-out both}
.opening-kicker{font:9px/1.8 var(--mono);letter-spacing:.3em;color:#a8aa8a;animation:opening-type .5s .18s both}
.opening-center h2{display:flex;gap:.13em;margin:13px 0 11px;font-weight:400;font-size:clamp(64px,8.1vw,120px);line-height:1.25;letter-spacing:.08em;color:#e0cd9a}
.opening-center h2>span{display:block;animation:title-unveil .7s .24s cubic-bezier(.2,.65,.2,1) both}
.opening-center h2>span+span{animation-delay:.38s}
.opening-subtitle{font-size:14px;letter-spacing:.38em;color:#d0c6a5;animation:opening-type .5s .48s both}.opening-subtitle i{color:var(--gold);padding:0 .2em}
.opening-rule{width:clamp(160px,28vw,390px);height:1px;background:linear-gradient(90deg,transparent,#bc9e63,transparent);margin:24px 0 16px;transform:scaleX(0);animation:rule-draw .5s .58s forwards}
.opening-meta{display:flex;gap:28px;font:10px var(--sans);letter-spacing:.2em;color:#a8ae91;animation:opening-type .45s .66s both}
.opening-side{position:absolute;top:50%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.65em;color:#a59b73;transform:translateY(-50%)}.opening-side--left{left:63px}.opening-side--right{right:63px}
.opening-skip{border:0;border-bottom:1px solid rgba(197,167,104,.45);background:none;color:#d6c395;padding:10px 0;font:10px var(--sans);letter-spacing:.1em;min-height:40px}.opening-skip>span{margin-left:17px}
.opening-center,.opening-frame,.opening-topline,.opening-bottomline,.opening-side,.opening-axis,.opening-art{transition:opacity .28s,filter .4s}
.museum-opening.is-leaving{pointer-events:none}.is-leaving .opening-shutter--left{transform:translateX(-101%)}.is-leaving .opening-shutter--right{transform:translateX(101%)}
.museum-opening.is-leaving :is(.opening-center,.opening-frame,.opening-topline,.opening-bottomline,.opening-side,.opening-axis,.opening-art){opacity:0!important;filter:blur(3px)}
@keyframes opening-tableau{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
@keyframes axis-draw{to{transform:scaleY(1)}}@keyframes rule-draw{to{transform:scaleX(1)}}
@keyframes frame-appear{to{opacity:1;transform:scale(1)}}@keyframes emblem-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes emblem-frame{from{opacity:0;transform:rotate(32deg) scale(.9)}to{opacity:1;transform:rotate(45deg) scale(1)}}
@keyframes opening-type{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes title-unveil{from{opacity:0;transform:translateY(18px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}

/* The page enters after the opening; it remains readable without JavaScript. */
.hero-copy,.hero-art{animation:none}
.motion-ready.is-opening .hero-copy>*{opacity:0}
.motion-ready.is-entered:not(.motion-off) .hero-copy>*{animation:page-enter .7s cubic-bezier(.2,.7,.2,1) both}
.motion-ready.is-entered .hero-copy>:nth-child(2){animation-delay:.08s}
.motion-ready.is-entered .hero-copy>:nth-child(3){animation-delay:.16s}
.motion-ready.is-entered .hero-copy>:nth-child(4){animation-delay:.24s}
.motion-ready.is-entered .hero-copy>:nth-child(5){animation-delay:.32s}
@keyframes page-enter{from{opacity:0;transform:translateY(23px)}to{opacity:1;transform:translateY(0)}}
.hero-art{transform:translate3d(var(--hero-x,0px),calc(var(--hero-y,0px) + var(--hero-scroll,0px)),0) scale(1.08);transition:transform .35s ease-out;will-change:transform}
.hero-light{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 380px 300px at var(--light-x,65%) var(--light-y,40%),rgba(220,186,98,.12),transparent 75%);mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.hero:hover .hero-light{opacity:1}
.hero-dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.hero-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#dbc486;box-shadow:0 0 9px rgba(219,196,134,.65);opacity:0;animation:gold-dust var(--duration) var(--delay) ease-in-out infinite;animation-play-state:paused}
.hero.in-view .hero-dust i{animation-play-state:running}
@keyframes gold-dust{0%,100%{opacity:0;transform:translate3d(0,16px,0)}30%,65%{opacity:.48}90%{opacity:0;transform:translate3d(18px,-58px,0)}}
.site-header{transition:background .25s,box-shadow .25s,border-color .25s}
.site-header.is-scrolled{background:rgba(20,32,25,.97);border-color:rgba(197,167,104,.3);box-shadow:0 6px 24px rgba(12,21,16,.12)}
.brand-mark{transition:transform .4s,filter .4s}.brand:hover .brand-mark{transform:translateY(-1px);filter:drop-shadow(0 0 7px rgba(197,167,104,.35))}
.motion-ready:not(.motion-off) .reveal{opacity:0;transform:translateY(25px);transition:opacity .7s var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.motion-ready:not(.motion-off) .reveal.is-visible{opacity:1;transform:translateY(0)}

/* The expanded overview stays a photograph and a continuous introduction. */
.museum-overview{grid-template-columns:1.02fr 1.15fr;gap:clamp(36px,4.5vw,70px);align-items:start}
.museum-photo{position:sticky;top:115px}
.museum-photo img{border:1px solid rgba(78,82,57,.12)}
.museum-intro h2{margin-top:12px;margin-bottom:25px}
.museum-statistics{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:18px;padding:20px 0 24px;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);margin-bottom:30px}
.museum-statistics dt{font:10px var(--sans);color:#72765f;margin-bottom:10px;letter-spacing:.12em}
.museum-statistics dd{font:30px/1.2 var(--serif);color:#76683f;white-space:nowrap}
.museum-statistics dd>span{font:9px var(--sans);margin-left:5px;letter-spacing:0}
.museum-prose{display:grid;gap:23px}
.museum-prose h3{font:16px/1.7 var(--serif);letter-spacing:.16em;margin-bottom:7px;color:#72744d}
.museum-prose p{font-size:14px;line-height:2.08;color:#4c5849;text-align:justify}
.intro-source{font:10px var(--sans);margin-left:4px;color:#8d7a49;vertical-align:super}

/* Artifact light, current-slide entrance, and quiet row interactions. */
.art-tilt{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease-out,box-shadow .3s}
.art-tilt:hover{box-shadow:0 14px 35px rgba(6,15,10,.15)}
.motion-ready:not(.motion-off) .reveal.art-tilt.is-visible{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.object-art::before,.ru-art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle 230px at var(--art-x,50%) var(--art-y,50%),rgba(241,218,156,.16),transparent 75%);border:1px solid rgba(205,182,121,0);opacity:0;transition:opacity .35s,border-color .35s}
.object-art:hover::before,.ru-art:hover::before{opacity:1;border-color:rgba(205,182,121,.42)}
.object-feature.is-current .art-number{border-color:#d6bb7e;box-shadow:0 0 16px rgba(197,167,104,.12)}
.motion-ready:not(.motion-off) .object-arriving .object-copy>*{animation:object-arrive .4s both}
.motion-ready .object-arriving .object-copy>:nth-child(2){animation-delay:.05s}
.motion-ready .object-arriving .object-copy>:nth-child(3){animation-delay:.09s}
.motion-ready .object-arriving .object-copy>:nth-child(4){animation-delay:.13s}
@keyframes object-arrive{from{opacity:.25;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.object-controls button,.text-link,.hero-enter{transition:background .2s,color .2s,box-shadow .2s}
.object-controls button:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(213,188,131,.3),0 0 18px rgba(197,167,104,.09)}
.object-controls button:active:not(:disabled){transform:scale(.96)}
.collection-list>a{position:relative;transition:background .25s,padding .25s}
.collection-list>a::before{content:"";position:absolute;inset:20px auto 20px 0;width:2px;background:#9e8652;transform:scaleY(0);transition:transform .3s}
.collection-list>a:hover{background:rgba(159,139,84,.045);padding-left:14px}
.collection-list>a:hover::before{transform:scaleY(1)}
.collection-number{transition:color .3s}.collection-list>a:hover .collection-number{color:#8b713e}
.music-ripples{position:absolute;left:3%;top:18%;width:52vw;max-width:770px;aspect-ratio:1;pointer-events:none;overflow:visible;opacity:.28}
.music-ripples>span{position:absolute;inset:15%;border:1px solid rgba(207,190,133,.6);border-radius:50%;transform:scale(.75);opacity:0;animation:music-ripple 7s ease-out infinite;animation-play-state:paused}
.music-ripples>span:nth-child(2){animation-delay:2.3s}.music-ripples>span:nth-child(3){animation-delay:4.6s}
.music-chapter.in-view .music-ripples>span{animation-play-state:running}
@keyframes music-ripple{0%{opacity:0;transform:scale(.72)}15%{opacity:.65}100%{opacity:0;transform:scale(1.45)}}
.site-footer{flex-wrap:wrap}
.motion-controls{display:flex;gap:20px}
.motion-controls button{border:0;border-bottom:1px solid rgba(197,167,104,.3);padding:7px 0;background:none;color:#b8ae8b;font:10px var(--sans)}
.motion-controls button:hover{color:var(--gold)}
.motion-controls button:disabled{opacity:.45;cursor:default}
.motion-off .hero-art{transform:none;will-change:auto}
.motion-off .hero-copy>*{opacity:1!important;animation:none!important;transform:none!important}
.motion-off .hero-dust,.motion-off .hero-light,.motion-off .music-ripples{display:none}
.motion-off .art-tilt{transform:none!important}
.motion-off .reveal{opacity:1!important;transform:none!important;transition:none!important}
.motion-off .object-art::before,.motion-off .ru-art::before{display:none}
.motion-off .object-art>img,.motion-off .ru-art>img{transform:none!important}
.motion-background .hero-dust i,.motion-background .music-ripples>span{animation-play-state:paused!important}
@media(max-width:1100px){.museum-statistics{gap:10px}.museum-statistics dd{font-size:26px}.museum-statistics dd>span{display:block;margin:6px 0 0}}
@media(max-width:820px){.museum-overview{grid-template-columns:1fr;gap:35px}.museum-photo{position:static}.museum-photo img{max-height:480px;object-fit:contain;background:#e3dfd1}.museum-statistics dd>span{display:inline;margin-left:5px}.brand-mark{width:38px;height:38px}.opening-center h2{font-size:76px}.opening-side{display:none}.opening-center{inset:70px 35px}.opening-frame{inset:20px}.opening-topline,.opening-bottomline{left:38px;right:38px;font-size:8px}.opening-topline{top:35px}.opening-bottomline{bottom:30px}.music-ripples{width:85vw;left:-15%;top:15%}}
@media(max-width:540px){.opening-topline{flex-direction:column;align-items:flex-start;gap:3px}.opening-center{inset:80px 24px}.opening-center h2{font-size:clamp(52px,15vw,74px);gap:.04em;letter-spacing:.04em}.opening-emblem{width:74px;height:74px;margin-bottom:22px}.opening-kicker{font-size:7px;letter-spacing:.19em}.opening-subtitle{font-size:11px;letter-spacing:.25em}.opening-meta{gap:18px;font-size:9px;letter-spacing:.1em}.opening-bottomline{font-size:8px}.opening-skip{font-size:9px}.museum-prose{gap:21px}.museum-prose p{font-size:14px;line-height:2.05}.museum-statistics{gap:8px}.museum-statistics dd{font-size:26px}.museum-statistics dd>span{display:block;font-size:9px;margin:5px 0 0}.museum-intro>.eyebrow{font-size:8px;letter-spacing:.08em}.motion-controls{gap:16px;order:4}.site-footer{gap:23px}.music-ripples{opacity:.17}}
@media(hover:none),(pointer:coarse){.hero-dust,.hero-light{display:none}.hero-art{transform:none;will-change:auto}.art-tilt{transform:none!important}}
@media(prefers-reduced-motion:reduce){.museum-opening,.hero-dust,.hero-light,.music-ripples{display:none!important}.hero-art,.art-tilt,.reveal{transform:none!important;opacity:1!important}.hero-copy>*{opacity:1!important}.object-art>img,.ru-art>img{transform:none!important}}
