/* 两端共用：字体、颜色、纹样、组件、动效。不写只属于某一端的版式 */ /* 莲 · 作品集样式。规范见 DESIGN.md */ @font-face{font-family:LianBrush;src:url(assets/fonts/lian-zhenkai.woff2) format("woff2");font-display:swap} @font-face{font-family:LianLatin;src:url(assets/fonts/lian-latin.woff2) format("woff2");font-weight:300 700;font-display:swap} @property --r{syntax:"";inherits:false;initial-value:150%} @view-transition{navigation:auto} :root{ --ink:#1c1b19;--ink-2:#262420;--paper:#f1ebdd;--card:#f8f4ea; --cinnabar:#b0362b;--cinnabar-lt:#d9776c;--azure:#2f5566;--ochre:#8a6a4a; --muted-ink:#b9b1a0;--muted-paper:#6b5f4e; --brush:LianBrush,LianLatin,Georgia,"Kaiti SC",STKaiti,serif; --xw:var(--brush); --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans SC",sans-serif; --gutter:clamp(1rem,5vw,5rem);--ease:cubic-bezier(.65,.05,.25,1);--spring:cubic-bezier(.2,.9,.25,1.15); --shadow:0 1.5rem 3.75rem -1.5rem rgba(28,27,25,.45); /* 宽屏时把构图收在 16:10 画框里居中 */ --side:calc((100vw - min(100vw, 90rem)) / 2 + var(--gutter)); } *{box-sizing:border-box} /* 中文页标题里的西文用臻楷自带字形；英文页标题先用 Cormorant 斜体 */ .lang-en{--brush:LianLatin,LianBrush,Georgia,serif;--xw:var(--brush)} /* 多屏：电脑端尺寸用 rem，根字号随视口缩放（1440 宽时为 16px）；首页同时看高度，矮屏缩小、4K 等比放大 */ html{font-size:clamp(15px,calc(100vw / 90),44px)} html:has(.hall){font-size:clamp(13px,min(calc(100vw / 90),calc(100vh / 56.25)),44px)} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} body{margin:0;font:400 1.0625rem/1.85 var(--sans);font-synthesis-weight:none;letter-spacing:.02em;overflow-x:hidden} .theme-ink{--bg:var(--ink);--surface:var(--ink-2);background:var(--bg);color:var(--paper);--fg:var(--paper);--muted:var(--muted-ink);--line:rgba(241,235,221,.16);--accent:var(--cinnabar-lt);--glass:rgba(38,36,32,.72);--wm:rgba(241,235,221,.035)} .theme-paper{--bg:var(--paper);--surface:var(--card);background:var(--bg);color:var(--ink);--fg:var(--ink);--muted:var(--muted-paper);--line:rgba(138,106,74,.28);--accent:var(--cinnabar);--glass:rgba(248,244,234,.76);--wm:rgba(28,27,25,.04)} body{transition:background .5s,color .5s} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} h1,h2,h3{font-weight:400;line-height:1.25;margin:0} p{margin:0;text-wrap:pretty} .display{font-family:var(--brush);font-weight:600;letter-spacing:.02em;transform:rotate(-3deg);transform-origin:left bottom;-webkit-text-stroke:.014em currentColor;paint-order:stroke fill;text-shadow:0 0.25rem 1rem rgba(0,0,0,.06)} .brand-text,.vert-title,.entry-name,.card strong,.card-no,.tenets h3,.tenets .num,.prose h2,.pager a,.method .num,.method h2,.about-card h2,.catalog-list strong,.entry-no,.tagline,.bar-title{-webkit-text-stroke:.016em currentColor;paint-order:stroke fill;font-weight:600} .display .line{display:block;white-space:nowrap} .display .l2{margin-left:1.1em} .display em{font-style:normal;color:var(--accent)} .sub{font-family:var(--xw)} :focus-visible{outline:2px solid var(--accent);outline-offset:0.25rem;border-radius:0.375rem} .skip{position:fixed;left:0.5rem;top:-3.75rem;z-index:60;background:var(--cinnabar);color:var(--paper);padding:0.5rem 1rem;border-radius:62.4375rem} .skip:focus{top:0.5rem} /* ---------- 纹样与通用组件 ---------- */ .seal{display:inline-grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:50%;background:var(--cinnabar);color:var(--paper);font:1.25rem/1 var(--brush);box-shadow:inset 0 0 0 2px var(--cinnabar),inset 0 0 0 0.1875rem rgba(241,235,221,.7);flex:none} .seal.big{width:8.25rem;height:8.25rem;font-size:4.75rem;box-shadow:inset 0 0 0 0.375rem var(--cinnabar),inset 0 0 0 0.5rem rgba(241,235,221,.7)} .seal.stamp{width:3rem;height:3rem;font-size:1.625rem;margin-left:1.25rem;vertical-align:middle;transform:rotate(8deg)} .js .seal.stamp{animation:stamp .7s .45s var(--ease) both} @keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-6deg)}70%{opacity:1;transform:scale(.92) rotate(10deg)}100%{transform:scale(1) rotate(8deg)}} .lotus{width:2.75rem;height:2.75rem;fill:none;stroke:var(--ochre);stroke-width:1.2;stroke-linejoin:round} .cloud{display:block;width:7.5rem;height:1rem;fill:none;stroke:var(--ochre);stroke-width:1.2;margin:2rem 0} .huiwen{height:0.875rem;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 13H13V1H3V10H10V4H6V7' fill='none' stroke='%238a6a4a' stroke-width='1.2'/%3E%3Cpath d='M28 13H15V1H25V10H18V4H22V7' fill='none' stroke='%238a6a4a' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x} .label{font:500 0.8125rem var(--sans);color:var(--accent);letter-spacing:.32em} .lead{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:2;color:var(--muted)} .btn{display:inline-flex;align-items:center;gap:0.75rem;background:var(--cinnabar);color:var(--paper);padding:0.8125rem 1.75rem;border-radius:62.4375rem;font-size:1rem;letter-spacing:.16em;box-shadow:0 0.625rem 1.5rem -0.625rem rgba(176,54,43,.7);transition:transform .25s var(--spring),background .3s} .btn:hover{background:#952b22} .text-link{display:inline-flex;gap:0.625rem;font-family:var(--xw);font-size:1.125rem;letter-spacing:.12em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:0.25rem;transition:color .3s,background-size .4s var(--ease)} .text-link:hover{color:var(--accent);background-size:40% 1px} .arr{transition:transform .3s} a:hover .arr{transform:translateX(0.25rem)} .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.125rem 1.875rem;margin-top:2.125rem} .state{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.9375rem} .state::before{content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--ochre)} .state.is-live::before{background:var(--cinnabar);box-shadow:0 0 0 0.25rem rgba(176,54,43,.16)} .pending{color:var(--muted);font-size:1rem} .pill{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 1rem;border-radius:62.4375rem;background:rgba(138,106,74,.12);font-size:0.9375rem;white-space:nowrap} .pill.muted{color:var(--muted)} .btn:active,.card:active,.entry:active,.pill:active,.tabbar a:active,.back:active{transform:scale(.97)} /* ---------- 页头、页脚、标签栏 ---------- */ .site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;height:4.75rem;padding:0 var(--gutter);background:var(--glass);backdrop-filter:blur(1.125rem) saturate(1.4);-webkit-backdrop-filter:blur(1.125rem) saturate(1.4);view-transition-name:header} [data-default=ink] .site-header{position:fixed;inset:0 0 auto;background:linear-gradient(var(--bg),transparent);backdrop-filter:none;-webkit-backdrop-filter:none} .brand{display:flex;align-items:center;gap:0.875rem} .brand-text{font:1.875rem var(--brush);display:flex;align-items:baseline;gap:0.75rem} .brand-text small{font:500 0.6875rem var(--sans);letter-spacing:.24em;color:var(--muted)} .bar-title,.back,.tabbar{display:none} .lang{margin-left:2.25rem;display:grid;place-items:center;min-width:2.75rem;height:1.875rem;padding:0 0.75rem;border-radius:62.4375rem;font:600 0.8125rem var(--sans);letter-spacing:.08em;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,transform .25s var(--spring)} .lang:hover{background:var(--cinnabar);color:var(--paper);box-shadow:none} .lang:active{transform:scale(.94)} .site-header .site-nav{margin-left:auto} .site-nav{display:flex;gap:2.625rem;font:1.125rem var(--xw);letter-spacing:.3em} .site-nav a{position:relative;padding:0.375rem 0;transition:color .3s} .site-nav a:hover{color:var(--accent)} .site-nav a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-0.375rem;width:0.3125rem;height:0.3125rem;margin-left:-0.25rem;border-radius:50%;background:var(--accent)} .site-footer{padding:0 var(--gutter) 2rem} .footer-row{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;padding-top:1.75rem;font-size:0.9375rem;color:var(--muted)} .kuan{display:flex;align-items:center;gap:0.875rem} .kuan span{display:flex;flex-direction:column;line-height:1.6;color:var(--fg);font-family:var(--xw)} .kuan small{font:0.8125rem var(--sans);color:var(--muted);letter-spacing:.15em} /* ---------- 首页长卷（电脑） ---------- */ .hall{position:relative;height:640svh} .stage{position:sticky;top:0;height:100svh;overflow:hidden} .scene{position:absolute;inset:0;background:var(--bg);opacity:0;visibility:hidden;transition:background .5s} .scene.is-on{opacity:1;visibility:visible} /* 拨云见日：换集时两岸云海合拢、在云后换景，再向两边拨开，中间透出一道日光 */ .yun{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden;visibility:hidden} .yun.pass{visibility:visible} .yun .ri{position:absolute;top:50%;left:50%;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,241,205,.95),rgba(255,226,170,.45) 30%,transparent 62%);opacity:0;transform:scale(.4)} .bank{position:absolute;top:-6%;height:112%;width:64%;will-change:transform} .bank .curl{fill:none;stroke:#d8c193;stroke-width:3;stroke-linecap:round;opacity:.75} .bank.yl,.bank.op-l{left:-4%} .bank.yr,.bank.op-r{right:-4%} .yun .bank.yl{transform:translateX(-110%)} .yun .bank.yr{transform:translateX(110%)} .yun.pass .yl{animation:yun-l 1.15s cubic-bezier(.55,.05,.3,1) both} .yun.pass .yr{animation:yun-r 1.15s cubic-bezier(.55,.05,.3,1) both} .yun.pass .ri{animation:yun-ri 1.15s ease-out both} @keyframes yun-l{0%{transform:translateX(-110%)}40%,52%{transform:translateX(0)}100%{transform:translateX(-112%)}} @keyframes yun-r{0%{transform:translateX(110%)}40%,52%{transform:translateX(0)}100%{transform:translateX(112%)}} /* 分集字卡写在合拢的云上 */ .yun~.ep-card{z-index:10;background:none;color:#2b2620;--accent:var(--cinnabar)} @keyframes yun-ri{0%,45%{opacity:0;transform:scale(.4)}65%{opacity:1}100%{opacity:0;transform:scale(1.3)}} .scene[data-i="5"]{z-index:6} .scene[data-i="0"]{z-index:1} .scene[data-i="1"]{z-index:2} .scene[data-i="2"]{z-index:3} .scene[data-i="3"]{z-index:4} .scene[data-i="4"]{z-index:5} .scene-inner{position:relative;height:100%;padding:6.875rem calc(var(--side) + 5.625rem) 6rem var(--side);display:flex;align-items:center;gap:clamp(2rem,5vw,5.625rem)} .rise{transition:opacity .8s,transform .8s var(--ease)} .js .scene:not(.is-on) .rise{opacity:0;transform:translateY(1.75rem)} .scene.is-on .rise:nth-child(2){transition-delay:.1s} .scene.is-on .rise:nth-child(3){transition-delay:.2s} .scene.is-on .rise:nth-child(4){transition-delay:.3s} .scene .display{font-size:clamp(3.25rem,6.6vw,7rem);line-height:1.14;margin:1.375rem 0 2.125rem} .js .scene:not(.is-on) .display.rise{transform:translateY(1.75rem) rotate(-3deg)} .scene.is-on .display.rise{transform:rotate(-3deg)} .watermark{position:absolute;right:-6vw;bottom:-14vw;font:56vw/1 var(--brush);color:var(--wm);pointer-events:none;transform:rotate(-8deg)} .theme-ink .scene-jian{background:radial-gradient(ellipse 60% 70% at 72% 50%,#2e2a22,var(--ink) 70%)} .jian-text{flex:0 0 50%;position:relative;z-index:2;margin-right:-6%} .jian-text .lead{max-width:min(30em,38vw)} .collage{flex:1 1 auto;position:relative;height:min(36.25rem,72svh)} .collage .c{position:absolute;border-radius:1.375rem;overflow:hidden;box-shadow:0 2.5rem 5rem -1.875rem rgba(0,0,0,.8);transition:transform .6s var(--ease),opacity .8s} .collage img{width:100%;height:100%;object-fit:cover} .c1{width:78%;height:62%;right:0;top:0} .c2{width:56%;height:44%;left:0;bottom:6%} .c3{width:42%;height:36%;right:8%;bottom:0} .vert{position:absolute;left:4%;top:-2%;writing-mode:vertical-rl;letter-spacing:.22em;font:1.1875rem var(--xw);color:var(--muted)} .vert-title{writing-mode:vertical-rl;font:600 clamp(3.75rem,6.2vw,6.5rem)/1 var(--brush);letter-spacing:.12em;display:flex;align-items:center;gap:1.375rem;flex:none} .vert-title .sub{font:600 1rem var(--brush);letter-spacing:.3em;color:var(--accent);-webkit-text-stroke:0} .zuo-body,.xue-body{flex:1;min-width:0} .row-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin:2.5rem 0 0} .card{display:flex;flex-direction:column;gap:0.875rem;transition:transform .25s var(--spring)} .card-img{display:block;aspect-ratio:4/3;border-radius:1.25rem;overflow:hidden;box-shadow:0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.8)} .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .card:hover .card-img img{transform:scale(1.05)} .card-text{display:flex;flex-direction:column;gap:0.25rem} .card-no{font:1.25rem var(--brush);color:var(--accent)} .card strong{font:400 1.5rem var(--xw);letter-spacing:.06em} .card-meta{font-size:0.875rem;color:var(--muted)} .tenets{list-style:none;padding:0;margin:3rem 0 2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem} .tenets .num{font:3.375rem/1 var(--brush);color:var(--accent)} .tenets h3{font:clamp(1.75rem,2.5vw,2.25rem) var(--xw);margin:0.875rem 0 0.875rem;letter-spacing:.2em} .tenets p{color:var(--muted);font-size:1rem} .scene-cheng .cheng-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.2) brightness(.6) blur(1.5px);transform:scale(1.03)} .scene-cheng::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,27,25,.92) 0,rgba(28,27,25,.5) 50%,rgba(28,27,25,.1))} .scene-cheng .scene-inner{z-index:1;color:var(--paper);--muted:var(--muted-ink);--accent:var(--cinnabar-lt)} .cheng-text{max-width:45rem} .roller{position:absolute;top:0;bottom:0;left:0;z-index:6;width:1.125rem;opacity:0;pointer-events:none;background:linear-gradient(90deg,#4a3422,#a07a52 40%,#5c4129);box-shadow:0 0 1.5rem rgba(0,0,0,.6);border-radius:0.5625rem} .juanmu{position:absolute;z-index:8;right:calc(var(--gutter) - 0.375rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.375rem} .juanmu a{position:relative;writing-mode:vertical-rl;letter-spacing:.32em;font:1.125rem var(--xw);color:var(--muted);transition:color .3s;padding-left:0.875rem} .juanmu a .sub{font:600 .72rem var(--brush);margin-bottom:0.5rem;-webkit-text-stroke:0} .juanmu a::before{content:"";position:absolute;left:0;top:0.375rem;width:0.3125rem;height:0.3125rem;border-radius:50%;background:currentColor;opacity:.5;transition:transform .4s var(--spring),background .3s,opacity .3s} .juanmu a:hover,.juanmu a.is-on{color:var(--fg)} .juanmu a.is-on::before{background:var(--cinnabar-lt);opacity:1;transform:scale(1.8)} .axis{position:absolute;z-index:8;left:var(--side);right:var(--side);bottom:1.875rem;display:flex;align-items:center;gap:1.5rem;font:500 0.8125rem var(--sans);color:var(--muted)} .axis-now{color:var(--fg);font:600 1.05rem var(--brush);letter-spacing:.2em;min-width:7em} .axis-line{flex:1;height:1px;background:var(--line);position:relative} .axis-line i{position:absolute;left:0;top:-1px;height:0.1875rem;width:var(--p,0%);background:var(--cinnabar-lt);border-radius:2px} /* 莲苞游标：越往后开得越盛（--q 由脚本按进度写入） */ .bud{position:absolute;left:var(--p,0%);top:0;width:1.9rem;height:1.65rem;transform:translate(-50%,-88%);overflow:visible;transition:left .2s} .bud path{transform-box:fill-box;transition:transform .5s var(--spring)} .bud .pl3,.bud .pr3{fill:#e9b0a6} .bud .pl2,.bud .pr2{fill:#d9776c} .bud .p1{fill:var(--cinnabar)} .bud .pl3{transform-origin:100% 100%;transform:rotate(calc(38deg - var(--q,0) * 50deg))} .bud .pr3{transform-origin:0 100%;transform:rotate(calc(-38deg + var(--q,0) * 50deg))} .bud .pl2{transform-origin:100% 100%;transform:rotate(calc(18deg - var(--q,0) * 30deg))} .bud .pr2{transform-origin:0 100%;transform:rotate(calc(-18deg + var(--q,0) * 30deg))} .axis-hint{animation:hint-bob 2.4s ease-in-out infinite} @keyframes hint-bob{50%{transform:translateY(.25rem);opacity:.6}} /* 序 · 入门：装裱成立轴的行旅图，挂在宣纸上；滚动时镜头推向画中朱门 */ .scene-men{background:#efe7d6;color:var(--ink);--fg:var(--ink);--muted:#5f5446;--accent:var(--cinnabar);--line:rgba(28,27,25,.2)} .scene-men .scene-inner{z-index:3;opacity:calc(1 - var(--z,0) * 1.6);transform:translate(calc(var(--mx,0) * .5rem),calc(var(--my,0) * .3rem))} .scene-men.is-on .men-text .rise{transition-delay:calc(var(--tw) + .4s)} .scene-men.is-on .men-text .rise:nth-child(3){transition-delay:calc(var(--tw) + 1.3s)} .scene-men.is-on .men-text .rise:nth-child(4){transition-delay:calc(var(--tw) + 1.6s)} .js .scene-men.is-on .write .ch{transition-delay:calc(var(--i) * 160ms + var(--tw) + .6s)} /* 云雾：一层层飘过画面下方 */ .mist{position:absolute;inset:auto 0 0;height:42%;z-index:2;pointer-events:none;overflow:hidden;opacity:calc(1 - var(--z,0) * 2)} .mist i{position:absolute;bottom:-30%;width:70%;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(239,231,214,.85),rgba(239,231,214,0));animation:mist 38s ease-in-out infinite alternate} .mist i:nth-child(1){left:-20%;animation-duration:44s} .mist i:nth-child(2){left:45%;bottom:-45%;animation-duration:36s;animation-direction:alternate-reverse} @keyframes mist{to{transform:translateX(30%)}} /* 节气笺 */ .jieqi{display:flex;align-items:center;gap:.8rem;margin:0} .jq-name{writing-mode:vertical-rl;padding:.5rem .3rem;border-radius:.25rem;background:var(--jq,#b0482e);color:#f6efe2;font:600 1.05rem/1 var(--brush);letter-spacing:.2em;box-shadow:0 .4rem 1rem -.5rem var(--jq,#b0482e)} .jq-poem{display:flex;flex-direction:column;line-height:1.55} .jq-line{font:600 1.08rem var(--brush);color:var(--fg)} .jq-by{font-size:.75rem;color:var(--muted);letter-spacing:.08em} /* 珠帘：一行诗一串，一字一珠；脚本接管后按物理随风摆动，鼠标划过会拨动 */ .zhulian{position:absolute;z-index:4;top:0;left:calc(var(--side) + 23rem);width:20rem;height:100%;display:flex;flex-direction:row-reverse;justify-content:space-between;pointer-events:none;transform:translate(calc(var(--mx,0) * -.3rem),0);opacity:calc(1 - var(--z,0) * 2.4)} .zl-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .zl-threads path{fill:none;stroke:rgba(80,60,40,.42);stroke-width:1} .strand{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding-top:calc(var(--drop) + 4.5rem);background:linear-gradient(rgba(80,60,40,.42),rgba(80,60,40,.42)) 50% 0/1px calc(var(--drop) + 4.5rem) no-repeat;transform-origin:50% 0;animation:tiao-drop 1.4s var(--spring) calc(var(--t0) + var(--k) * .12s) both,tiao-sway 6s ease-in-out calc(var(--k) * .7s + 2s) infinite alternate} .bead{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;font:600 1.25rem/1 var(--brush);color:#2b2620;background:radial-gradient(circle at 34% 28%,#fffdf7,#f1e7d2 52%,#d8c7a6);box-shadow:0 .35rem .7rem -.35rem rgba(60,40,20,.55),inset 0 0 0 1px rgba(140,110,70,.22)} .zl-knot{width:.55rem;height:.55rem;border-radius:50%;background:var(--cinnabar);box-shadow:0 0 0 2px rgba(176,54,43,.15)} .zl-by{display:block;writing-mode:vertical-rl;padding:.35rem .15rem;border-radius:.2rem;background:var(--cinnabar);color:#f6efe2;font:600 .75rem/1 var(--brush);letter-spacing:.15em} .zhulian.live .strand{animation:none;background:none;padding:0} .zhulian.live .bead,.zhulian.live .zl-knot,.zhulian.live .zl-by{position:absolute;left:0;top:0;will-change:transform} /* 莲瓣飘落 */ .petals{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden} .petals i{position:absolute;top:-4%;left:var(--x);width:.85rem;height:1.25rem;border-radius:0 100% 0 100%;background:linear-gradient(160deg,#fbe9e3,#e2a29a);opacity:0;animation:petal var(--dur) linear var(--dl) infinite} .petals i:nth-child(1){--x:30%;--dur:19s;--dl:4s} .petals i:nth-child(2){--x:55%;--dur:24s;--dl:9s} .petals i:nth-child(3){--x:78%;--dur:21s;--dl:2s} .petals i:nth-child(4){--x:92%;--dur:26s;--dl:14s} .petals i:nth-child(5){--x:44%;--dur:22s;--dl:18s} .petals i:nth-child(6){--x:68%;--dur:28s;--dl:11s} @keyframes petal{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:.85}50%{transform:translate(-8vw,52vh) rotate(260deg)}92%{opacity:.75}100%{opacity:0;transform:translate(-20vw,108vh) rotate(560deg)}} /* 片头（约 14 秒，叙事式）：黑场字幕 → 云海从中拨开 → 镜头自蓬莱仙山之巅缓缓降至仙府（WebGL 按景深图做视差与推镜，云雾与天光在同一画面里算，不分层）→ 鹤过、题款 → 推入府门，化入金光，金光散后即是首页 底图：袁江《蓬莱仙岛图》，1708，公有领域；景深图为手工分区后模糊 */ .opening{display:none} .js .opening{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;background:#120f0b;animation:op-fade-out 1.4s ease 13.2s forwards} .js.seen-intro .opening{display:none} /* 素材载入前全部暂停，载入后（或最多等 2.5 秒）由脚本加 .run 一起开拍 */ .opening:not(.run),.opening:not(.run) *{animation-play-state:paused!important} .op-world{position:absolute;inset:0;overflow:hidden} .op-gl{position:absolute;inset:0;width:100%;height:100%;display:block} /* 不支持 WebGL 时的退路：整幅画平移推近 */ .op-pan{position:absolute;left:50%;top:0;width:max(100vw,61.3vh);margin-left:calc(max(100vw,61.3vh) / -2);aspect-ratio:1242/2028;transform:translateY(-4%);opacity:0;animation:op-fade 2s ease 3s forwards,op-pan 7s cubic-bezier(.45,.05,.3,1) 3s forwards} .op-zoom{position:absolute;inset:0;transform-origin:39% 73.5%;animation:op-zoom 2s cubic-bezier(.55,0,.3,1) 11.4s forwards} .op-paint{display:block;width:100%;height:100%;object-fit:cover} .opening.gl .op-pan{display:none} @keyframes op-pan{to{transform:translateY(max(calc(-73.5% + 72vh),calc(-100% + 100vh)))}} @keyframes op-zoom{to{transform:scale(4)}} /* 字幕：电影式，一句一句淡入淡出 */ .op-caps{position:absolute;left:0;right:0;bottom:calc(10vh + 2.2rem);z-index:4;text-align:center;pointer-events:none} .op-caps p{position:absolute;left:0;right:0;bottom:0;margin:0;font:600 1.5rem/1.6 var(--brush);letter-spacing:.32em;padding-left:.32em;color:#f3e6c8;text-shadow:0 .2rem 1rem rgba(0,0,0,.6);opacity:0;animation:op-cap 3.8s ease forwards} /* 每句的出现时刻写在行内（UI.introAt），与旁白对齐 */ .op-caps p::before,.op-caps p::after{content:"";display:inline-block;width:2.6rem;height:1px;margin:0 1.2rem;vertical-align:middle;background:linear-gradient(90deg,transparent,rgba(243,230,200,.7),transparent)} .lang-en .op-caps p{font-size:1.25rem;letter-spacing:.06em;padding:0 1rem} @keyframes op-cap{0%{opacity:0;transform:translateY(.5rem)}18%,78%{opacity:1;transform:none}100%{opacity:0}} /* 仙鹤 */ .crane{position:absolute;z-index:2;width:7rem;opacity:0;will-change:transform} .crane .wing{fill:#f7f3ea;stroke:#2a2622;stroke-width:.6;transform-box:fill-box;transform-origin:100% 100%;animation:flap 1.1s ease-in-out infinite alternate} .crane .wing.far{fill:#ded6c6;animation-delay:-.55s} .crane.c1{top:30%;left:-10%;animation:fly 7s linear 5s forwards} .crane.c2{top:37%;left:-16%;width:5.2rem;animation:fly 7.6s linear 5.6s forwards} .crane.c3{top:25%;left:-22%;width:4rem;animation:fly 8s linear 6.2s forwards} @keyframes flap{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(-.55) rotate(-6deg)}} @keyframes fly{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(85vw,-14vh)}} /* 光点升起 */ .op-motes i{position:absolute;bottom:-4%;z-index:2;width:.35rem;height:.35rem;border-radius:50%;background:#fff3c8;box-shadow:0 0 .6rem .2rem rgba(255,226,150,.7);opacity:0;animation:op-mote 3.4s ease-out forwards} @keyframes op-mote{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-75vh)}} /* 片名：如画上题款，竖写于右侧 */ .op-inner{position:absolute;z-index:3;right:calc(var(--gutter) + 4rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:row-reverse;align-items:flex-start;gap:1.2rem;color:#f6ecd4;text-shadow:0 .2rem 1.2rem rgba(20,14,8,.65);animation:op-out .8s ease 12.1s forwards} .op-title{writing-mode:vertical-rl;display:flex;gap:.35em;margin:0;font:600 3.8rem/1 var(--brush);letter-spacing:.1em;-webkit-text-stroke:.01em currentColor} .op-title span{opacity:0;transform:translateY(-.6rem);animation:op-char 1.2s ease calc(9.4s + var(--i) * .18s) forwards} .op-sub{writing-mode:vertical-rl;margin:2.2rem 0 0;font:600 1.15rem var(--brush);letter-spacing:.45em;color:#efd9a8;opacity:0;animation:op-fade 1.2s ease 10.6s forwards} .op-seal{width:2.6rem;height:2.6rem;font-size:1.4rem;border-radius:.3rem;margin-top:auto;align-self:flex-end;opacity:0;animation:stamp .7s var(--ease) 11.1s both} .lang-en .op-title,.lang-en .op-sub{writing-mode:horizontal-tb} .lang-en .op-inner{flex-direction:column;align-items:flex-end;right:var(--gutter)} /* 电影黑边 */ .op-bar{position:absolute;left:0;right:0;height:10vh;background:#100d0a;z-index:5;animation:op-bar .9s ease 12.2s forwards} .op-bar.t{top:0;transform-origin:0 0} .op-bar.b{bottom:0;transform-origin:0 100%} @keyframes op-bar{to{transform:scaleY(0)}} .op-skip{position:absolute;right:var(--gutter);bottom:calc(10vh + .8rem);z-index:6;margin:0;font-size:.8rem;letter-spacing:.3em;color:rgba(246,236,212,.75);opacity:0;animation:op-fade .6s ease .6s forwards,op-out .3s ease 12.2s forwards} @keyframes op-char{to{opacity:1;transform:none}} @keyframes op-fade{to{opacity:1}} @keyframes op-out{to{opacity:0}} @keyframes op-fade-out{to{opacity:0;visibility:hidden}} .opening.skip{animation:op-fade-out .45s ease forwards!important;animation-play-state:running!important} /* 幕：第一次进入每一幕时，先放一段开场镜头（WebGL 景深推镜 + 幕卡 + 第一人称旁白），再露出正文 */ .act{position:absolute;inset:0;z-index:11;background:#0e0c09;cursor:pointer;opacity:0;transition:opacity .6s ease} .act.on{opacity:1} body:has(.hall.acting) .site-header{opacity:0;pointer-events:none} .site-header{transition:opacity .6s} .act.out{opacity:0;transition-duration:1s} .act-gl{position:absolute;inset:0;width:100%;height:100%;display:block} .act::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 55%,rgba(14,12,9,.6) 88%),radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(14,12,9,.45))} .act-montage{position:absolute;inset:0;overflow:hidden} .act-montage img{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover;opacity:0;filter:sepia(.25) brightness(.82);animation:mont 1.7s ease-in-out forwards} @keyframes mont{0%{opacity:0;transform:scale(1.02) translateX(1.5%)}18%,82%{opacity:1}100%{opacity:0;transform:scale(1.08) translateX(-1.5%)}} .act-bar{position:absolute;left:0;right:0;height:10vh;background:#0e0c09;z-index:2} .act-bar.t{top:0} .act-bar.b{bottom:0} .act-card{position:absolute;z-index:3;inset:0;margin:0;display:grid;place-content:center;justify-items:center;gap:1rem;color:#f3e6c8;text-shadow:0 .3rem 1.6rem rgba(0,0,0,.7);opacity:0} .act.on .act-card{animation:act-card 2.6s ease .3s forwards} .act-no{font:500 .85rem var(--sans);letter-spacing:.6em;padding-left:.6em;color:#e7b98a} .act-name{font:600 6rem/1 var(--brush);letter-spacing:.35em;padding-left:.35em} @keyframes act-card{0%{opacity:0;transform:scale(1.04)}25%,70%{opacity:1;transform:none}100%{opacity:0;transform:scale(.98)}} .act-lines{position:absolute;z-index:3;left:0;right:0;bottom:calc(10vh + 2.2rem);text-align:center} .act-lines p{margin:0;font:600 1.5rem/1.9 var(--brush);letter-spacing:.24em;padding-left:.24em;color:#f3e6c8;text-shadow:0 .2rem 1rem rgba(0,0,0,.7);opacity:0;animation:act-line 1.2s ease forwards} .act-lines p:nth-child(1){animation-delay:2.2s} .act-lines p:nth-child(2){animation-delay:3.2s;font-size:1.3rem;color:#e9dcbd} .lang-en .act-lines p{letter-spacing:.04em;padding:0 2rem} .lang-en .act-name{letter-spacing:.05em;font-size:5rem} @keyframes act-line{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}} .act-skip{position:absolute;z-index:3;right:var(--gutter);bottom:calc(10vh + .8rem);margin:0;font-size:.75rem;letter-spacing:.3em;color:rgba(243,230,200,.6)} /* 幕放映时正文先不动，散场后再浮入、落笔 */ .hall.acting .scene.is-on .rise{opacity:0!important;transform:translateY(1.75rem)!important;transition:none!important} .hall.acting .scene.is-on .write .ch{clip-path:inset(0 0 100% 0)!important;transition:none!important} .narr{display:none} /* 尾声：月下荷塘 */ .scene-wei{background:linear-gradient(#0f1116,#171a1f 46%,#141413 70%,var(--ink));--w-leaf:#1b2520;--w-leaf2:#2d3b31;--w-rim:rgba(243,220,160,.32);--w-vein:rgba(214,222,196,.1);--w-stem:#34443a;--w-petal:#f3e1d8;--w-petal2:#e3a99e;--w-tip:#b8473c;--w-water:#101215;--w-hill:#262a2e;--w-moon:#fbf3dc;--w-glow:rgba(243,220,160,.2)} .theme-paper .scene-wei{background:linear-gradient(#efe6d2,#f4ecdc 46%,#ece2cc 70%,var(--paper));--w-leaf:#8f9d86;--w-leaf2:#b9c4ac;--w-rim:rgba(255,255,255,.5);--w-vein:rgba(60,70,50,.15);--w-stem:#7d8a73;--w-petal:#fbeee9;--w-petal2:#eab3a8;--w-tip:#c0483d;--w-water:#e4d9c2;--w-hill:#cfc4ac;--w-moon:#c9433a;--w-glow:rgba(176,54,43,.16)} .wei-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* 远山：三层由淡到浓，底边融进水汽 */ .wei-hills{position:absolute;left:0;right:0;top:34%;width:100%;height:30%;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)} .wei-hills path{fill:var(--w-hill)} .wei-hills .h3{opacity:.35} .wei-hills .h2{opacity:.55} .wei-hills .h1{opacity:.8} /* 月：一层月面明暗、两圈月晕缓慢呼吸 */ .wei-moon{position:absolute;right:26%;top:11%;width:9.5rem;height:9.5rem;border-radius:50%;background:radial-gradient(circle at 38% 36%,var(--w-moon),color-mix(in srgb,var(--w-moon) 82%,#a8925e) 62%,color-mix(in srgb,var(--w-moon) 66%,#8a744a));box-shadow:0 0 4rem 1rem var(--w-glow)} .wei-moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 30% 22% at 62% 56%,rgba(120,100,60,.14),transparent),radial-gradient(ellipse 20% 26% at 34% 62%,rgba(120,100,60,.1),transparent),radial-gradient(ellipse 18% 14% at 56% 30%,rgba(120,100,60,.08),transparent),radial-gradient(ellipse 40% 20% at 45% 80%,rgba(120,100,60,.07),transparent);mix-blend-mode:multiply} .theme-paper .wei-moon::after{display:none} .wei-moon .halo{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,transparent 28%,var(--w-glow) 42%,transparent 66%);animation:halo 9s ease-in-out infinite alternate} .wei-moon .halo.h2{inset:-120%;opacity:.5;animation-duration:13s} @keyframes halo{from{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1.03)}} /* 薄云从月前缓缓飘过 */ .wei-cloud{position:absolute;height:3.2rem;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--w-hill) 70%,#9a9a9a) 0,transparent 70%);opacity:.55;animation:cloud-drift var(--cd,80s) linear infinite;animation-delay:var(--co,0s)} .wei-cloud.c1{top:15%;width:26rem;--cd:90s;--co:-30s} .wei-cloud.c2{top:22%;width:18rem;height:2.2rem;--cd:70s;--co:-55s;opacity:.4} .wei-cloud.c3{top:8%;width:34rem;height:4rem;--cd:120s;--co:-10s;opacity:.3} @keyframes cloud-drift{from{transform:translateX(105vw)}to{transform:translateX(-40rem)}} /* 水中月影：一柱碎光，横纹轻轻闪 */ .wei-reflect{position:absolute;right:calc(26% + 1.75rem);top:66%;bottom:0;width:6rem;background:repeating-linear-gradient(transparent 0 .5rem,var(--w-moon) .5rem .62rem);opacity:.18;-webkit-mask:radial-gradient(ellipse 50% 60% at 50% 30%,#000,transparent);mask:radial-gradient(ellipse 50% 60% at 50% 30%,#000,transparent);animation:reflect 3.6s ease-in-out infinite alternate} @keyframes reflect{from{opacity:.12;transform:scaleX(.85)}to{opacity:.24;transform:scaleX(1.1)}} /* 萤火 */ .wei-fly i{position:absolute;left:var(--x);top:var(--y);width:.3rem;height:.3rem;border-radius:50%;background:#f6e3a0;box-shadow:0 0 .6rem .2rem rgba(246,227,160,.5);opacity:0;animation:fly var(--d) ease-in-out var(--o) infinite} .theme-paper .wei-fly{display:none} @keyframes fly{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.9}50%{transform:translate(1.4rem,-1.6rem)}70%{opacity:.7}} /* 荷塘 */ .wei-pond{position:absolute;left:0;right:0;bottom:0;width:100%;height:40%} .wei-pond .s-leaf{stop-color:var(--w-leaf)} .wei-pond .s-leaf2{stop-color:var(--w-leaf2)} .wei-pond .s-petal{stop-color:var(--w-petal)} .wei-pond .s-petal2{stop-color:var(--w-petal2)} .wei-pond .s-tip{stop-color:var(--w-tip)} .wei-pond .s-water{stop-color:var(--w-water)} .wei-pond .leaf{fill:url(#lf-g)} .wei-pond .vein{stroke:var(--w-vein);stroke-width:1;fill:none} .wei-pond .near .vein{opacity:.5} .wei-pond .rim{stroke:var(--w-rim);stroke-width:1.4;fill:none;stroke-linecap:round} .wei-pond .stem{stroke:var(--w-stem);stroke-width:2.2;fill:none;stroke-linecap:round} .wei-pond .petal{fill:url(#pt-g);stroke:rgba(120,40,30,.18);stroke-width:.6} .wei-pond .petal.back{opacity:.82} .wei-pond .bud{fill:url(#bd-g)} .wei-pond .pod{fill:#d9b56a;opacity:.9} .wei-pond .seed{fill:var(--w-leaf2);stroke:var(--w-stem);stroke-width:1} .wei-pond .reed{stroke:var(--w-stem);stroke-width:1.4;fill:none;opacity:.5} .wei-pond .far{opacity:.45} .wei-pond .near .leaf{filter:brightness(.78)} .wei-pond .shine{fill:none;stroke:var(--w-moon);stroke-width:1;opacity:.14;stroke-dasharray:70 240;animation:flow var(--fd,14s) linear infinite} .wei-pond .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway var(--sd,7s) ease-in-out var(--so,0s) infinite alternate} @keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}} .scene-wei .shilian.one{right:calc(var(--gutter) + 6.875rem);top:5.5rem} .scene-wei .scene-inner{z-index:1} .wei-text{max-width:44rem} .wei-links{display:flex;flex-wrap:wrap;gap:1rem 2.6rem;margin-top:2.4rem} .wei-links a{font:600 1.5rem var(--brush);transition:color .3s} .wei-links a:hover{color:var(--accent)} /* 分集字卡：向前进入新一集时出现 */ .ep-card{position:absolute;z-index:7;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;pointer-events:none;opacity:0;background:radial-gradient(ellipse 34% 30% at 50% 50%,var(--bg) 25%,transparent 80%)} .ep-card.play{animation:ep-card 1.15s ease both} .ep-no{font:500 .85rem var(--sans);letter-spacing:.5em;color:var(--accent)} .ep-name{font:600 6.5rem/1 var(--brush);letter-spacing:.3em;padding-left:.3em;-webkit-text-stroke:.02em currentColor} @keyframes ep-card{0%,22%{opacity:0;transform:scale(1.05)}38%,55%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(.98)}} .men-art{position:absolute;z-index:1;margin:0;right:calc(var(--side) + 4.5rem);top:50%;height:44rem;aspect-ratio:3/4.35;transform:translateY(-53%)} .scroll-mount{position:relative;height:100%;transform-origin:72% 46%;transform:scale(calc(1 + var(--z,0) * 2.6)) translate(calc(var(--mx,0) * -.6rem),calc(var(--my,0) * -.4rem));will-change:transform} .mount-body{height:100%;padding:5% 5.5% 8%;background:#e3d9c4;box-shadow:0 1.875rem 3.75rem -2.25rem rgba(60,40,20,.55),inset 0 0 0 1px rgba(120,90,60,.18)} .rod{position:absolute;z-index:2;left:-3%;right:-3%;height:0.875rem;border-radius:0.4375rem;background:linear-gradient(#6d5238,#3d2b1c);box-shadow:0 .3rem .6rem -.3rem rgba(40,25,10,.5)} .rod.top{top:-0.4375rem} .rod.bot{top:calc(100% - 0.4375rem)} /* 片头之后立轴自上而下展开；--t0 为片头时长，只在载入时读一次 */ .scene-men{--t0:.2s;--tw:.2s} html:not(.seen-intro) .scene-men{--t0:13.6s;--tw:13.6s} .js .mount-body{animation:unroll 1.9s cubic-bezier(.6,.05,.25,1) var(--t0) both} .js .rod.bot{animation:unroll-rod 1.9s cubic-bezier(.6,.05,.25,1) var(--t0) both} @keyframes unroll{from{clip-path:inset(0 -10% 100% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}} @keyframes unroll-rod{from{top:-0.4375rem}} .scroll-paint img{animation:kenburns 40s ease-in-out calc(var(--t0) + 1.5s) infinite alternate;transform-origin:62% 70%} @keyframes kenburns{to{transform:scale(1.08) translate(-1%,-1.2%)}} .paint-mist{position:absolute;inset:0 -60% 0 0;pointer-events:none;background:radial-gradient(28% 13% at 20% 74%,rgba(250,246,236,.75),transparent 70%),radial-gradient(22% 10% at 48% 86%,rgba(250,246,236,.6),transparent 70%),radial-gradient(26% 12% at 76% 66%,rgba(250,246,236,.55),transparent 70%);animation:drift 46s linear infinite alternate} @keyframes drift{to{transform:translateX(-36%)}} .scroll-paint{position:relative;height:100%;overflow:hidden;background:#f3ecdc;box-shadow:inset 0 0 0 1px rgba(120,90,60,.25)} .scroll-paint img{width:100%;height:100%;object-fit:cover} .door-glow{position:absolute;left:80%;top:53%;width:60%;aspect-ratio:1;margin:-30% 0 0 -30%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,215,.95),rgba(255,220,170,.4) 35%,transparent 65%);opacity:calc(var(--z,0) * 1.3);transform:scale(calc(.3 + var(--z,0) * 3));pointer-events:none} .inscr{position:absolute;right:9%;top:6%;writing-mode:vertical-rl;font:600 clamp(1.125rem,1.6vw,1.5rem)/1.4 var(--brush);letter-spacing:.3em;color:#2b2620;display:flex;align-items:center;gap:0.75rem;opacity:.88} .inscr .seal{width:1.875rem;height:1.875rem;font-size:1rem;border-radius:0.25rem;writing-mode:horizontal-tb} .men-text{max-width:32.5rem} .men-title{font:600 clamp(5rem,8vw,7.4rem)/1 var(--brush);writing-mode:vertical-rl;letter-spacing:.12em;margin:1.625rem 0 1.25rem;-webkit-text-stroke:.02em currentColor;paint-order:stroke fill} .lang-en .men-title{writing-mode:horizontal-tb;letter-spacing:0;font-size:clamp(4rem,5.6vw,6rem)} .lang-en .zhulian{left:calc(var(--side) + 26rem);width:18rem} .men-line{font:600 clamp(1.375rem,2vw,1.875rem)/1.8 var(--brush);color:var(--muted)} /* 左侧像一幅书法：大字在右，题款两行竖写在左，落一方印；背后一朵淡墨莲 */ .men-work{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:1.4rem;margin:1rem 0 .5rem} .men-work .men-title{margin:0} .men-work .men-line{writing-mode:vertical-rl;font-size:1.35rem;line-height:2.1;letter-spacing:.32em;margin-top:2.6rem} .men-seal{width:1.9rem;height:1.9rem;font-size:1.05rem;border-radius:.25rem;margin-block-start:.9rem;transform:rotate(4deg);vertical-align:middle} .men-lotus{position:absolute;left:-3rem;top:6rem;width:22rem;height:22rem;fill:rgba(176,54,43,.035);stroke:rgba(138,106,74,.16);stroke-width:.35;pointer-events:none;z-index:-1} .lang-en .men-work{display:block} .lang-en .men-work .men-line{writing-mode:horizontal-tb;margin-top:1rem;letter-spacing:.02em;display:block} .lang-en .men-seal{display:none} .men-hint{font-size:0.875rem;color:var(--muted);letter-spacing:.2em} .art-credit{position:absolute;top:calc(100% + 1rem);right:0;margin:0;font-size:0.75rem;color:#6b5f4e;opacity:calc(.85 - var(--z,0) * 3)} /* 纸张颗粒：让画面像印在纸上，而不是发光的屏幕 */ .scene-men::after,.theme-paper::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.26;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .theme-paper::before{position:fixed;z-index:60;opacity:.22} /* 琴台 */ .qintai{display:flex;align-items:center;gap:0.875rem;padding:0.5rem 1.125rem 0.5rem 0.5rem;border-radius:62.4375rem;background:var(--surface);box-shadow:0 0.625rem 1.875rem -1.25rem rgba(0,0,0,.6)} .qt-btn{width:2.625rem;height:2.625rem;border:0;border-radius:50%;padding:0;cursor:pointer;background:radial-gradient(circle,var(--cinnabar) 0 18%,#1c1b19 19% 22%,#2c2923 23% 100%);display:grid;place-items:center;transition:transform .25s var(--spring)} .qt-disc{width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 0.1875rem,rgba(255,255,255,.06) 0.1875rem 0.25rem)} .qintai.playing .qt-btn{animation:spin 4s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .qt-text{display:flex;flex-direction:column;line-height:1.35} .qt-text b{font:600 1.0625rem var(--brush);color:var(--fg)} .qt-text small{font-size:0.75rem;color:var(--muted)} .qt-bar{width:5.625rem;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .qt-bar i{display:block;height:100%;width:var(--p,0%);background:var(--accent)} body.on-gate .site-header{background:linear-gradient(rgba(239,231,214,.92),rgba(239,231,214,0));color:var(--ink);--muted:#5f5446;--accent:var(--cinnabar)} body.on-gate .juanmu,body.on-gate .axis{--fg:var(--ink);--muted:#6b5f4e;--line:rgba(28,27,25,.2);color:#6b5f4e} body.on-gate .juanmu a.is-on::before,body.on-gate .axis-line i{background:var(--cinnabar)} .juanmu{transition:background .4s} /* 人物卡：国风剧人物海报的形式，原创 */ .role-card{position:relative;flex:0 0 auto;width:min(23.75rem,30vw);aspect-ratio:3/4;margin:0;border-radius:1.75rem;overflow:hidden;box-shadow:0 2.5rem 5rem -1.875rem rgba(0,0,0,.75);transform:rotate(2deg)} .role-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) sepia(.1)} .role-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,25,0) 40%,rgba(28,27,25,.85))} .role-card figcaption{position:absolute;z-index:1;inset:0;padding:1.625rem;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;color:var(--paper);margin:0} .role-name{font:600 5.75rem/1 var(--brush);-webkit-text-stroke:.02em currentColor;writing-mode:vertical-rl;position:absolute;right:1.375rem;top:1.375rem;text-shadow:0 0.375rem 1.5rem rgba(0,0,0,.35)} .lang-en .role-name{writing-mode:horizontal-tb;font-size:4rem;top:auto;bottom:7.375rem;right:1.625rem} .role-title{font-size:0.8125rem;letter-spacing:.3em;opacity:.85;align-self:flex-start} .role-verse{font:600 1.375rem/1.6 var(--brush);align-self:flex-start;margin:0.5rem 0 0} .lang-en .role-verse{font-size:1.1875rem} .role-card .seal{position:absolute;left:1.5rem;top:1.5rem} /* 月相昼夜 */ .moon{margin-left:1.75rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:transform .5s var(--spring)} .moon svg{width:1.5rem;height:1.5rem} .moon-disc{fill:currentColor;stroke:currentColor;stroke-width:1.3;transition:fill-opacity .5s,opacity .5s} .moon-crescent{fill:currentColor;transition:opacity .5s} .theme-ink .moon-disc{fill-opacity:0;opacity:0} .theme-paper .moon-disc{fill-opacity:.9} .theme-paper .moon-crescent{opacity:0} .moon:hover{transform:rotate(-20deg)} .moon+.lang{margin-left:0.875rem} /* 逐字落笔 */ .js .write .ch{display:inline-block;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.6,.05,.3,1) calc(var(--i) * 90ms + .15s)} .js .write.seen .ch{clip-path:inset(-10% -10% -10% -10%)} .lang-en .write .ch{margin-right:.22em} .lang-en .write .ch:last-child{margin-right:0} /* 生成山水 */ .shanshui{display:block;width:100%;height:6.875rem;margin-bottom:-2px} .shanshui path{fill:var(--muted)} /* 诗帘：从上方垂下的竖幅诗句，落下后随风轻摆 */ .shilian{position:absolute;z-index:2;top:4rem;display:flex;gap:2.125rem;pointer-events:none} .shilian.one{right:calc(var(--gutter) + 6.875rem)} .scene-xue .shilian.one{right:auto;left:calc(var(--gutter) + 9.375rem);display:none} .scene-cheng .shilian.right{right:calc(var(--gutter) + 9.375rem)} .tiao{position:relative;width:3.25rem;padding:1.875rem 0 1.25rem;background:linear-gradient(90deg,rgba(236,226,204,.94),rgba(246,239,224,.96) 50%,rgba(232,221,198,.94));box-shadow:0 1.125rem 1.875rem -1.375rem rgba(60,40,20,.6),inset 0 0 0 1px rgba(140,110,70,.2);transform-origin:50% 0;animation:tiao-drop 1.4s var(--spring) calc(var(--k,0) * .25s + .3s) both,tiao-sway 7s ease-in-out calc(var(--k,0) * .9s + 1.8s) infinite alternate;color:#2b2620} .tiao:nth-child(2){margin-top:3rem} .tiao:nth-child(3){margin-top:1.125rem} [hidden]{display:none!important} button.btn{border:0;cursor:pointer;font-family:inherit} button.text-link{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 4px;font-family:var(--xw)} .btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)} .btn.ghost:hover{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:transparent} .tiao-rod{position:absolute;left:-0.5rem;right:-0.5rem;top:0.75rem;height:0.5rem;border-radius:0.25rem;background:linear-gradient(#6d5238,#3d2b1c)} .tiao-rod::before{content:"";position:absolute;left:50%;bottom:0.375rem;width:1px;height:7.5rem;background:rgba(80,60,40,.45)} .tiao p{writing-mode:vertical-rl;margin:0 auto;display:flex;gap:0.625rem;font:600 1.3125rem/1.25 var(--brush);letter-spacing:.18em;-webkit-text-stroke:.012em currentColor;justify-content:center} .tiao small{display:block;writing-mode:vertical-rl;margin:0.875rem auto 0;font-size:0.625rem;letter-spacing:.2em;color:#8a6a4a} .tiao-tassel{position:absolute;left:50%;bottom:-1.625rem;width:2px;height:1.625rem;margin-left:-1px;background:var(--cinnabar)} .tiao-tassel::after{content:"";position:absolute;left:-0.1875rem;bottom:-0.375rem;width:0.5rem;height:0.625rem;border-radius:2px 2px 0.25rem 0.25rem;background:var(--cinnabar)} @keyframes tiao-drop{from{transform:translateY(-110%)}to{transform:translateY(0)}} @keyframes tiao-sway{from{rotate:-1.1deg}to{rotate:1.1deg}} .theme-ink .scene-cheng .tiao,.theme-ink .scene-xue .tiao{opacity:.92} .about-head{position:relative} .page-head.has-art{position:relative;max-width:none} .has-art>:not(.shilian,.head-fan){max-width:60rem} .head-lian{right:calc(var(--gutter) + 6rem);top:1.25rem;flex-direction:row-reverse} /* 所作页头：四件作品的画面像扇面一样展开，鼠标移上去开得更大 */ .head-fan{position:absolute;right:calc(var(--gutter) + 16rem);top:58%;width:1px;height:1px} .head-fan span{position:absolute;left:0;top:0;width:19rem;aspect-ratio:16/10;margin:-5.9rem 0 0 -9.5rem;border-radius:1rem;overflow:hidden;box-shadow:0 1.5rem 2.5rem -1.4rem rgba(28,27,25,.6);transform-origin:50% 160%;transform:rotate(calc((var(--i) - 2) * 8deg));animation:fan-in 1.1s var(--spring) calc(.25s + var(--i) * .1s) both;transition:transform .6s var(--spring)} .head-fan span img{width:100%;height:100%;object-fit:cover} .head-fan:hover span{transform:rotate(calc((var(--i) - 2) * 12deg)) translateY(-.6rem)} .head-fan{pointer-events:auto} @keyframes fan-in{from{transform:rotate(0) translateY(2rem);opacity:0}} /* 八卦太极：第三集背景缓转 */ .bagua{position:absolute;z-index:0;right:-7.5rem;bottom:-8.75rem;width:min(45rem,58vw);opacity:.1;animation:spin 140s linear infinite;pointer-events:none} .bagua rect{fill:var(--fg)} .bagua .ring{fill:none;stroke:var(--fg);stroke-width:1.2} .bagua .yang{fill:var(--fg)} .bagua .yin{fill:var(--bg)} .bagua .taiji{animation:spin 40s linear infinite reverse} .scene-xue .scene-inner{z-index:1} /* 剑气：第二集出场时一道墨痕横扫 */ .jianqi{position:absolute;z-index:0;left:6%;top:16%;width:62%;pointer-events:none;opacity:.5} .jianqi path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000} .jianqi .thin{stroke-width:1.6;opacity:.6} .scene-zuo.is-on .jianqi path,.jianqi.seen path{transition:stroke-dashoffset 1.1s cubic-bezier(.7,0,.2,1) .2s;stroke-dashoffset:0} .scene-zuo .scene-inner{z-index:1} /* 星图 */ .starmap{padding:0.625rem var(--gutter) 5.625rem} .sky{display:block;width:100%;height:auto;max-height:78vh;overflow:visible} .sky .dust circle{fill:var(--fg)} .sky .orbit{fill:none;stroke:var(--line);stroke-dasharray:2 6} .sky .orbit.faint{opacity:.5} .sky .ticks line{stroke:var(--muted);stroke-width:1} .sky .side{font:600 0.9375rem var(--brush);fill:var(--muted);text-anchor:middle;letter-spacing:.3em} .sky .dipper{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.7} .sky .pointer{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 5} .sky .tl,.sky .wl{stroke:var(--line);stroke-width:1;transition:stroke .4s,opacity .4s} .sky .wl{stroke-dasharray:4 5} .sky .ts{fill:var(--fg);opacity:.7} .sky .tt{font-size:0.75rem;fill:var(--muted);opacity:0;transition:opacity .4s} .sky .ds{fill:var(--accent)} .sky .halo{fill:var(--accent);opacity:.18;transition:opacity .4s,r .4s} .sky .dn{font:600 1.25rem var(--brush);fill:var(--fg);text-anchor:middle} .sky .dk{font-size:0.8125rem;fill:var(--muted);text-anchor:middle} .sky .sg{cursor:pointer;transition:opacity .4s} .sky .ws circle{fill:none;stroke:#e6c27a;stroke-width:1.4} .sky .ws .core{fill:#f3dca0;stroke:none} .sky .ws text{font:600 0.9375rem var(--brush);fill:var(--fg);text-anchor:middle} .sky .ws{transition:opacity .4s} .sky .polaris circle{fill:#f3dca0} .sky .polaris .halo{fill:#f3dca0;opacity:.25} .sky .polaris text{font:600 1.125rem var(--brush);fill:var(--fg)} .sky .polaris .pn{font:0.75rem var(--sans);fill:var(--muted)} .theme-paper .sky .ws circle{stroke:#a6782c} .theme-paper .sky .ws .core,.theme-paper .sky .polaris circle{fill:#c08a2e} .sky.focus .sg,.sky.focus .ws{opacity:.18} .sky.focus .sg.on,.sky.focus .ws.on{opacity:1} .sky.focus .sg.on .tt{opacity:1} .sky.focus .sg.on .tl,.sky.focus .sg.on .wl{stroke:var(--accent)} .sky .sg:hover .halo,.sky .sg.on .halo{opacity:.4} .star-hint{display:flex;gap:1.25rem;align-items:center;justify-content:center;color:var(--muted);font-size:0.875rem;margin:0.5rem 0 2.125rem} .star-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16.25rem,1fr));gap:1rem} .star-pick{width:100%;height:100%;text-align:left;border:0;cursor:pointer;color:inherit;font:inherit;background:var(--surface);border-radius:1.375rem;padding:1.375rem;display:flex;flex-direction:column;gap:0.375rem;transition:transform .25s var(--spring),box-shadow .3s} .star-pick:hover,.star-pick.on{box-shadow:inset 0 0 0 1.5px var(--accent)} .star-pick:active{transform:scale(.98)} .sp-star{font:600 1rem var(--brush);color:var(--accent)} .star-pick strong{font:600 1.5rem var(--brush)} .sp-desc{font-size:0.9375rem;color:var(--muted)} .sp-row{font-size:0.8125rem;color:var(--muted)} .sp-row em{font-style:normal;color:var(--fg);margin-right:0.5rem} /* 星图会动：星尘绕北辰缓转，二十八宿外环反向慢转，北斗连线流动，偶有流星；可缩放、拖动、飞向一颗星 */ .sky-wrap{position:relative;border-radius:1.5rem;overflow:hidden;background:radial-gradient(ellipse at 60% 30%,rgba(243,220,160,.06),transparent 60%)} .sky.grab{cursor:grab} .sky.grabbing{cursor:grabbing} .sky{position:relative} /* 星尘单独一层，由合成器转动；缩放时只放大一半，显出远近 */ .dust-layer{position:absolute;left:-40%;top:-63%;width:180%;height:226%;pointer-events:none;will-change:transform;transition:transform .12s linear} .dust-svg{display:block;width:100%;height:100%;transform-origin:58.6% 32.9%;animation:spin 360s linear infinite;will-change:transform} .dust-svg circle{fill:var(--fg)} .sky .ring{transform-box:view-box;transform-origin:500px 310px;animation:spin 600s linear infinite reverse} .dust-svg .tw{animation:twinkle 3.4s ease-in-out infinite alternate} @keyframes twinkle{to{opacity:.08}} .sky .dipper{stroke-dasharray:10 6;animation:flow 6s linear infinite} @keyframes flow{to{stroke-dashoffset:-64}} .sky .ds{transform-box:fill-box;transform-origin:center;animation:breathe 3.6s ease-in-out infinite alternate} @keyframes breathe{to{transform:scale(1.25)}} .sky .meteors path{fill:none;stroke:#fff6dc;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:46 420;stroke-dashoffset:46;opacity:0;animation:meteor 11s linear infinite} .sky .meteors path:nth-child(2){animation-delay:4s;animation-duration:13s} .sky .meteors path:nth-child(3){animation-delay:8.5s;animation-duration:15s} @keyframes meteor{0%{stroke-dashoffset:46;opacity:0}1%{opacity:1}8%{stroke-dashoffset:-240;opacity:0}100%{stroke-dashoffset:-240;opacity:0}} .theme-paper .sky .meteors path{stroke:#a6782c} .warp{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(243,220,160,0) 0deg 2.6deg,rgba(243,220,160,.55) 2.8deg 3deg);-webkit-mask:radial-gradient(circle,transparent 14%,#000 72%);mask:radial-gradient(circle,transparent 14%,#000 72%)} .warp.on{animation:warp 1s ease-out} @keyframes warp{0%{opacity:0;transform:scale(.6)}35%{opacity:.85}100%{opacity:0;transform:scale(1.9)}} .sky-ctrl{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.5rem} .sky-ctrl button{width:2.5rem;height:2.5rem;border:0;border-radius:50%;cursor:pointer;color:var(--fg);font:1.1rem var(--sans);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s var(--spring)} .sky-ctrl button:hover{color:var(--accent)} .sky-ctrl button:active{transform:scale(.92)} .sky-tip{position:absolute;left:1rem;bottom:1.3rem;margin:0;font-size:.8rem;color:var(--muted);pointer-events:none} /* 通关文牒 */ .wendie{padding:1.25rem var(--gutter) 3.75rem} .wd-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 1.5rem} .wd-head .section-title{margin:0} .wd-head p{color:var(--muted);font-size:0.9375rem} .wd-count b{font:600 1.5rem var(--brush);color:var(--accent);margin:0 2px} .wd-seals{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem} .wd-seals a{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1.375rem 0.625rem;border-radius:1.375rem;background:var(--surface);text-align:center} .wd-seal{width:4rem;height:4rem;display:grid;place-items:center;border-radius:0.625rem;font:600 2.125rem var(--brush);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);transform:rotate(-6deg);transition:all .5s var(--spring)} .wd-seals li.got .wd-seal{background:var(--cinnabar);color:var(--paper);box-shadow:inset 0 0 0 0.1875rem var(--cinnabar),inset 0 0 0 0.3125rem rgba(241,235,221,.7)} .wd-seals li.got.fresh .wd-seal{animation:stamp .7s var(--ease) both} .wd-name{font:600 1.125rem var(--brush)} .wd-state{font-size:0.75rem;color:var(--muted)} .wd-bonus{margin-top:1.375rem;padding:1.875rem;border-radius:1.625rem;background:linear-gradient(120deg,rgba(176,54,43,.12),rgba(230,194,122,.16));text-align:center} .wd-done{font:600 1.625rem var(--brush);margin:0.5rem 0} /* 试笔 */ .shibi-paper{border-radius:1.125rem;overflow:hidden;background:#f3ecdc;box-shadow:inset 0 0 0 1px rgba(120,90,60,.25);touch-action:none} .shibi-paper canvas{display:block;width:100%;height:auto;cursor:crosshair} .sb-save{background:none;border:0;cursor:pointer;color:inherit;font:inherit;padding:0 0 0.25rem} /* ---------- 内页 ---------- */ .page-head{padding:clamp(3.5rem,9vw,8.125rem) var(--gutter) 1.875rem;max-width:75rem} .page-head .display{font-size:clamp(3.75rem,7.6vw,8rem);line-height:1.12;margin:1.125rem 0 1.875rem} .section-title{display:flex;align-items:center;gap:1rem;font:600 1.3rem var(--brush);letter-spacing:.2em;color:var(--fg);margin-bottom:1.6rem} .section-title::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);flex:none} .section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} .wd-head .section-title::after{display:none} .index-wrap,.catalog,.methods,.about{padding:3.125rem var(--gutter) 5.625rem} .index{list-style:none;margin:0;padding:0} .index li+li{border-top:1px solid var(--line)} .entry{display:grid;grid-template-columns:5em 1fr 15em 11em;gap:1.5rem;align-items:center;padding:1.625rem 0;transition:transform .25s var(--spring)} .entry-img{display:none} .entry-no{font:1.375rem var(--brush);color:var(--accent)} .entry-name{font:600 clamp(2.375rem,4.4vw,4.25rem)/1.2 var(--brush);transition:color .35s,transform .5s var(--ease);transform-origin:left} .entry:hover .entry-name,.entry:focus-visible .entry-name{color:var(--accent);transform:translateX(1.125rem) rotate(-2deg)} .entry-tag{font:1.125rem var(--xw);color:var(--muted);letter-spacing:.08em} .entry-meta{font-size:0.875rem;color:var(--muted);line-height:2} /* 卷片轮播：叠放交替淡入，当前一张缓缓拉远；一道纸边光扫过，像展开一段卷轴 */ .reel{position:relative;aspect-ratio:16/10;border-radius:1.5rem;overflow:hidden;background:#d9cfbb;box-shadow:var(--shadow),inset 0 0 0 1px rgba(28,27,25,.08);isolation:isolate;touch-action:pan-y} .reel-track{position:absolute;inset:0} .reel-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s var(--ease);z-index:0} .reel-slide.is-on{opacity:1;z-index:1} .reel-slide :is(img,video){width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 8s cubic-bezier(.25,.6,.3,1);background:#d9cfbb} .reel-slide.is-on :is(img,video){transform:scale(1)} .reel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 .55rem rgba(241,235,221,.0),inset 0 0 3.5rem rgba(28,27,25,.28);background:linear-gradient(180deg,transparent 52%,rgba(20,17,13,.38) 75%,rgba(20,17,13,.72))} .reel-slide figcaption{position:absolute;z-index:3;left:1.4rem;bottom:1.1rem;right:9rem;margin:0;color:#f6ecd4;font:.875rem/1.5 var(--sans);letter-spacing:.06em;text-shadow:0 1px 6px rgba(0,0,0,.5);opacity:0;transform:translateY(.4rem);transition:opacity .6s .3s,transform .6s .3s var(--ease)} .reel-slide.is-on figcaption{opacity:1;transform:none} .reel-sweep{position:absolute;z-index:3;top:0;bottom:0;left:0;width:22%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(250,240,215,.38) 45%,rgba(250,240,215,.55) 50%,rgba(250,240,215,.38) 55%,transparent);transform:translateX(calc(var(--dir,1) * 520%))} .reel.sweeping .reel-sweep{animation:reel-sweep 1.1s var(--ease)} @keyframes reel-sweep{from{opacity:1;transform:translateX(calc(var(--dir,1) * 520%))}to{opacity:0;transform:translateX(calc(var(--dir,1) * -120%))}} .reel-ui{position:absolute;z-index:4;right:1rem;bottom:.85rem;display:flex;align-items:center;gap:.35rem} .reel-dots{display:flex;gap:.3rem;list-style:none;margin:0;padding:0} .reel-dots button{display:block;width:1.6rem;height:1.4rem;padding:0;border:0;background:none;cursor:pointer} .reel-dots i{display:block;height:2px;background:rgba(246,236,212,.38);border-radius:2px;overflow:hidden;position:relative} .reel-dots i::after{content:"";position:absolute;inset:0;background:#f6ecd4;transform:scaleX(0);transform-origin:left} .reel-dots [aria-current] i::after{transform:scaleX(1)} .reel.ticking .reel-dots [aria-current] i::after{animation:reel-tick var(--dur,5.2s) linear both} @keyframes reel-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}} .reel-btn{display:grid;place-items:center;width:1.9rem;height:1.9rem;border:0;border-radius:50%;background:rgba(20,17,13,.38);color:#f6ecd4;font:1.15rem/1 var(--sans);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:.75;transition:opacity .3s,background .3s,transform .25s var(--spring)} .reel:hover .reel-btn,.reel-btn:focus-visible{opacity:1} .reel-btn:hover{background:var(--cinnabar)} .reel-btn:active{transform:scale(.92)} /* 装裱角花：四角各一道细回纹折角 */ .reel::before{content:"";position:absolute;inset:.7rem;z-index:3;pointer-events:none;--c:rgba(246,236,212,.55);background: linear-gradient(var(--c),var(--c)) 0 0/1.4rem 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 1.4rem, linear-gradient(var(--c),var(--c)) 100% 0/1.4rem 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 1.4rem, linear-gradient(var(--c),var(--c)) 0 100%/1.4rem 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 1.4rem, linear-gradient(var(--c),var(--c)) 100% 100%/1.4rem 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 1.4rem;background-repeat:no-repeat} /* 所作 · 展柜：文字与卷片左右交替 */ .exhibits{display:grid;gap:clamp(3.5rem,7vw,6.5rem);padding-top:1rem} .index.exhibits li+li{border-top:0} .exhibit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative} .exhibit.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .exhibit.flip .ex-text{order:2} .ex-text{display:grid;gap:.85rem;justify-items:start;position:relative} .ex-text::before{content:"";position:absolute;left:-1.6rem;top:.4rem;bottom:.4rem;width:1px;background:linear-gradient(transparent,var(--line),transparent)} .ex-no{display:flex;align-items:center;gap:.9rem} .ex-series{font:.8125rem var(--sans);letter-spacing:.32em;color:var(--muted);padding:.15rem .7rem;border-radius:62rem;box-shadow:inset 0 0 0 1px var(--line)} .ex-text h3{margin:0} .ex-text .entry-name{display:inline-block} .ex-text .entry-name:hover{color:var(--accent);transform:translateX(.6rem) rotate(-2deg)} .ex-text .entry-meta{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center} .ex-members{font-size:.9375rem;color:var(--muted)} .ex-members span{font:.75rem var(--sans);letter-spacing:.3em;color:var(--accent);margin-right:.8rem} .ex-members i{font-style:normal;color:var(--ochre)} .ex-text .text-link{margin-top:.6rem} /* 千里江山长卷带：缓缓向左流动，两端隐入纸色 */ .qianli-band{position:relative;height:clamp(6rem,10vw,9rem);margin:1rem 0 2rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-composite:intersect;opacity:.62} .qianli-band span{position:absolute;inset:0 auto 0 0;width:400%;background:var(--src) 0 50%/auto 100% repeat-x;animation:qianli 160s linear infinite;mix-blend-mode:multiply} .qianli-band.alt span{animation-duration:200s;animation-direction:reverse} .theme-ink .qianli-band{opacity:.38} .theme-ink .qianli-band span{mix-blend-mode:normal;filter:brightness(.8)} @keyframes qianli{to{transform:translateX(-50%)}} /* 分隔纹 */ .fenge{display:flex;justify-content:center;padding:1rem var(--gutter)} .fenge svg{width:min(36rem,80%);height:auto;fill:none;stroke:var(--accent);stroke-width:1;opacity:.55} .fenge svg path:first-child{stroke:var(--line);opacity:1} .fenge svg g path{stroke-width:1.4} .fenge.in-sheet{padding:2.5rem 0 1rem} /* 内页飘云：页头上方几朵卷云缓慢横移 */ main{position:relative} .piao{position:absolute;inset:0 0 auto;height:44rem;overflow:hidden;pointer-events:none;z-index:0} .piao i{position:absolute;width:11rem;height:3.4rem;opacity:.22;background:currentColor;color:var(--ochre);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 68'%3E%3Cpath d='M4 54h74c0-14 10-22 22-22 14 0 20 10 20 18 0 7-5 11-11 11-5 0-8-3-8-7M110 54h70c-2-10 4-17 13-17 8 0 12 6 12 11 0 4-3 7-7 7M60 40c4-16 18-26 34-24 12 2 20 12 18 22' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%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 220 68'%3E%3Cpath d='M4 54h74c0-14 10-22 22-22 14 0 20 10 20 18 0 7-5 11-11 11-5 0-8-3-8-7M110 54h70c-2-10 4-17 13-17 8 0 12 6 12 11 0 4-3 7-7 7M60 40c4-16 18-26 34-24 12 2 20 12 18 22' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:piao 70s linear infinite} .piao i:nth-child(1){top:7rem;left:52%;animation-duration:80s} .piao i:nth-child(2){top:19rem;left:78%;width:8rem;animation-duration:64s;animation-delay:-20s} .piao i:nth-child(3){top:30rem;left:30%;width:14rem;opacity:.14;animation-duration:96s;animation-delay:-50s} .piao i:nth-child(4){top:12rem;left:8%;width:7rem;opacity:.16;animation-duration:72s;animation-delay:-35s} @keyframes piao{0%{transform:translateX(0)}50%{transform:translateX(-6rem)}100%{transform:translateX(0)}} main>section,main>.fenge,main>.qianli-band,main>.detail,main>.next-act{position:relative;z-index:1} /* 详情页：同卷系列 */ .series{margin-top:1rem} .series-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.5rem} .series-list li{display:grid;gap:1rem;align-content:start} .series-img{display:block;aspect-ratio:16/10;border-radius:1.1rem;overflow:hidden;box-shadow:0 1.2rem 2.4rem -1.6rem rgba(28,27,25,.6)} .series-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .series-list li:hover .series-img img{transform:scale(1.05)} .series-name{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .series-name strong{font:600 1.375rem var(--brush);letter-spacing:.06em} .series-list p:not(.series-name){color:var(--muted);font-size:.9375rem;max-width:30em} /* 详情页两侧：竖向回纹 */ .detail{position:relative} .detail::before,.detail::after{content:"";position:absolute;top:calc(min(72vh,58vw) - 4rem);bottom:6rem;width:.875rem;opacity:.4;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='28' viewBox='0 0 14 28'%3E%3Cpath d='M13 0V13H1V3H10V10H4V6H7' fill='none' stroke='%238a6a4a' stroke-width='1.2'/%3E%3Cpath d='M13 28V15H1V25H10V18H4V22H7' fill='none' stroke='%238a6a4a' stroke-width='1.2'/%3E%3C/svg%3E") repeat-y;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)} .detail::before{left:calc((100% - 77.5rem) / 2 - 2.6rem)} .detail::after{right:calc((100% - 77.5rem) / 2 - 2.6rem);transform:scaleX(-1)} .catalog-list{list-style:none;margin:0;padding:0} .catalog-list li{display:grid;grid-template-columns:12em 1fr auto;gap:1.5rem;align-items:center;padding:1.5rem 0;border-top:1px solid var(--line)} .catalog-list strong{font:400 1.625rem var(--xw);letter-spacing:.06em} .catalog-list p{color:var(--muted)} .catalog-list .meta{display:flex;gap:0.375rem;align-items:center;font-size:0.875rem;margin-top:0.25rem} .detail{padding-bottom:3.75rem} .detail-cover{position:relative;margin:1.25rem var(--gutter) 0;height:min(72vh,58vw);border-radius:1.75rem;overflow:hidden;box-shadow:var(--shadow)} .detail-cover .reel{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none} .detail-cover .reel-slide:first-child img{view-transition-name:cover} .detail-cover .reel-ui{bottom:calc(8.75rem + 1rem)} .detail-cover .reel-slide figcaption{top:1rem;bottom:auto;left:auto;right:1rem;padding:.375rem .875rem;border-radius:62rem;background:rgba(28,27,25,.55);backdrop-filter:blur(.625rem);-webkit-backdrop-filter:blur(.625rem);font-size:.8125rem;text-shadow:none} .detail-cover .reel::after{background:linear-gradient(180deg,transparent 55%,rgba(20,17,13,.4))} .cover-m{display:none} .detail-cover>.cap-m{display:none} .detail-cover figcaption{position:absolute;top:1rem;right:1rem;margin:0;padding:0.375rem 0.875rem;border-radius:62.4375rem;background:rgba(28,27,25,.55);color:var(--paper);font-size:0.8125rem;backdrop-filter:blur(0.625rem);-webkit-backdrop-filter:blur(0.625rem)} .sheet{position:relative;z-index:2;max-width:77.5rem;margin:-8.75rem auto 0;padding:clamp(2rem,4vw,4rem);background:var(--surface);border-radius:2rem;box-shadow:0 -0.625rem 3.75rem -1.875rem rgba(28,27,25,.35)} .grabber{display:none} .crumb{display:flex;gap:0.625rem;font:0.875rem var(--sans);color:var(--muted);letter-spacing:.15em} .crumb a:hover{color:var(--accent)} .detail-head{padding:clamp(1.75rem,4vw,3.5rem) 0 1.25rem} .detail-head .display{font-size:clamp(2.75rem,5.4vw,5.75rem);line-height:1.18;margin:0.875rem 0 1.125rem} .tagline{font:clamp(1.1875rem,1.8vw,1.5rem) var(--xw);color:var(--muted);letter-spacing:.1em} .detail-body{display:grid;grid-template-columns:minmax(15rem,3.5fr) 8fr;gap:clamp(2.25rem,6vw,6.25rem);margin:clamp(3rem,6vw,5.625rem) 0} .zhulu-card{align-self:start;position:sticky;top:6.875rem} .zhulu{margin:1.125rem 0 0;display:grid;gap:1.125rem} .zhulu div{display:flex;flex-direction:column} .zhulu dt{font:500 0.75rem var(--sans);color:var(--muted);letter-spacing:.3em} .zhulu dd{margin:0} .zhulu dd a,.catalog-list a.pill{color:var(--azure)} .prose section{padding-bottom:2.5rem} .prose h2{display:flex;align-items:baseline;gap:1rem;font:clamp(1.625rem,2.3vw,2rem) var(--xw);letter-spacing:.08em;margin-bottom:0.875rem} .prose h2 .sub{font:500 0.8125rem var(--sans);color:var(--accent);letter-spacing:.3em} .prose p{max-width:38em;font-size:1.0625rem} .tech i{font-style:normal;color:var(--ochre)} .shots{display:grid;grid-template-columns:1fr auto;gap:clamp(1.75rem,4vw,4rem);align-items:end} .shot img{border-radius:1.25rem;box-shadow:var(--shadow);aspect-ratio:16/10;object-fit:cover;width:100%} .shot.phone{width:clamp(12.5rem,19vw,17.5rem)} .shot.phone img{aspect-ratio:390/844;border-radius:2.375rem;border:0.4375rem solid var(--ink)} .shots .shot:only-child{grid-column:1/-1;justify-self:center} figcaption{font-size:0.875rem;color:var(--muted);margin-top:0.875rem} .pager{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:5rem;padding-top:2rem;border-top:1px solid var(--line)} .pager a{display:flex;flex-direction:column;font:600 clamp(1.625rem,2.6vw,2.5rem)/1.3 var(--brush);transition:color .3s} .pager a .sub{font:500 0.8125rem var(--sans);color:var(--muted);letter-spacing:.15em} .pager a:last-child{text-align:right} .pager a:hover{color:var(--accent)} .methods{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem} .method{background:var(--surface);border-radius:1.75rem;padding:clamp(1.75rem,3vw,3rem);box-shadow:0 1.25rem 3.125rem -2.125rem rgba(28,27,25,.4)} .method .num{font:3.75rem/1 var(--brush);color:var(--accent)} .method h2{font:clamp(1.625rem,2.4vw,2.125rem) var(--xw);letter-spacing:.06em;margin:1.125rem 0 1.375rem} .steps{list-style:none;padding:0;margin:0 0 1.375rem;display:flex;flex-wrap:wrap;gap:0.625rem} .steps li{font-size:0.9375rem;padding:0.375rem 0.875rem;border-radius:62.4375rem;background:rgba(138,106,74,.1)} .method p{color:var(--muted)} .methods .pending{grid-column:1/-1;margin-top:0.75rem} .about{display:grid;grid-template-columns:auto 1fr;gap:clamp(2.5rem,7vw,7.5rem);max-width:75rem} .about-seal{display:flex;flex-direction:column;align-items:center;gap:1.25rem} .about .lead{font:600 clamp(1.5rem,2.3vw,2rem)/1.6 var(--brush);color:var(--fg);margin-bottom:1.375rem;-webkit-text-stroke:.012em currentColor} .about-intro p:last-child{max-width:40em;font-size:1.0625rem;line-height:2} .about-cards,.about-more{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:0 var(--gutter) 1.5rem} .about-more{padding-bottom:5.625rem} .about-card{background:var(--surface);border-radius:1.75rem;padding:clamp(1.5rem,2.6vw,2.5rem);box-shadow:0 1.25rem 3.125rem -2.125rem rgba(28,27,25,.4)} .about-card.wide{grid-column:1/-1} .about-card h2{font:600 clamp(1.5rem,2.2vw,1.875rem) var(--brush);margin:0.625rem 0 1.125rem} .about-card ul{list-style:none;margin:0;padding:0;display:grid;gap:0.875rem} .about-card li{position:relative;padding-left:1.125rem;font-size:1rem;line-height:1.75} .about-card li::before{content:"";position:absolute;left:0;top:.72em;width:0.375rem;height:0.375rem;border-radius:50%;background:var(--cinnabar)} .about-card .cloud{margin:1.375rem 0 0} .tool-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .tool-groups h3{font:500 0.8125rem var(--sans);letter-spacing:.24em;color:var(--muted);margin-bottom:0.625rem} .tools{display:flex;flex-wrap:wrap;gap:0.5rem} .tools span{padding:0.3125rem 0.8125rem;border-radius:62.4375rem;background:rgba(138,106,74,.1);font-size:0.875rem} /* 英文版：拉丁字母不用中文的宽字距 */ .lang-en :is(.site-nav,.display,.vert-title,.juanmu a,.entry-name,.tenets h3,.card strong,.prose h2,.pager a,.text-link,.tagline,.btn,.crumb,.zhulu dt,.brand-text,.kuan small,.entry-tag,.about-card h2,.tabbar a,.vert){letter-spacing:.01em} .lang-en :is(.label,.section-title,.tool-groups h3,.axis,.prose h2 .sub,.pager a .sub){letter-spacing:.14em;text-transform:uppercase} .lang-en .display,.lang-en .entry-name{font-weight:600} .lang-en .display .l2{margin-left:.8em} .lang-en .tenets h3{font-size:clamp(1.5rem,2.1vw,1.875rem)} /* 墨晕显影 */ .js .ink img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 var(--r),transparent calc(var(--r) + 18%));mask-image:radial-gradient(circle at 50% 50%,#000 var(--r),transparent calc(var(--r) + 18%));--r:0%;transition:--r 1.4s var(--ease)} .js .ink.seen img{--r:150%} /* 页面切换 */ ::view-transition-group(cover){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)} /* 新页面像卷轴一样自右向左展开，边缘是一道柔和的墨晕；旧页面轻轻退暗 */ ::view-transition-old(root){animation:.7s var(--ease) both vt-out} ::view-transition-new(root){animation:.8s var(--ease) both vt-unroll;-webkit-mask-image:linear-gradient(90deg,transparent 44%,#000 56%);mask-image:linear-gradient(90deg,transparent 44%,#000 56%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} @keyframes vt-out{to{opacity:.35;transform:translateX(-1.5%)}} @keyframes vt-unroll{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}} /* 页脚荷塘：荷叶与莲苞随机生成，鼠标掠过泛起水纹 */ .shanshui .pond-leaf{fill:var(--muted);opacity:.2} .shanshui .pond-vein{fill:none;stroke:var(--bg);stroke-width:1;opacity:.6} .shanshui .pond-stem{stroke:var(--muted);stroke-width:1.2;opacity:.35;fill:none} .shanshui .pond-bud{fill:var(--cinnabar-lt);opacity:.55} .shanshui .ripple{fill:none;stroke:var(--muted);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ripple 1.8s ease-out forwards} @keyframes ripple{from{opacity:.6;transform:scale(.2)}to{opacity:0;transform:scale(2.4)}} /* 治学 · 藕花深处 */ .ouhua{padding:3.125rem var(--gutter) 1rem} .oh-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.5rem 4rem;margin-bottom:2.5rem} .oh-title{display:flex;flex-direction:column;gap:.7rem;font:600 clamp(2.4rem,3.6vw,3.8rem)/1 var(--brush);-webkit-text-stroke:.016em currentColor} .oh-title .sub{font:500 .8rem var(--sans);letter-spacing:.4em;color:var(--accent);-webkit-text-stroke:0} .oh-head .lead{max-width:28em;color:var(--fg)} .oh-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem} .oh-steps::before{content:"";position:absolute;left:2%;right:2%;top:2.4rem;height:1px;background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent)} .oh-step{position:relative;display:flex;flex-direction:column;padding:1.25rem 1.2rem 1.4rem;border-radius:1.5rem;background:var(--surface);box-shadow:0 1.25rem 3rem -2.1rem rgba(28,27,25,.45)} .oh-bud{display:block;position:relative;width:2.6rem;height:2.4rem;margin-bottom:.6rem} .oh-bud .bud{left:50%;top:100%;width:2.6rem;height:2.3rem;transform:translate(-50%,-100%)} .oh-stage{font:500 .75rem var(--sans);letter-spacing:.3em;color:var(--accent)} .oh-step h3{font:600 1.55rem var(--brush);margin:.2rem 0 .9rem} .oh-step dl{margin:0;display:grid;gap:.75rem} .oh-step dt,.oh-case dt{font:500 .7rem var(--sans);letter-spacing:.24em;color:var(--muted)} .oh-step dd{margin:0;font-size:.9rem;line-height:1.7} .oh-case{margin-top:1.25rem;padding:1.75rem 2rem;border-radius:1.75rem;background:linear-gradient(120deg,rgba(176,54,43,.09),rgba(230,194,122,.16))} .oh-case h3{font:600 1.5rem var(--brush);margin-bottom:1rem} .oh-case dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .oh-case dd{margin:.3rem 0 0;font-size:.95rem} /* 拾遗：空竹简 */ .notes{padding:3rem var(--gutter) 5.6rem} .note-shelf{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:1.5rem} .note-blank{position:relative;width:5.5rem;height:20rem;display:grid;place-items:center;border-radius:.6rem;background:linear-gradient(90deg,#d9c9a3,#ecdfc0 45%,#d6c49c);box-shadow:0 1.2rem 2rem -1.4rem rgba(60,40,20,.6);transform:rotate(calc((var(--i) - 1) * 2deg))} .note-blank span{writing-mode:vertical-rl;font:600 1.6rem var(--brush);letter-spacing:.6em;color:rgba(60,45,30,.35)} .note{display:flex;flex-direction:column;gap:.3rem;padding:1.5rem;border-radius:1.5rem;background:var(--surface)} .note strong{font:600 1.6rem var(--brush)} /* 雅好 · 琴书行 */ .yahao{padding:2rem var(--gutter) 5.6rem;display:grid;gap:1.5rem} .yh{display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:3rem;align-items:center;padding:clamp(1.5rem,3vw,3rem);border-radius:2rem;background:var(--surface);box-shadow:0 1.25rem 3rem -2.1rem rgba(28,27,25,.45)} .yh h2{font:600 2.2rem var(--brush);margin-bottom:.8rem;-webkit-text-stroke:.016em currentColor} .yh-text p{color:var(--muted)} .qintai.big{justify-self:start;gap:1.6rem;padding:1.1rem 2.2rem 1.1rem 1.1rem;background:var(--bg)} .qintai.big .qt-btn{width:7.5rem;height:7.5rem} .qintai.big .qt-text b{font-size:1.7rem} .qintai.big .qt-bar{width:12rem} .yh-art{margin:0} .yh-art img{width:100%;height:24rem;object-fit:cover;object-position:50% 68%;border-radius:1.25rem;filter:saturate(.7) sepia(.1)} .see-also{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 3rem} .see-also .label{width:100%} .see-also a{font:600 1.7rem var(--brush);transition:color .3s} .see-also a:hover{color:var(--accent)} .about-more{grid-template-columns:repeat(2,1fr)} /* 排版细节 */ h1,h2,h3,.display,.lead,.tagline{text-wrap:balance} .page-head .lead{max-width:32em} .prose p,.about-intro p:last-child{max-width:36em} .label{display:inline-flex;align-items:center;gap:.7rem} .label::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.7} /* 阅读进度：页头下一条朱线 */ .read-line{position:fixed;left:0;top:4.75rem;z-index:31;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--read,0));pointer-events:none;opacity:.8} /* 下一幕：片尾预告式的整幅卡片 */ .next-act{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin:3rem var(--gutter) 4rem;min-height:22rem;padding:2.6rem 3rem;border-radius:2rem;overflow:hidden;color:#f6ecd4;isolation:isolate;box-shadow:0 2.4rem 4rem -2.6rem rgba(28,27,25,.7)} .next-act img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:sepia(.25) brightness(.62);transform:scale(1.04);transition:transform 2.4s cubic-bezier(.2,.7,.2,1),filter .8s} .next-act::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,12,9,.82),rgba(14,12,9,.25) 65%,rgba(14,12,9,.1))} .next-act:hover img{transform:scale(1.12);filter:sepia(.15) brightness(.72)} .na-text{display:grid;gap:.4rem} .na-kicker{font:500 .75rem var(--sans);letter-spacing:.5em;color:#e7b98a} .na-no{font:600 1.1rem var(--brush);letter-spacing:.3em;color:#e9dcbd} .na-name{font:600 clamp(3.4rem,6vw,6rem)/1.05 var(--brush);letter-spacing:.12em;-webkit-text-stroke:.014em currentColor} .na-line{font:600 1.15rem var(--brush);letter-spacing:.14em;color:#e9dcbd} .na-arrow{display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:50%;flex:none;font-size:1.6rem;background:rgba(246,236,212,.12);box-shadow:inset 0 0 0 1px rgba(246,236,212,.4);transition:transform .5s var(--spring),background .3s} .next-act:hover .na-arrow{transform:translateX(.5rem);background:var(--cinnabar)} .lang-en .na-name,.lang-en .na-no,.lang-en .na-line{letter-spacing:.02em} /* 详情页读完：文牒进度 */ .wd-note{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding:1rem 1.4rem;border-radius:1rem;background:rgba(176,54,43,.07);font-size:.95rem} .wd-note .seal{width:2.2rem;height:2.2rem;font-size:1.1rem;border-radius:.3rem} .wd-note a{margin-left:auto;color:var(--accent)} /* 首页底部：提示下一幕 */ .axis-hint b{font:600 1.05rem var(--brush);color:var(--fg);margin:0 .3rem;letter-spacing:.15em} /* ---------- 手机：App 形态 ---------- */ @media (prefers-reduced-motion:reduce){ .tiao,.bagua,.bagua .taiji{animation:none!important} .opening,.petals,.mist{display:none!important} .jianqi path{stroke-dashoffset:0!important} html{scroll-behavior:auto} *,*::before,*::after{transition-duration:0s!important;animation:none!important} .js .ink img{--r:150%} .roller{display:none} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} } /* ---------- 第十六版：墨路串幕 + 卷尾长卷收束 ---------- */ /* 进度线换成一条墨路：底下一道淡墨，随滚动用浓墨描出来；莲的小剪影沿路走，莲苞在路的尽头随之开 */ .axis-line{height:1.25rem;background:none} .lu{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible} .lu path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round} .lu-base{stroke:var(--line);stroke-width:1.2} .lu-ink{stroke:var(--cinnabar-lt);stroke-width:2.4;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--q,0))} .lu-walker{position:absolute;left:var(--p,0%);bottom:.55rem;height:2.1rem;width:auto;transform:translateX(-50%);transition:left .2s;animation:lu-step 1.1s ease-in-out infinite;pointer-events:none} .lu-walker.dk{display:none} body.on-gate .lu-walker.dk,.theme-paper .lu-walker.dk{display:block} body.on-gate .lu-walker.lt,.theme-paper .lu-walker.lt{display:none} body.on-gate .lu-ink{stroke:var(--cinnabar)} @keyframes lu-step{50%{transform:translate(-50%,-.12rem)}} .axis .bud{left:100%;transform:translate(-50%,-62%)} /* 卷尾：一张深色书案，六幕的画横向相接成卷；镜头由 app.js 按滚动推拉（只改 transform） */ .juan-end{position:relative;height:340svh;background:#15130f;color:#efe4cc;--fg:#efe4cc;--muted:#a99c84} .je-stage{position:sticky;top:0;height:100svh;overflow:hidden} .je-juan{position:absolute;left:0;top:0;display:flex;width:max-content;transform-origin:0 0;will-change:transform;--ph:100svh} .je-body{position:relative;flex:none;display:flex;height:var(--ph);background:#ece2cc;transform-origin:0 50%;transition:transform .9s cubic-bezier(.6,0,.3,1)} .je-p{position:relative;flex:none;height:100%;aspect-ratio:16/9;display:block} .je-p img{width:100%;height:100%;object-fit:cover;display:block} .je-cap{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font:600 calc(var(--ph) * .045) var(--brush);letter-spacing:.3em;color:#3a3226;opacity:var(--m,0);white-space:nowrap;transition:color .3s} .je-p:hover .je-cap,.je-p:focus-visible .je-cap{color:var(--cinnabar)} .je-p:focus-visible{outline:calc(var(--ph) * .006) solid var(--cinnabar);outline-offset:-1%} /* 骑缝章：半枚在左段、半枚在右段 */ .je-seam{position:absolute;left:0;top:14%;transform:translateX(-50%);opacity:calc(var(--m,0) * .85)} .je-seam .seal,.je-yin .seal,.je-ba .seal{width:calc(var(--ph) * .07);height:calc(var(--ph) * .07);font-size:calc(var(--ph) * .04)} .je-yin{flex:none;height:100%;width:calc(var(--ph) * .55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;background:linear-gradient(90deg,#e4d6b8,#ece2cc);color:#2a2620} .je-big{font:calc(var(--ph) * .34)/1 var(--brush)} .je-small{writing-mode:vertical-rl;font:calc(var(--ph) * .045) var(--brush);letter-spacing:.4em;color:#5a4f3e} .lang-en .je-small{writing-mode:horizontal-tb;letter-spacing:.06em} .je-ba{flex:none;height:100%;width:calc(var(--ph) * .8);display:flex;align-items:center;justify-content:center;gap:calc(var(--ph) * .05);padding:0 calc(var(--ph) * .05);background:linear-gradient(90deg,#ece2cc,#e4d6b8);color:#2a2620} .je-ba p{writing-mode:vertical-rl;font:calc(var(--ph) * .042)/1.9 var(--brush);letter-spacing:.3em;margin:0} .lang-en .je-ba p{writing-mode:horizontal-tb;letter-spacing:.02em;font-size:calc(var(--ph) * .036);line-height:1.6} .je-ba img{height:62%;width:auto;aspect-ratio:385/960} .je-ba .seal{align-self:flex-end;margin-bottom:16%} .je-lu{position:absolute;left:3%;right:3%;bottom:3.5%;width:94%;height:2.4%;overflow:visible;pointer-events:none} .je-lu path{fill:none;stroke:#3a3226;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--r2,0));opacity:.55} /* 装裱：两根轴、天头地头，镜头拉远后才显出来 */ .je-rod{flex:none;align-self:center;width:calc(var(--ph) * .05);height:calc(var(--ph) * 1.2);margin:0 -1px;border-radius:calc(var(--ph) * .02);background:linear-gradient(90deg,#5a3f28,#b08458 45%,#5a3f28);opacity:var(--m,0);box-shadow:0 0 calc(var(--ph) * .08) rgba(0,0,0,.6)} .je-body::before,.je-body::after{content:"";position:absolute;left:0;right:0;height:9%;background:#b9a57e;opacity:var(--m,0)} .je-body::before{bottom:100%} .je-body::after{top:100%} .je-line{position:absolute;left:0;right:0;top:24%;text-align:center;margin:0;font:clamp(1.6rem,3vw,2.6rem) var(--brush);letter-spacing:.24em;opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 1rem))} .lang-en .je-line{letter-spacing:.02em} .je-sub{display:block;font:.85rem var(--sans);letter-spacing:.4em;color:var(--muted);margin-bottom:.9rem} .je-actions{position:absolute;left:0;right:0;bottom:22%;text-align:center;margin:0;opacity:var(--t,0)} .juan-end:not(.done) .je-actions,.juan-end:not(.done) .je-p{pointer-events:none} .je-rod.r{transition:transform .9s cubic-bezier(.6,0,.3,1)} .juan-end.rolling .je-body{transform:scaleX(.004)} .juan-end.rolling .je-rod.r{transform:translateX(calc(var(--bw,0px) * -1))} .juan-end.still{height:100svh} @media (prefers-reduced-motion:reduce){ .lu-walker{animation:none} } /* 第一幕：数字人莲从一幅立轴里走出来——画框在后，人比画高，头顶和脚下都越出画框； 鼠标移动时画框与人按不同深度错开（只改 transform），像是要出画，其实还在画前 */ .lian-live{position:relative;flex:0 0 auto;align-self:stretch;width:min(34rem,40vw);margin:0;perspective:1400px;outline:none;--rx:0deg;--ry:0deg;--px:0px;--py:0px} .ll-frame{position:absolute;left:12%;right:12%;top:20%;bottom:12%;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .6s var(--ease)} .ll-paper{position:absolute;inset:.9rem .55rem;overflow:hidden;background:#ece2cc;box-shadow:0 0 0 .55rem #b9a57e,0 0 0 .62rem #6f5a3c,0 2.5rem 4rem -1rem rgba(0,0,0,.6)} .ll-paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:sepia(.25)} .ll-paper::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 60%,transparent,rgba(120,95,60,.25))} .ll-zi{position:absolute;right:6%;top:5%;writing-mode:vertical-rl;font:min(13svh,6.5vw)/1 var(--brush);color:var(--cinnabar);opacity:.9;-webkit-text-stroke:.01em currentColor;pointer-events:none;user-select:none;z-index:1} .ll-rod{position:absolute;left:-.6rem;right:-.6rem;height:.9rem;border-radius:.45rem;background:linear-gradient(#7a5636,#3b2a1c);box-shadow:0 .3rem .6rem rgba(0,0,0,.4);z-index:2} .ll-rod.t{top:0} .ll-rod.b{bottom:0} .ll-rod::before,.ll-rod::after{content:"";position:absolute;top:-.15rem;width:.7rem;height:1.2rem;border-radius:.3rem;background:#2a1e14} .ll-rod::before{left:-.3rem} .ll-rod::after{right:-.3rem} .ll-actor{position:absolute;left:50%;bottom:-4svh;height:min(88svh,64rem);aspect-ratio:588/1288;transform:translate(calc(-50% + var(--px)),var(--py)) scale(1.02);transition:transform .6s var(--ease);filter:drop-shadow(-1.2rem 1.6rem 1.4rem rgba(0,0,0,.45))} .ll-actor video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .ll-act{opacity:0;transition:opacity .25s} .ll-actor.acting .ll-act{opacity:1} .ll-actor.acting .ll-v{opacity:0;transition:opacity .25s .1s} .ll-actor::after{content:"";position:absolute;left:18%;right:18%;bottom:2.5%;height:3%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);z-index:-1} .lian-live:focus-visible .ll-paper{box-shadow:0 0 0 .55rem #b9a57e,0 0 0 .62rem var(--cinnabar),0 2.5rem 4rem -1rem rgba(0,0,0,.6)} .ll-cap{position:absolute;right:-1rem;top:14%;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;color:var(--fg);z-index:3} .ll-cap .role-title{writing-mode:vertical-rl;letter-spacing:.4em;font-size:.8125rem;opacity:.7;align-self:auto} .ll-cap .role-verse{writing-mode:vertical-rl;font:600 1.25rem/1.8 var(--brush);margin:0;align-self:auto} .lang-en .ll-cap{top:12%;right:-2.5rem;max-width:9.5rem;text-align:right} .lang-en .ll-cap .role-title,.lang-en .ll-cap .role-verse{writing-mode:horizontal-tb;letter-spacing:.04em} .lang-en .ll-cap .role-verse{font-size:1rem;line-height:1.5} /* 所作：数字人站在作品右边，鼠标停在哪一卷就转头看哪一卷（30 帧雪碧图，按帧切换） */ .scene-zuo .cards{grid-template-columns:repeat(5,1fr);gap:1.25rem;margin-right:min(15rem,17vw)} .scene-zuo .row-head{margin-right:min(15rem,17vw)} .scene-zuo .card strong{font-size:1.08rem;letter-spacing:.02em;text-wrap:balance} .scene-zuo .card-meta{font-size:.75rem} .zuo-look{position:absolute;right:calc(var(--gutter) + 2.5rem);bottom:-2svh;height:min(70svh,40rem);aspect-ratio:252/552;background:var(--look) 0 0/3000% 100% no-repeat;background-position-x:calc(var(--f,0) * 100% / 29);filter:drop-shadow(0 1.2rem 1.4rem rgba(0,0,0,.45));pointer-events:none} /* 尾声：站在荷塘边，拱手告别，转身走远，停在背影 */ .wei-bie{position:absolute;right:16%;bottom:3svh;height:min(52svh,30rem);aspect-ratio:528/1104;z-index:1;filter:drop-shadow(0 1rem 1.2rem rgba(0,0,0,.5)) brightness(.92)} .wei-bie video{width:100%;height:100%;object-fit:contain} .theme-paper .wei-bie{filter:drop-shadow(0 1rem 1.2rem rgba(60,40,20,.3))} /* 收卷后的黑场：只改 opacity */ .je-fin{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;background:#0b0a08;color:#efe4cc;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s} .je-fin.on{opacity:1;visibility:visible;transition:opacity .7s ease} .je-fin-zi{font:min(26vh,14rem)/1 var(--brush);letter-spacing:.1em;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease .35s,transform 1.6s var(--ease) .35s} .je-fin.on .je-fin-zi{opacity:1;transform:none} .je-fin-sub{font:1rem var(--sans);letter-spacing:.5em;color:#a99c84;opacity:0;transition:opacity .8s ease .9s} .je-fin.on .je-fin-sub{opacity:1} .je-fin .seal{opacity:0;transform:scale(1.6);transition:opacity .3s ease 1.3s,transform .45s var(--spring) 1.3s} .je-fin.on .seal{opacity:1;transform:none} .lang-en .je-fin-zi{font-size:min(16vh,8rem);letter-spacing:.04em} .je-hint{display:block;margin-top:1rem;font:.8rem var(--sans);letter-spacing:.3em;color:var(--muted);animation:hint-bob 2.4s ease-in-out infinite} /* 回到卷首后的提示卡 */ .mainline-tip{position:fixed;z-index:55;left:50%;bottom:2.2rem;width:min(34rem,calc(100vw - 2rem));padding:1.5rem 1.75rem 1.4rem;border-radius:1.25rem;background:rgba(28,27,25,.94);color:#efe4cc;box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.6),inset 0 0 0 1px rgba(239,228,204,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translate(-50%,1.5rem);transition:opacity .5s ease,transform .6s var(--spring)} .mainline-tip.on{opacity:1;transform:translate(-50%,0)} .mainline-tip p{margin:0} .ml-k{display:flex;align-items:center;gap:.75rem;font:600 1.5rem var(--brush);letter-spacing:.2em} .lang-en .ml-k{letter-spacing:.02em} .ml-p{margin-top:.6rem!important;color:#cbbfa6;font-size:.95rem} .mainline-tip ul{list-style:none;margin:1rem 0 .8rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.4rem} .mainline-tip li a{font-size:.92rem;color:#efe4cc;border-bottom:1px solid rgba(239,228,204,.18);display:inline-block;padding:.15rem 0;transition:color .3s} .mainline-tip li a:hover{color:var(--cinnabar-lt)} .ml-s{font-size:.82rem;color:#a99c84} .ml-x{margin-top:1rem;--fg:#efe4cc;color:#efe4cc} @media (prefers-reduced-motion:reduce){.je-hint{animation:none}} /* 谢幕：上下黑边（电影画幅）、穿越回卷首、提示卡居中 */ .je-bars{position:absolute;inset:0;z-index:5;pointer-events:none} .je-bars i{position:absolute;left:0;right:0;height:11vh;background:#000;transform:scaleY(0);transition:transform .8s cubic-bezier(.6,0,.2,1)} .je-bars i:first-child{top:0;transform-origin:50% 0} .je-bars i:last-child{bottom:0;transform-origin:50% 100%} .juan-end.cine .je-bars i{transform:none} .juan-end.filming .je-actions{opacity:0!important;pointer-events:none} .juan-end.filming .je-line{top:17%} .je-fin::after{content:"";position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,240,205,.95),rgba(243,220,160,.5) 30%,transparent 62%);opacity:0;transform:scale(.2);pointer-events:none} .je-fin.chuan .je-fin-zi{opacity:0;transform:scale(7);transition:opacity .6s ease .05s,transform .9s cubic-bezier(.7,0,.9,.5)} .je-fin.chuan .je-fin-sub,.je-fin.chuan .seal{opacity:0;transition:opacity .25s} .je-fin.chuan::after{animation:warp-flash 1.1s ease-out forwards} @keyframes warp-flash{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(3)}} .hall.warp-in .stage{animation:warp-in 1.4s cubic-bezier(.15,.7,.2,1) both} @keyframes warp-in{from{transform:scale(1.4);opacity:0}to{transform:none;opacity:1}} .mainline-tip{top:50%;bottom:auto!important;transform:translate(-50%,-44%);box-shadow:0 0 0 100vmax rgba(10,9,7,.55),0 2rem 4rem -1rem rgba(0,0,0,.6),inset 0 0 0 1px rgba(239,228,204,.12)} .mainline-tip.on{transform:translate(-50%,-50%)} body.filming .site-header,body.filming .tabbar{opacity:0;pointer-events:none;transition:opacity .6s} .je-skip{position:absolute;right:var(--side);top:50%;transform:translateY(-50%);font:.78rem var(--sans);letter-spacing:.3em;color:#7d725f;opacity:0;transition:opacity .6s .8s} .lang-en .je-skip{letter-spacing:.08em} .juan-end.cine .je-skip{opacity:1} .lite .zuo-look{display:none} /* 片头旁白的开声按钮：左下角，和“点按跳过”对称 */ .op-sound{position:absolute;left:var(--gutter);bottom:calc(10vh + .45rem);z-index:7;display:flex;align-items:center;gap:.6rem;padding:.45rem .9rem;border:1px solid rgba(246,236,212,.35);border-radius:99rem;background:rgba(18,15,11,.35);color:rgba(246,236,212,.85);font:.8rem var(--sans);letter-spacing:.2em;cursor:pointer;opacity:0;animation:op-fade .6s ease .6s forwards,op-out .3s ease 12.2s forwards;backdrop-filter:blur(4px)} .op-sound:hover{border-color:rgba(246,236,212,.7)} .op-sound-ic{display:flex;align-items:flex-end;gap:2px;height:.8rem} .op-sound-ic i{width:2px;height:30%;background:currentColor;border-radius:1px} .op-sound.on .op-sound-ic i{animation:snd 1s ease-in-out infinite} .op-sound.on .op-sound-ic i:nth-child(2){animation-delay:.2s} .op-sound.on .op-sound-ic i:nth-child(3){animation-delay:.4s} @keyframes snd{50%{height:100%}} .op-sound:not(.on){color:#f6e3a0;border-color:rgba(246,227,160,.6);box-shadow:0 0 1.2rem rgba(246,227,160,.18)} .lang-en .op-sound{letter-spacing:.05em} /* ---------- 第十七版：画面一层的艺术化（不改结构） ---------- */ /* 纸：全站叠一层宣纸纤维与颗粒，打掉 CSS 的“干净感” */ body:has(.hall)::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;background:url(assets/tex/grain.webp) 0 0/256px 256px;opacity:.42} body.theme-ink:has(.hall)::after{opacity:.28} /* 换幕：墨从画心洇开盖满，换景，再散去（替代两侧推云） */ .yun .bank{display:none} .yun .mo-a{position:absolute;left:50%;top:50%;width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;background:url(assets/tex/mo.webp) center/contain no-repeat;opacity:0;transform:scale(.06) rotate(-8deg)} .theme-ink .yun .mo-a{filter:invert(.9) sepia(.35) brightness(.96)} .yun.pass .mo-a{animation:mo-in 1.15s cubic-bezier(.5,0,.25,1) both} @keyframes mo-in{0%{opacity:.9;transform:scale(.06) rotate(-8deg)}44%{opacity:1;transform:scale(2.3) rotate(4deg)}56%{opacity:1;transform:scale(2.4) rotate(5deg)}100%{opacity:0;transform:scale(3.4) rotate(9deg)}} .yun.pass .ri{animation-duration:1.15s} /* 光源：每幕主体身后一团泥金的光，缓缓呼吸 */ .guang{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} .guang i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;background:radial-gradient(circle,rgba(246,214,150,.34),rgba(214,170,96,.14) 34%,transparent 66%);animation:guang 9s ease-in-out infinite alternate} .theme-paper .guang i{background:radial-gradient(circle,rgba(255,236,190,.85),rgba(232,196,128,.28) 36%,transparent 66%)} .scene-zuo .guang i{right:-12vmax;top:-6vmax} .scene-xue .guang i{left:30%;top:20%;transform-origin:center} .scene-cheng .guang i{left:44%;top:-20vmax} @keyframes guang{from{opacity:.75;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}} /* 前景：画面两侧压一团虚化的墨，随鼠标比画面挪得多，做出景深 */ .qj{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden} .qj i{position:absolute;width:52vmax;height:52vmax;background:url(assets/tex/mo2.webp) center/contain no-repeat;filter:blur(6px);opacity:.82;transform:translate(calc(var(--mx,0) * -46px),calc(var(--my,0) * -24px));transition:transform .8s var(--ease)} .qj .l{left:-30vmax;bottom:-31vmax} .qj .r{right:-32vmax;top:-34vmax;opacity:.6} .theme-ink .qj i{filter:blur(6px) invert(.88) sepia(.4) brightness(.5);opacity:.5} .scene-zuo .qj .r{display:none} /* 诗：只在首页各幕里，从纸条挂件改成画边的小字竖排题诗（内页仍是挂轴） */ .hall .tiao{width:auto;padding:0 0 0 .9rem;background:none;box-shadow:none;animation:tiao-drop 1.4s var(--spring) calc(var(--k,0) * .25s + .3s) both;color:inherit;opacity:.82} .hall .tiao::before{content:"";position:absolute;left:0;top:.2rem;bottom:0;width:1px;background:linear-gradient(currentColor,transparent);opacity:.45} .hall .tiao-rod,.hall .tiao-tassel{display:none} .hall .tiao p{font:400 1.0625rem/1.5 var(--brush);letter-spacing:.42em;-webkit-text-stroke:0;gap:.9rem} .hall .tiao small{color:var(--muted);font-size:.6rem;letter-spacing:.3em;margin-top:1.1rem} /* 数字人贴进画里：色调向纸墨靠，脚下一摊墨雾，身后一圈光 */ .ll-actor video,.zuo-look,.wei-bie video{-webkit-mask:linear-gradient(#000 86%,transparent 99%);mask:linear-gradient(#000 86%,transparent 99%)} .ll-actor video{filter:saturate(.84) sepia(.1) contrast(1.03)} .zuo-look,.wei-bie video{filter:saturate(.84) sepia(.1) contrast(1.03)} .ll-actor::before,.zuo-look::before,.wei-bie::before{content:"";position:absolute;left:-55%;right:-55%;bottom:-6%;height:24%;background:url(assets/tex/mist.webp) center/100% 100% no-repeat;opacity:.72;z-index:-1;pointer-events:none} .theme-paper .ll-actor::before,.theme-paper .zuo-look::before,.theme-paper .wei-bie::before{opacity:.42} .ll-actor::after{left:-30%;right:-30%;bottom:auto;top:-6%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(246,214,150,.32),transparent);z-index:-2} .zuo-look{position:absolute} .wei-bie{isolation:isolate} /* 片头：一枚莲苞先在黑里亮起，云开后隐去（首） */ .op-bud{position:absolute;left:50%;top:46%;z-index:5;width:9rem;--q:.55;transform:translate(-50%,-50%);opacity:0;animation:op-bud 3.2s ease .1s forwards;filter:drop-shadow(0 0 1.6rem rgba(255,214,150,.9))} .op-bud .bud{position:static;width:100%;height:auto;transform:none} @keyframes op-bud{0%{opacity:0;transform:translate(-50%,-44%) scale(.8)}25%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.25)}} /* 收尾：“终”之上，这朵莲开了（尾） */ .fin-lotus{display:block;width:6.5rem;margin-bottom:-1rem;opacity:0;transition:opacity 1s ease .2s;filter:drop-shadow(0 0 1.4rem rgba(255,214,150,.55))} .fin-lotus .bud{position:static;width:100%;height:auto;transform:none;overflow:visible} .je-fin.on .fin-lotus{opacity:1} .je-fin.on .fin-lotus .pl3{animation:bloom-l3 2.2s var(--ease) .4s both} .je-fin.on .fin-lotus .pr3{animation:bloom-r3 2.2s var(--ease) .4s both} .je-fin.on .fin-lotus .pl2{animation:bloom-l2 2.2s var(--ease) .5s both} .je-fin.on .fin-lotus .pr2{animation:bloom-r2 2.2s var(--ease) .5s both} @keyframes bloom-l3{from{transform:rotate(38deg)}to{transform:rotate(-14deg)}} @keyframes bloom-r3{from{transform:rotate(-38deg)}to{transform:rotate(14deg)}} @keyframes bloom-l2{from{transform:rotate(18deg)}to{transform:rotate(-12deg)}} @keyframes bloom-r2{from{transform:rotate(-18deg)}to{transform:rotate(12deg)}} @media (prefers-reduced-motion:reduce){.guang i,.op-bud{animation:none}.op-bud{display:none}} /* 各幕主画面（统一画风的五幅 AI 生成画）：铺满，再用一层与底色同色的渐变压住文字那一侧 */ .act-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none} .scene-zuo::before,.scene-xue::before,.scene-cheng::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none} .scene-zuo::before{background:linear-gradient(90deg,rgba(28,27,25,.78),rgba(28,27,25,.5) 58%,rgba(28,27,25,.05) 88%)} .scene-xue::before{background:linear-gradient(90deg,rgba(28,27,25,.62),rgba(28,27,25,.42) 62%,rgba(28,27,25,0) 92%)} .scene-cheng::before{background:linear-gradient(105deg,rgba(28,27,25,.55),rgba(28,27,25,.2) 50%,rgba(28,27,25,0) 75%)} .theme-paper .scene-zuo::before{background:linear-gradient(90deg,rgba(241,235,221,.9),rgba(241,235,221,.72) 58%,rgba(241,235,221,.12) 90%)} .theme-paper .scene-xue::before{background:linear-gradient(90deg,rgba(241,235,221,.86),rgba(241,235,221,.66) 62%,rgba(241,235,221,.05) 92%)} .theme-paper .scene-cheng::before{background:linear-gradient(105deg,rgba(241,235,221,.7),rgba(241,235,221,.25) 50%,rgba(241,235,221,0) 75%)} .scene-cheng .cheng-bg{filter:none;transform:none} .theme-ink .scene-cheng .cheng-bg{filter:brightness(.62) saturate(.9)} .scene-zuo .act-bg{object-position:70% 50%} .scene-xue .act-bg{object-position:100% 40%} .scene-zuo .guang,.scene-xue .guang,.scene-cheng .guang,.scene-xue .bagua{display:none} .ll-paper img{opacity:.9;filter:none} .ll-paper::after{background:radial-gradient(ellipse 60% 50% at 50% 60%,transparent,rgba(120,95,60,.18))} .theme-paper .scene-cheng .scene-inner{color:var(--ink);--muted:#5a4f3e;--accent:var(--cinnabar)} .theme-paper .scene-cheng .display{text-shadow:0 .2rem 1.2rem rgba(241,235,221,.8)} /* 层级：画 0 → 压字的渐变 1 → 前景墨块 3 → 正文 4 */ .scene-zuo::before,.scene-xue::before,.scene-cheng::before{z-index:1} .scene-zuo .scene-inner,.scene-xue .scene-inner,.scene-cheng .scene-inner{position:relative;z-index:4} .scene-zuo .shilian,.scene-xue .shilian,.scene-cheng .shilian{z-index:4} .scene-xue::before{background:linear-gradient(90deg,rgba(28,27,25,.66),rgba(28,27,25,.5) 72%,rgba(28,27,25,.08) 95%)} .theme-paper .scene-xue::before{background:linear-gradient(90deg,rgba(241,235,221,.88),rgba(241,235,221,.74) 72%,rgba(241,235,221,.1) 95%)} .theme-paper .scene-cheng::before{background:linear-gradient(105deg,rgba(241,235,221,.88),rgba(241,235,221,.6) 42%,rgba(241,235,221,0) 72%)} .hall .axis{z-index:12} /* ---------- 第十八版：内页修饰、挂轴扶正、字体搭配 ---------- */ /* 内页页头右侧一角画：用首页那五幅画，左边与下边洇开进纸色，挂轴题诗挂在画前 */ .head-art{position:absolute;z-index:0;top:-6rem;right:calc(var(--gutter) * -1);width:min(66vw,72rem);height:calc(100% + 7rem);background:var(--art) 70% 40%/cover no-repeat;opacity:.62;pointer-events:none; -webkit-mask:radial-gradient(ellipse 78% 82% at 78% 38%,#000 34%,rgba(0,0,0,.55) 58%,transparent 80%);mask:radial-gradient(ellipse 78% 82% at 78% 38%,#000 34%,rgba(0,0,0,.55) 58%,transparent 80%)} .theme-ink .head-art{opacity:.42;filter:brightness(.8)} .page-head.has-art>:not(.head-art){position:relative;z-index:1} .page-head.has-art>.shilian{position:absolute;z-index:2} .page-head.has-art>.head-fan{position:absolute} /* 挂轴扶正：去掉左右摇摆；第一幕画框不再随鼠标转，只平移 */ .tiao{animation:tiao-drop 1.4s var(--spring) calc(var(--k,0) * .25s + .3s) both} .ll-frame{transform:none} /* 字体搭配：毛笔标题配宋体小字，替代系统黑体 */ :root{--song:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif} .lead,.page-head .lead,.narr,.card-meta,.tenets p,.men-line,.ml-p,.wei-text .lead,.cheng-text .lead,.zuo-body .lead,.xue-body .lead{font-family:var(--song);letter-spacing:.06em} .label,.je-sub,.axis-hint{font-family:var(--song);font-weight:600} .lang-en :is(.lead,.narr,.card-meta,.tenets p,.men-line,.ml-p){font-family:Georgia,"Times New Roman",serif;letter-spacing:.01em} .page-head.has-art{overflow-x:clip} /* 首屏：题字整组往左，挂轴往右下，中间让珠帘透气 */ /* ---------- 星图页：天幕、罗盘按钮、星笺卡 ---------- */ .sky-wrap{background:radial-gradient(ellipse 50% 60% at 72% 22%,rgba(214,170,96,.13),transparent 70%),radial-gradient(ellipse 60% 70% at 20% 80%,rgba(47,95,104,.22),transparent 70%),radial-gradient(ellipse at 50% 50%,#1b1d22,#141416 75%);box-shadow:inset 0 0 0 1px rgba(214,190,140,.18),0 2rem 4rem -2rem rgba(0,0,0,.6)} .sky-wrap::before,.sky-wrap::after{content:"";position:absolute;width:2.2rem;height:2.2rem;border:1px solid rgba(214,190,140,.45);pointer-events:none;z-index:3} .sky-wrap::before{left:.8rem;top:.8rem;border-right:0;border-bottom:0} .sky-wrap::after{right:.8rem;bottom:.8rem;border-left:0;border-top:0} /* 罗盘按钮：右侧竖排一列，像一块玉牌 */ .sky-ctrl{right:1.2rem;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;align-items:center;gap:.35rem;padding:.45rem;border-radius:99rem;background:rgba(20,20,22,.55);box-shadow:inset 0 0 0 1px rgba(214,190,140,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:4} .sky-ctrl button{width:2.6rem;height:2.6rem;display:grid;place-items:center;background:transparent;box-shadow:none;color:#e9dcc0;transition:background .25s,color .25s,transform .2s} .sky-ctrl button:hover,.sky-ctrl button:focus-visible{background:rgba(214,170,96,.16);color:#f3d79a} .sky-ctrl svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round} .sky-ctrl .nd{fill:var(--cinnabar-lt);stroke:none} .sc-sep{width:1.2rem;height:1px;background:rgba(214,190,140,.3);margin:.15rem 0} .sky-tip{left:1.4rem;bottom:1.2rem;font-family:var(--song);letter-spacing:.12em;color:rgba(233,220,192,.55)} /* 提示语：中间一颗星，两边细线 */ .star-hint{gap:.8rem;font-family:var(--song);font-size:.95rem;letter-spacing:.2em;color:#cdbf9f;margin:1.6rem 0 2.2rem} .star-hint::before,.star-hint::after{content:"";width:4rem;height:1px;background:linear-gradient(90deg,transparent,rgba(214,190,140,.5))} .star-hint::after{transform:scaleX(-1)} .star-hint svg{width:1rem;height:1rem;fill:#e2b867;order:-1} .star-hint::before{order:-2} /* 星笺：七张，4+3 居中；左上一颗星，右下大号数字压底 */ .star-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem} .star-list li{flex:0 1 calc(25% - .75rem);min-width:15rem} .star-pick{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px rgba(214,190,140,.16);border-radius:1rem;transition:box-shadow .3s,transform .2s,background .3s} .star-pick:hover,.star-pick.on{box-shadow:inset 0 0 0 1px rgba(226,184,103,.75),0 0 2rem -0.6rem rgba(226,184,103,.35);background:linear-gradient(160deg,rgba(226,184,103,.08),rgba(255,255,255,.01))} .sp-no{position:absolute;right:.6rem;bottom:-.9rem;font:3.6rem/1 var(--brush);color:rgba(214,190,140,.08);pointer-events:none;transition:color .3s} .star-pick:hover .sp-no,.star-pick.on .sp-no{color:rgba(226,184,103,.16)} .sp-star{display:inline-flex;align-items:center;gap:.45rem} .sp-star i{width:.45rem;height:.45rem;border-radius:50%;background:var(--cinnabar-lt);box-shadow:0 0 .6rem var(--cinnabar-lt)} .star-pick .sp-desc{font-family:var(--song)} .star-pick .sp-row em{color:#c9a96a} /* AI 生成标识（《人工智能生成合成内容标识办法》显式标识） */ .ai-tag{display:inline-block;font:500 .66rem/1 var(--sans);letter-spacing:.12em;padding:.3rem .5rem;border-radius:.3rem;color:#efe4cc;background:rgba(20,18,15,.55);box-shadow:inset 0 0 0 1px rgba(239,228,204,.25);writing-mode:horizontal-tb} .theme-paper .ai-tag{color:#5a4f3e;background:rgba(241,235,221,.75);box-shadow:inset 0 0 0 1px rgba(90,79,62,.25)} .zuo-look .ai-tag,.wei-bie .ai-tag{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);white-space:nowrap} .ai-note{margin:0;max-width:30rem;font:.78rem/1.7 var(--song);color:var(--muted)} .qt-wait{margin:0;font-family:var(--song);color:var(--muted);letter-spacing:.1em}