:root{
  --ink:#3e2e28;
  --muted:#78645b;
  --vermilion:#9a3f31;
  --paper:#d9cfc0;
  --gold:#b99254;
  --ease:cubic-bezier(.22,.76,.25,1);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#d9cfc0;color:var(--ink)}
body{overflow:hidden;font-family:"Noto Serif SC","Songti SC","STSong","Times New Roman",serif}
button{font:inherit}
.loader{
  position:fixed;inset:0;overflow:hidden;isolation:isolate;
  background:#d8cec0;
  opacity:1;visibility:visible;
  transition:opacity 1.15s var(--ease),visibility 1.15s;
}
.loader.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.bg{
  position:absolute;inset:-3%;z-index:-5;
  background-image:linear-gradient(rgba(224,216,204,.72),rgba(224,216,204,.74)),url('assets/background.png');
  background-size:cover;background-position:center 48%;
  transform:scale(1.065);
  filter:saturate(.74) sepia(.12) contrast(.92) brightness(1.03);
  animation:bgBreath 12s ease-in-out infinite alternate;
}
@keyframes bgBreath{from{transform:scale(1.06) translate3d(-.4%,0,0)}to{transform:scale(1.095) translate3d(.45%,-.45%,0)}}
.paper-glow{
  position:absolute;inset:0;z-index:-4;
  background:
    radial-gradient(circle at 50% 42%,rgba(249,241,225,.62) 0 18%,rgba(241,231,214,.32) 34%,transparent 64%),
    linear-gradient(to bottom,rgba(245,236,220,.18),rgba(164,132,98,.05) 67%,rgba(119,80,48,.14));
}
.grain{
  position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");
}
.skip{
  position:absolute;right:3.1vw;top:3.1vh;z-index:30;border:0;background:transparent;color:#66564e;
  letter-spacing:.18em;font:500 clamp(10px,.75vw,13px)/1.2 Arial,sans-serif;cursor:pointer;padding:12px 0;
  opacity:.8;transition:opacity .25s,color .25s;
}
.skip::after{content:"";display:block;width:100%;height:1px;margin-top:7px;background:currentColor;transform:scaleX(.45);transform-origin:right;transition:transform .35s var(--ease)}
.skip:hover{opacity:1;color:#8c392f}.skip:hover::after{transform:scaleX(1)}
.intro-copy{
  position:absolute;left:50%;top:21.5%;transform:translateX(-50%);width:min(850px,72vw);text-align:center;z-index:4;
  animation:copyIn 1.35s .15s var(--ease) both;
}
@keyframes copyIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
.eyebrow{font:500 clamp(9px,.67vw,12px)/1.2 Arial,sans-serif;letter-spacing:.34em;color:#806a5e;margin-bottom:17px}
.intro-copy h1{margin:0;font-size:clamp(25px,2.6vw,46px);font-weight:500;letter-spacing:.08em;line-height:1.28;color:#3d2d27;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.intro-copy .en{width:min(670px,88%);margin:15px auto 0;font:italic 400 clamp(12px,1vw,18px)/1.5 Georgia,"Times New Roman",serif;color:#6f5b52;letter-spacing:.025em}
.hairline{width:38px;height:1px;background:#8f6e5f;margin:18px auto 14px;opacity:.6}
.intro-copy .cn{margin:0;font-size:clamp(11px,.9vw,15px);letter-spacing:.2em;color:#68534b}
.loading-center{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:6;text-align:center;
  opacity:1;transition:opacity .55s var(--ease),transform .75s var(--ease);
}
.loading-center.is-done{opacity:0;transform:translate(-50%,-58%);pointer-events:none}
.percent-wrap{display:flex;align-items:flex-start;justify-content:center;color:#4e3b34;font-family:Georgia,"Times New Roman",serif;font-weight:400}
.percent{font-size:clamp(42px,5.2vw,86px);line-height:.92;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.pct{font-size:clamp(16px,1.55vw,26px);line-height:1;margin:5px 0 0 6px;color:#6d574d}
.tiny-status{margin-top:13px;font:500 clamp(8px,.58vw,10px)/1 Arial,sans-serif;letter-spacing:.26em;color:#846e62}
.start-btn{
  position:absolute;left:50%;top:60%;z-index:7;transform:translate(-50%,-50%) scale(.92);
  width:min(26vw,440px);min-width:210px;
  border:0;background:transparent;cursor:pointer;padding:0;
  opacity:0;visibility:hidden;
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .35s;
}
.start-btn.is-ready{
  opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);
  animation:startPulse 2.8s 1s ease-in-out infinite;
}
@keyframes startPulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(154,63,49,0))}
  50%{filter:drop-shadow(0 10px 18px rgba(115,69,42,.22))}
}
.start-btn:hover{transform:translate(-50%,-50%) scale(1.045);filter:drop-shadow(0 14px 26px rgba(140,57,47,.25))}
.start-btn:active{transform:translate(-50%,-50%) scale(1.01)}
.start-btn-art{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 7px rgba(62,32,16,.12));}
.mandala-start-btn::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-8px;height:22px;
  background:radial-gradient(ellipse at center, rgba(122,65,42,.30), rgba(122,65,42,0) 72%);
  filter:blur(4px);z-index:-1;pointer-events:none;
}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
@media (max-width:900px){
  .start-btn{width:min(36vw,380px);min-width:200px;top:57%}
}
@media (max-width:600px){
  .start-btn{width:min(52vw,320px);min-width:180px;top:55%}
}
@media (max-height:650px) and (orientation:landscape){
  .start-btn{top:51%;width:min(24vw,340px);min-width:170px}
}

.scroll-stage{
  position:absolute;left:0;right:0;bottom:-1.2vh;height:min(31vh,295px);z-index:3;overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 100%);
}
.scroll-track{height:100%;display:flex;width:max-content;will-change:transform;animation:marquee 25s linear infinite;transform:translate3d(0,0,0)}
.scroll-track.is-loading{animation-duration:38s}.scroll-track.is-ready{animation-duration:21s}
.scroll-unit{height:100%;flex:none;display:flex;align-items:flex-end}
.scroll-unit img{display:block;height:100%;width:auto;max-width:none;object-fit:contain;filter:saturate(.78) sepia(.12) contrast(.98);opacity:.96}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
.fade-edge{position:absolute;top:0;bottom:0;width:11vw;z-index:3;pointer-events:none}
.fade-edge.left{left:0;background:linear-gradient(90deg,#ddd2c4 2%,rgba(221,210,196,.8) 36%,transparent)}
.fade-edge.right{right:0;background:linear-gradient(-90deg,#ddd2c4 2%,rgba(221,210,196,.8) 36%,transparent)}
.sand{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.45;background-repeat:repeat;background-size:310px 310px;mix-blend-mode:multiply}
.motes-a{background-image:radial-gradient(circle,rgba(104,74,53,.38) 0 1px,transparent 1.5px);animation:motes 24s linear infinite}
.motes-b{background-image:radial-gradient(circle,rgba(151,104,69,.25) 0 1px,transparent 1.2px);background-position:90px 40px;animation:motes2 31s linear infinite reverse}
@keyframes motes{to{transform:translate3d(-90px,55px,0)}}@keyframes motes2{to{transform:translate3d(60px,-45px,0)}}
.next-page{position:fixed;inset:0;display:grid;place-items:center;background:#221a17;color:#e8dac3;opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
.next-page.is-visible{opacity:1;pointer-events:auto}.next-inner{text-align:center}.next-mark{font-size:clamp(42px,6vw,100px);letter-spacing:.15em}.next-inner p{font:11px Arial,sans-serif;letter-spacing:.22em;opacity:.65}
@media (max-width:900px){
  .intro-copy{top:16%;width:86vw}.loading-center{top:49%}.start-btn{top:57%}.scroll-stage{height:27vh}.skip{right:20px;top:18px}
}
@media (max-width:600px){
  .intro-copy{top:13.5%;width:91vw}.eyebrow{margin-bottom:11px}.intro-copy h1{font-size:24px;line-height:1.35}.intro-copy .en{font-size:11px;line-height:1.45}.hairline{margin:12px auto 10px}.intro-copy .cn{font-size:10px;line-height:1.5}
  .loading-center{top:48%}.percent{font-size:54px}.scroll-stage{height:25vh;bottom:0}.scroll-unit img{height:100%}.fade-edge{width:14vw}.start-btn{top:55%}
}
@media (max-height:650px) and (orientation:landscape){
  .intro-copy{top:9%;width:74vw}.eyebrow{margin-bottom:7px}.intro-copy h1{font-size:24px}.intro-copy .en{margin-top:8px;font-size:11px}.hairline{margin:8px auto}.loading-center{top:44%}.start-btn{top:51%}.scroll-stage{height:32vh}.tiny-status{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.bg,.scroll-track,.sand,.start-btn.is-ready{animation:none!important}}


/* ===== SHOWCASE PAGE · THE SONG, PAINTED inspired full-screen stage ===== */


/* ===== SHOWCASE · reference-timed montage ===== */
.showcase-page{
  position:fixed;inset:0;z-index:30;overflow:hidden;background:#b9aa98;
  opacity:0;visibility:hidden;pointer-events:none;isolation:isolate;
  transition:opacity 1.05s var(--ease),visibility 1.05s;
}
.showcase-page.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.showcase-bg{
  position:absolute;inset:-4%;z-index:-8;
  background-image:linear-gradient(rgba(153,140,124,.22),rgba(162,146,128,.12)),url('assets/展示页背景.png');
  background-size:cover;background-position:center 48%;filter:saturate(.70) sepia(.12) contrast(.95) brightness(.82);
  transform:scale(1.07);animation:showcaseDrift 34s linear forwards;
}
@keyframes showcaseDrift{from{transform:scale(1.07) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-.7%,0)}}
.showcase-wash{position:absolute;inset:0;z-index:-7;background:radial-gradient(circle at 52% 44%,rgba(240,223,188,.36),transparent 33%),linear-gradient(180deg,rgba(227,215,194,.10),rgba(64,50,40,.18))}
.showcase-grain{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E")}
.showcase-vignette{position:absolute;inset:0;z-index:25;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(52,42,35,.20) 100%)}
.showcase-topbar{position:absolute;left:2.5vw;right:2.5vw;top:2.4vh;z-index:35;display:flex;justify-content:space-between;align-items:flex-start;color:#e6dbca;text-shadow:0 1px 7px rgba(0,0,0,.35);mix-blend-mode:screen}
.showcase-brand{display:flex;align-items:baseline;gap:12px}.brand-cn{font-size:18px;letter-spacing:.18em}.brand-en,.showcase-index{font:9px Arial,sans-serif;letter-spacing:.20em;opacity:.72}.showcase-index{margin-top:7px}
.showcase-skip{position:absolute;right:2.8vw;bottom:2.6vh;z-index:50;border:0;background:transparent;color:rgba(240,231,214,.76);font:9px Arial,sans-serif;letter-spacing:.22em;cursor:pointer;padding:10px}
.showcase-progress{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:50;background:rgba(255,255,255,.12)}.showcase-progress span{display:block;height:100%;width:0;background:rgba(245,224,182,.68)}

.montage-stage{position:absolute;inset:0;z-index:5;overflow:hidden}
.motif{position:absolute;z-index:13;opacity:0;will-change:transform,opacity,filter;pointer-events:none}
.motif img{display:block;width:100%;height:auto;animation:motifRotate 14s linear infinite;filter:saturate(.88) sepia(.08) drop-shadow(0 16px 16px rgba(49,34,24,.16))}
@keyframes motifRotate{to{transform:rotate(360deg)}}
.motif-main{width:min(26vw,420px);left:38%;top:11%}
.motif-small{width:min(15vw,240px);left:55%;top:12%;z-index:16}

.montage-scene{position:absolute;margin:0;opacity:0;will-change:transform,opacity,filter;pointer-events:none;filter:saturate(.78) sepia(.08) contrast(.96) drop-shadow(0 18px 18px rgba(38,27,21,.10))}
.montage-scene img{display:block;width:100%;height:100%;object-fit:contain}
.scene-a{left:24%;right:20%;top:17%;bottom:6%;z-index:10}
.scene-b{left:32%;right:8%;top:11%;bottom:4%;z-index:11}
.scene-c{left:17%;right:15%;top:13%;bottom:3%;z-index:12}
.scene-d{left:10%;right:7%;top:9%;bottom:3%;z-index:9}

.ink-cloud{position:absolute;border-radius:50%;filter:blur(1px);opacity:0;background:radial-gradient(circle at 50% 50%,rgba(47,53,52,.30) 0 12%,rgba(55,55,52,.12) 35%,transparent 70%);mix-blend-mode:multiply;z-index:2}
.ink-1{width:46vw;height:36vw;left:-14vw;top:3vh}.ink-2{width:42vw;height:31vw;right:-13vw;bottom:1vh}
.paper-sweep{position:absolute;inset:-15%;z-index:24;background:linear-gradient(105deg,transparent 35%,rgba(239,224,194,.78) 49%,rgba(239,224,194,.16) 57%,transparent 70%);transform:translateX(-72%) skewX(-7deg);opacity:0;pointer-events:none}

.bottom-ribbon{position:absolute;left:-2vw;right:-2vw;bottom:-2.3vh;height:12vh;z-index:20;display:flex;overflow:hidden;opacity:.92;filter:saturate(.82) sepia(.08);pointer-events:none}
.bottom-ribbon span{flex:1 0 16.7%;background:radial-gradient(ellipse at 50% 100%,#2c5d5a 0 12%,#557f73 13% 23%,#d9a760 24% 34%,#a8513f 35% 43%,#e2c98c 44% 48%,transparent 49%),linear-gradient(180deg,transparent 0 46%,rgba(78,57,43,.55) 47% 51%,transparent 52%);background-size:100% 100%;transform:scaleX(1.12)}

/* timeline classes — deliberately staged like the reference montage */
.showcase-page.phase-1 .motif-main{animation:motifEnter 3.0s var(--ease) both}
@keyframes motifEnter{0%{opacity:0;transform:translate3d(12vw,-10vh,0) scale(.58) rotate(-18deg);filter:blur(8px)}38%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0)}}
.showcase-page.phase-2 .motif-main{animation:motifTravel 3.2s var(--ease) both}
@keyframes motifTravel{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}70%{opacity:.95;transform:translate3d(16vw,18vh,0) scale(.72)}100%{opacity:0;transform:translate3d(22vw,27vh,0) scale(.48);filter:blur(4px)}}
.showcase-page.phase-2 .ink-1,.showcase-page.phase-2 .ink-2{animation:inkIn 2.6s ease both}@keyframes inkIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1.08)}}

.showcase-page.phase-3 .scene-a{animation:sceneCenterIn 3.6s var(--ease) both}@keyframes sceneCenterIn{0%{opacity:0;transform:translate3d(0,9vh,0) scale(.82);filter:blur(9px) saturate(.6)}30%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0) saturate(.78)}}
.showcase-page.phase-4 .scene-a{animation:sceneCenterOut 1.7s var(--ease) both}@keyframes sceneCenterOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:translate3d(-8vw,-3vh,0) scale(1.08);filter:blur(5px)}}
.showcase-page.phase-4 .scene-b{animation:sceneRightIn 3.4s var(--ease) both}.showcase-page.phase-4 .motif-small{animation:smallMotifIn 3s var(--ease) both}
@keyframes sceneRightIn{0%{opacity:0;transform:translate3d(14vw,3vh,0) scale(.84);filter:blur(9px)}33%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes smallMotifIn{from{opacity:0;transform:translate3d(8vw,-10vh,0) scale(.55)}to{opacity:.94;transform:translate3d(0,0,0) scale(1)}}
.showcase-page.phase-5 .scene-b{animation:sceneBOut 1.55s var(--ease) both}.showcase-page.phase-5 .motif-small{animation:smallMotifOut 1.6s var(--ease) both}.showcase-page.phase-5 .scene-c{animation:sceneWideIn 3.7s var(--ease) both}
@keyframes sceneBOut{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(10vw,-2vh,0) scale(1.07);filter:blur(5px)}}
@keyframes smallMotifOut{from{opacity:.94}to{opacity:0;transform:translate3d(4vw,-5vh,0) scale(.7)}}
@keyframes sceneWideIn{0%{opacity:0;transform:translate3d(-9vw,5vh,0) scale(.88);filter:blur(8px)}32%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
.showcase-page.phase-6 .scene-c{animation:sceneCOut 1.8s var(--ease) both}.showcase-page.phase-6 .scene-d{animation:sceneDIn 4.2s var(--ease) both}
@keyframes sceneCOut{from{opacity:1}to{opacity:0;transform:translate3d(-12vw,0,0) scale(1.05);filter:blur(6px)}}
@keyframes sceneDIn{0%{opacity:0;transform:translate3d(8vw,7vh,0) scale(.82);filter:blur(10px)}32%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1.03);filter:blur(0)}}
.showcase-page.phase-7 .scene-d{animation:sceneDOut 2.4s var(--ease) both}.showcase-page.phase-7 .paper-sweep{animation:sweepAcross 2.2s var(--ease) both}
@keyframes sceneDOut{0%{opacity:1;transform:scale(1.03)}100%{opacity:0;transform:translate3d(7vw,-5vh,0) scale(1.16);filter:blur(9px)}}
@keyframes sweepAcross{0%{opacity:0;transform:translateX(-72%) skewX(-7deg)}24%{opacity:1}100%{opacity:0;transform:translateX(70%) skewX(-7deg)}}

.showcase-final{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#2f2622;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity 1.3s var(--ease),transform 1.5s var(--ease),visibility 1.3s;background:rgba(215,201,180,.22);backdrop-filter:blur(1px)}
.showcase-final.is-visible{opacity:1;visibility:visible;transform:scale(1)}
.final-title-cn{font-size:clamp(54px,7vw,116px);letter-spacing:.20em;margin-left:.20em;font-weight:500;text-shadow:0 1px rgba(255,255,255,.42)}
.final-title-en{margin-top:9px;font:11px Arial,sans-serif;letter-spacing:.38em;color:#6d594d}.final-rule{width:58px;height:1px;background:#71574a;margin:22px auto 16px;opacity:.55}.showcase-final p{margin:0;font-size:13px;letter-spacing:.18em;color:#625047}.replay-showcase{margin-top:28px;border:0;background:transparent;color:#6d574b;font:9px Arial,sans-serif;letter-spacing:.28em;cursor:pointer;padding:10px}.replay-showcase::after{content:"";display:block;height:1px;background:currentColor;margin-top:6px;transform:scaleX(.45);transition:transform .3s}.replay-showcase:hover::after{transform:scaleX(1)}

@media(max-width:900px){.motif-main{width:36vw;left:33%;top:16%}.motif-small{width:22vw}.scene-a{left:8%;right:5%}.scene-b{left:10%;right:-3%}.scene-c{left:2%;right:0}.scene-d{left:-4%;right:-2%}.bottom-ribbon{height:9vh}.showcase-topbar{left:18px;right:18px}.showcase-index{display:none}}
@media(max-height:650px) and (orientation:landscape){.motif-main{width:22vw;top:8%}.scene-a,.scene-b,.scene-c,.scene-d{top:7%;bottom:2%}.bottom-ribbon{height:12vh}.final-title-cn{font-size:56px}}
@media(prefers-reduced-motion:reduce){.showcase-bg,.motif img{animation:none!important}}

/* merged experience handoff */
.final-actions{display:flex;align-items:center;gap:22px;margin-top:26px}.enter-main,.replay-showcase{margin-top:0}.enter-main{border:1px solid rgba(101,76,58,.44);background:rgba(246,238,225,.46);color:#5e493f;font:10px Arial,sans-serif;letter-spacing:.22em;padding:11px 18px;cursor:pointer;transition:background .3s,color .3s,transform .35s var(--ease),border-color .3s}.enter-main:hover{background:rgba(92,58,40,.88);color:#f6eee1;border-color:rgba(92,58,40,.88);transform:translateY(-2px)}
.showcase-page.is-entering{opacity:0;transform:scale(1.012);transition:opacity .72s var(--ease),transform .9s var(--ease)}
@media(max-width:620px){.final-actions{flex-direction:column;gap:8px}.enter-main{font-size:9px}}

/* single-site continuous handoff: no interstitial final page */
.showcase-final,.final-actions,.enter-main,.replay-showcase{display:none!important}
.showcase-page.is-entering{opacity:0;transform:scale(1.012);transition:opacity .72s var(--ease),transform .9s var(--ease)}