/* horror.css · 恐怖呈现层 · 源 design/art/07_presentation_horror_spec.md · F1六档全实现 F2 R7≤7 F3文字令牌债修复 · 不被 spec.js ⑰⑱ 扫描 */ :root{ --hz-vig-raw:.20; --hz-vig-stop:58%; --hz-grain-raw:.055; --hz-grain-dur:0s; --hz-fog-raw:.05; --hz-fog-dur:240s; --hz-img-sat:.80; --hz-mul-vig:1; --hz-mul-grain:1; --hz-mul-fog:1; --hz-vig:calc(var(--hz-vig-raw)*var(--hz-mul-vig)); --hz-grain:calc(var(--hz-grain-raw)*var(--hz-mul-grain)); --hz-fog:calc(var(--hz-fog-raw)*var(--hz-mul-fog)); --hz-fog-hue:125,138,150; --hz-vig-hue:10,14,18; --hz-muted:#626a72; --hz-faint:#67707a; /* 5.5:1 / 5.03:1，原 --faint 2.62:1 */ } html[data-hz="L1"]{--hz-vig-raw:.23;--hz-vig-stop:57%;--hz-grain-raw:.058;--hz-grain-dur:0s;--hz-fog-raw:.075;--hz-fog-dur:220s;--hz-img-sat:.74} html[data-hz="L2"]{--hz-vig-raw:.26;--hz-vig-stop:56%;--hz-grain-raw:.060;--hz-grain-dur:1.2s;--hz-fog-raw:.10;--hz-fog-dur:190s;--hz-img-sat:.70} html[data-hz="L3"]{--hz-vig-raw:.36;--hz-vig-stop:50%;--hz-grain-raw:.085;--hz-grain-dur:.9s;--hz-fog-raw:.16;--hz-fog-dur:150s;--hz-img-sat:.55} html[data-hz="L4"]{--hz-vig-raw:.48;--hz-vig-stop:44%;--hz-grain-raw:.110;--hz-grain-dur:.6s;--hz-fog-raw:.20;--hz-fog-dur:110s;--hz-img-sat:.38} /* L5 冻结：A.2 记 dur:0 会让动画失效退小圆点；改用 120s+paused+负delay 钉在50%帧 */ html[data-hz="L5"]{--hz-vig-raw:.62;--hz-vig-stop:38%;--hz-grain-raw:.130;--hz-grain-dur:2.4s;--hz-fog-raw:.24;--hz-fog-dur:120s;--hz-img-sat:.20} /* 宽=min(100vw,--site-w)；spec 写死430px 会露接缝，改 --site-w(620–780) */ #fx-root{position:fixed;inset:0;width:min(100vw,var(--site-w,430px));margin-inline:auto;pointer-events:none;z-index:55;overflow:hidden;contain:layout paint style} #fx-root>*{position:absolute;inset:0;pointer-events:none} .fx-vig{background:radial-gradient(ellipse 78% 68% at 50% 46%,rgba(var(--hz-vig-hue),0) 0%,rgba(var(--hz-vig-hue),0) var(--hz-vig-stop),rgba(var(--hz-vig-hue),1) 100%);opacity:var(--hz-vig);transition:opacity .9s ease} .fx-fog{opacity:var(--hz-fog);transition:opacity 1.2s ease} .fx-fog i{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(var(--hz-fog-hue),.55) 0%,rgba(var(--hz-fog-hue),.30) 38%,rgba(var(--hz-fog-hue),0) 70%);will-change:transform} .fx-fog i:nth-child(1){left:-18%;top:6%;animation:fx-fog-a var(--hz-fog-dur) ease-in-out infinite} .fx-fog i:nth-child(2){left:34%;top:38%;animation:fx-fog-b calc(var(--hz-fog-dur)*1.18) ease-in-out infinite} .fx-fog i:nth-child(3){left:-6%;top:64%;animation:fx-fog-a calc(var(--hz-fog-dur)*.84) ease-in-out infinite reverse} html:not([data-hz]) .fx-fog i:nth-child(n+2),html[data-hz=""] .fx-fog i:nth-child(n+2){display:none} html[data-hz="L1"] .fx-fog i:nth-child(n+2){display:none} html[data-hz="L2"] .fx-fog i:nth-child(n+3){display:none} html[data-hz="L5"] .fx-fog i{animation-play-state:paused;animation-delay:calc(var(--hz-fog-dur)*-.5)} /* grain/flash 作子节点(非#fx-root)：否则层叠上下文切断 mix-blend-mode(只吃亮部/只提亮) 可读性收益 */ .fx-grain{position:fixed;top:-32px;bottom:-32px;left:50%;width:calc(min(100vw,var(--site-w,430px))+64px);margin-left:calc((min(100vw,var(--site-w,430px))+64px)*-.5);pointer-events:none;z-index:56;opacity:var(--hz-grain);transition:opacity .9s ease;background-repeat:repeat;background-size:160px 160px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;will-change:transform} html[data-hz="L2"] .fx-grain,html[data-hz="L3"] .fx-grain,html[data-hz="L4"] .fx-grain,html[data-hz="L5"] .fx-grain{animation:fx-grain var(--hz-grain-dur) steps(1,end) infinite} .fx-flash{position:fixed;inset:0;width:min(100vw,var(--site-w,430px));margin-inline:auto;pointer-events:none;z-index:57;background:rgba(198,212,222,.5);opacity:0;mix-blend-mode:screen} html[data-hz="L4"] .fx-flash{animation:fx-flash 23s linear infinite} html[data-hz="L5"] .fx-flash{animation:fx-flash 1.4s linear 1} html[data-hz="L4"] #fx-root,.hz-L4 .lz-art h1,.hz-L4 .lz-floor.lz-dead{animation:fx-jitter 7s linear infinite;will-change:transform} #lz-frame img{filter:saturate(var(--hz-img-sat))} /* 飘落与L4/L5互斥(E.2-3)：升档方向是死寂，飘落稀释压迫 */ html[data-hz="L4"] .y2k-fall,html[data-hz="L5"] .y2k-fall{display:none!important} .lz-meta,.lz-floor .hd,.lz-slot .cap,.lz-mini,.lz-tw .no,.lz-tw .fn,.lz-gap,.lz-hit .src,.lz-empty,#lz-foot{color:var(--hz-faint)} .lz-floor .hd .nm,.lz-sign,.lz-sysline{color:var(--hz-muted)} body[data-site="forum"]{--hz-muted:#6f6244;--hz-faint:#7d6f50} body[data-site="fengjiang"]{--hz-muted:#5c6f69;--hz-faint:#62736b} body[data-site="ayu"]{--hz-muted:#a8a8c4;--hz-faint:#9a9ab8} body[data-site="inner"]{--hz-muted:#8b979f;--hz-faint:#78848c} .hz-L1{--hz-ink:#212429;--hz-muted:#5d656d;--hz-faint:#636c75} .hz-L2{--hz-ink:#1e2126;--hz-muted:#575f67;--hz-faint:#5d666f} .hz-L3{--hz-ink:#1b1e22;--hz-muted:#515861;--hz-faint:#575e66} .hz-L4{--hz-ink:#171a1e;--hz-muted:#434a51;--hz-faint:#4e555c} .hz-L5{--hz-ink:#131619;--hz-muted:#363c42;--hz-faint:#41474d} .hz .lz-art,.hz .lz-op,.hz .lz-floor .tx,.hz .lz-tw .ln{color:var(--hz-ink,var(--ink))} /* 深色站反向：世界越暗字越亮(盖住白底加深表) */ body[data-site="ayu"] .hz,body[data-site="inner"] .hz{--hz-ink:var(--ink);--hz-muted:#a8a8c4;--hz-faint:#9a9ab8} body[data-site="ayu"] .hz-L4,body[data-site="inner"] .hz-L4{--hz-ink:#c0cad0;--hz-muted:#a4aeb5;--hz-faint:#98a3aa} body[data-site="ayu"] .hz-L5,body[data-site="inner"] .hz-L5{--hz-ink:#c4ced4;--hz-muted:#aeb8be;--hz-faint:#a2adb4} html.fx-reduced{--hz-mul-vig:.6;--hz-mul-grain:.5;--hz-mul-fog:.45} html.fx-reduced .fx-grain{animation:none!important} html.fx-reduced .fx-fog i{animation-duration:calc(var(--hz-fog-dur)*2.5)!important} html.fx-reduced .fx-fog i:nth-child(n+2){display:none!important} html.fx-reduced .fx-flash{animation:none!important;opacity:0!important} html.fx-reduced #fx-root,html.fx-reduced .lz-art h1,html.fx-reduced .lz-floor.lz-dead{animation:none!important} html.fx-reduced body{--ghost:var(--hz-faint)} .fx-toggle{display:block;margin:10px auto 0;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:var(--card);color:var(--hz-muted);font-size:var(--fs-xs);letter-spacing:.08em} .fx-toggle[aria-pressed="true"]{background:var(--well);color:var(--ink-2)} /* reduced-motion：减运动非减视觉，暗角/颗粒/去饱和/加深保留，仅像素停移 */ @media (prefers-reduced-motion:reduce){ #fx-root,#fx-root *,.fx-grain,.fx-flash,.hz .lz-art h1,.hz .lz-floor.lz-dead{animation:none!important} .fx-flash{opacity:0!important} .fx-fog{opacity:calc(var(--hz-fog)*.8)} .fx-fog i{transform:translate3d(0,0,0) scale(3.1)} .fx-fog i:nth-child(n+3){display:none} } @keyframes fx-fog-a{0%{transform:translate3d(-12%,4%,0) scale(2.8)}50%{transform:translate3d(10%,-6%,0) scale(3.6)}100%{transform:translate3d(-12%,4%,0) scale(2.8)}} @keyframes fx-fog-b{0%{transform:translate3d(14%,-8%,0) scale(3.4)}50%{transform:translate3d(-8%,7%,0) scale(2.6)}100%{transform:translate3d(14%,-8%,0) scale(3.4)}} @keyframes fx-grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-7px,5px,0)}40%{transform:translate3d(5px,-8px,0)}60%{transform:translate3d(-4px,-5px,0)}80%{transform:translate3d(8px,4px,0)}100%{transform:translate3d(0,0,0)}} @keyframes fx-jitter{0%,86%,100%{transform:translate3d(0,0,0)}87%{transform:translate3d(-.6px,.4px,0)}88%{transform:translate3d(.5px,-.5px,0)}89%{transform:translate3d(-.3px,-.2px,0)}90%{transform:translate3d(.4px,.3px,0)}91%{transform:translate3d(0,0,0)}} @keyframes fx-flash{0%,93%,100%{opacity:0}94%{opacity:.50}95%{opacity:0}96%{opacity:.28}97%{opacity:0}}