/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:50;background:var(--paper);overflow:hidden}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro .half{display:none;position:absolute;top:0;bottom:0;width:50%;background-color:var(--paper);background-size:200% 100%;background-repeat:no-repeat;
  transition:transform 1.1s cubic-bezier(.66,0,.2,1)}
.intro .half.l{left:0;background-position:left top;box-shadow:1px 0 0 var(--line)}
.intro .half.r{right:0;background-position:right top}
.intro.splitting{background:transparent}
.intro.splitting canvas{visibility:hidden}
.intro.splitting .half{display:block}
.intro.parting .half.l{transform:translateX(-101%)}
.intro.parting .half.r{transform:translateX(101%)}
.split-line{position:absolute;left:calc(50% - 1.5px);top:10%;bottom:10%;width:3px;border-radius:3px;background:var(--ink);transform:scaleY(0);transform-origin:50% 0;z-index:2}
.intro.splitting .split-line{transform:scaleY(1);transition:transform .38s cubic-bezier(.7,0,.3,1)}
.intro.parting .split-line{opacity:0;transition:opacity .45s ease}
.caption{position:absolute;left:0;right:0;bottom:max(6%,40px);display:flex;flex-direction:column;align-items:center;gap:.2rem;opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;pointer-events:none;padding-inline:16px;text-align:center}
.caption.on{opacity:1;transform:none}
.caption .zh{font-family:var(--brush);font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1;letter-spacing:.12em}
.caption .en{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.skip{position:absolute;right:max(16px,3vw);bottom:max(16px,3vh);z-index:3;background:transparent;border:1px solid var(--line);color:var(--ink-soft);font:500 .82rem var(--body);letter-spacing:.04em;padding:.5rem .9rem;border-radius:999px;cursor:pointer}
.skip:hover{color:var(--ink);border-color:var(--ink-soft)}
.intro.splitting .skip,.intro.splitting .caption{display:none}

.figure-box{position:relative;width:100%;max-width:460px;justify-self:center;aspect-ratio:4/5}
.figure-box canvas{position:absolute;inset:0;width:100%;height:100%}
.figure-box figcaption{position:absolute;left:0;right:0;bottom:-.4rem;text-align:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.figure-box figcaption span{font-family:var(--brush);font-size:1.05rem;letter-spacing:.08em;text-transform:none;color:var(--ink);margin-right:.5rem}
.intro .intro-video{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);height:min(72vh,86vw);width:auto;aspect-ratio:626/636;max-width:none;display:block}
.intro .caption{bottom:max(5%,32px)}
.hero-video{width:100%;height:100%;object-fit:contain;display:block}

.caption .zh[hidden]{display:none}
.caption .en{transition:none}
.caption.solo .en{font:400 clamp(1.1rem,2.4vw,1.5rem)/1.2 var(--hand,inherit);letter-spacing:.26em;color:var(--ink)}
.skip.sound{right:auto;left:max(16px,3vw);display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);border-color:var(--ink-soft)}
.skip.sound[hidden]{display:none}
.spk{width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat}