/* 全局基础区：Neo Deco 暖石材、深青绿、黄铜与陶土色令牌 */
:root { --ink:#162a2e; --teal:#183c42; --muted:#6d7169; --paper:rgba(255,249,238,.9); --stone:#e9dec9; --terracotta:#a54c2e; --brass:#b58b42; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { color:var(--ink); background:var(--stone); font-family:Inter,"Noto Sans SC",system-ui,sans-serif; }
button,a { font:inherit; }
button:focus-visible,a:focus-visible { outline:3px solid var(--brass); outline-offset:3px; }
[hidden] { display:none !important; }

/* 顶栏功能区：保持为真实 DOM 控件，不写进场景艺术图 */
.topbar { position:absolute; z-index:10; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px clamp(20px,4vw,62px); }
.brand { color:var(--teal); font-weight:900; letter-spacing:.07em; text-decoration:none; }.brand span { display:block; margin-top:3px; color:#746c5d; font-size:.72rem; font-weight:600; letter-spacing:.03em; }.topbar-actions { display:flex; gap:9px; }.quiet-button { min-height:40px; padding:0 13px; color:var(--teal); background:rgba(255,249,238,.82); border:1px solid rgba(24,60,66,.22); border-radius:12px; cursor:pointer; backdrop-filter:blur(9px); }.quiet-button:hover { background:#fff9ee; }

/* Neo Deco 场景区：两张经批准的无文字插画以短交叉淡入呈现 */
.scene { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; background:#d6c6ad; }.scene::before,.scene::after { content:""; position:absolute; z-index:0; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; transition:opacity .72s ease; }.scene::before { background-image:url("assets/neo-deco-home.png"); opacity:1; }.scene::after { background-image:url("assets/neo-deco-cafe.png"); opacity:0; }.scene--cafe::before { opacity:0; }.scene--cafe::after { opacity:1; }
/* 旧几何原型层停用：由高分辨率 Neo Deco 场景资产统一承载透视、材质与人物 */
.sky-layer,.city-layer,.home-shell,.cafe-layer,.ambient-events,.desk { display:none; }

/* 单场景微动效区：候鸟与风吹叶片为低频环境事件；没有额外光晕或闪烁效果 */
.scene-motion-layers{position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden}.home-motion,.cafe-motion{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}.scene--home .home-motion,.scene--cafe .cafe-motion{opacity:1}.seagull{position:absolute;left:51%;top:23%;width:34px;height:18px;overflow:visible;opacity:0;filter:drop-shadow(0 1px 1px rgba(38,57,48,.18));transform-origin:50% 70%}.seagull path{fill:none;stroke:#65766b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:gull-wings 1.55s ease-in-out infinite}.seagull--one{animation:seagull-pass 39s 5s linear infinite}.seagull--two{width:25px;left:56%;top:27%;animation:seagull-pass 39s 6.4s linear infinite}.seagull--two path{stroke-width:2.5;animation-duration:1.32s}.leaf-sway{position:absolute;display:block;transform-origin:52% 100%;opacity:.28;filter:drop-shadow(1px 2px 1px rgba(34,50,34,.15));animation:leaf-sway 16s 2s cubic-bezier(.42,0,.2,1) infinite}.leaf-sway i{position:absolute;width:20px;height:12px;border:1px solid rgba(57,82,54,.2);border-radius:100% 0 100% 0;background:linear-gradient(135deg,#899d79 0%,#607653 54%,#3d5746 100%);clip-path:polygon(0 50%,72% 0,100% 18%,86% 76%,34% 100%);transform:rotate(var(--r));box-shadow:inset -2px -1px 0 rgba(21,47,40,.2)}.leaf-sway--home{left:39.5%;top:35%;width:112px;height:162px}.leaf-sway--home i:nth-child(1){left:3px;top:31px;--r:15deg}.leaf-sway--home i:nth-child(2){left:35px;top:12px;--r:-35deg}.leaf-sway--home i:nth-child(3){left:59px;top:49px;--r:44deg}.leaf-sway--home i:nth-child(4){left:22px;top:73px;--r:-18deg}.leaf-sway--home i:nth-child(5){left:69px;top:91px;--r:20deg}.leaf-sway--cafe{left:11%;top:0;width:130px;height:180px;opacity:.36;animation:cafe-leaf-sway 13s -3s cubic-bezier(.42,0,.2,1) infinite}.leaf-sway--cafe i:nth-child(1){left:8px;top:49px;--r:32deg}.leaf-sway--cafe i:nth-child(2){left:37px;top:25px;--r:-21deg}.leaf-sway--cafe i:nth-child(3){left:66px;top:60px;--r:48deg}.leaf-sway--cafe i:nth-child(4){left:88px;top:15px;--r:-38deg}.leaf-sway--cafe i:nth-child(5){left:28px;top:96px;--r:20deg}.leaf-sway--cafe i:nth-child(6){left:92px;top:110px;--r:-18deg}.machine-steam{position:absolute;left:72%;top:37%;width:52px;height:100px}.machine-steam b{position:absolute;bottom:0;width:12px;height:58px;border-left:2.5px solid rgba(255,245,221,.74);border-radius:50%;filter:blur(.35px);opacity:0;animation:steam-rise 8s ease-out infinite}.machine-steam b:nth-child(1){left:7px;animation-delay:-1s}.machine-steam b:nth-child(2){left:23px;height:73px;animation-delay:-5.2s}.machine-steam b:nth-child(3){left:39px;height:49px;animation-delay:-8.1s}@keyframes gull-wings{0%,100%{transform:scaleY(1) rotate(0)}50%{transform:scaleY(.62) rotate(-2deg)}}@keyframes seagull-pass{0%,72%{opacity:0;transform:translate3d(-56px,-28px,0) scale(.7)}75%{opacity:.3;transform:translate3d(-18px,0,0) scale(.82)}79%{opacity:.42;transform:translate3d(18px,78px,0) scale(.9)}83%,88%{opacity:.5;transform:translate3d(35px,220px,0) scale(.76)}94%{opacity:.36;transform:translate3d(146px,-38px,0) scale(.62)}100%{opacity:0;transform:translate3d(190px,-78px,0) scale(.55)}}@keyframes leaf-sway{0%,100%{transform:rotate(-.5deg) translateX(0)}38%{transform:rotate(1.4deg) translateX(2px)}64%{transform:rotate(-1.1deg) translateX(-1px)}}@keyframes cafe-leaf-sway{0%,100%{transform:rotate(-.6deg) translateX(0)}35%{transform:rotate(2.4deg) translateX(3px)}61%{transform:rotate(-1.8deg) translateX(-2px)}82%{transform:rotate(1.3deg) translateX(1px)}}@keyframes steam-rise{0%{opacity:0;transform:translate3d(0,8px,0) scale(.72)}15%{opacity:.68}78%{opacity:.23}100%{opacity:0;transform:translate3d(12px,-58px,0) scale(1.18)}}

/* 叙事交互区：固定在艺术留白上，永远不盖住右下工作的桌面 */
.story-panel { position:absolute; z-index:4; left:clamp(20px,6vw,96px); top:clamp(104px,15vh,160px); width:min(440px,calc(100% - 40px)); padding:clamp(22px,3vw,38px); border:1px solid rgba(22,42,46,.15); border-radius:28px; background:linear-gradient(135deg,rgba(255,252,246,.64),rgba(248,228,195,.30)); box-shadow:0 20px 48px rgba(37,48,45,.17),inset 0 1px 0 rgba(255,255,255,.58); backdrop-filter:blur(16px) saturate(1.06); }.eyebrow { margin:0 0 17px; color:var(--terracotta); font-size:.78rem; font-weight:800; letter-spacing:.08em; }.story-panel h1 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-weight:500; font-size:clamp(2.35rem,3.7vw,3.35rem); line-height:1.12; letter-spacing:-.035em; }.story-panel p:not(.eyebrow) { color:#425559; line-height:1.7; margin:22px 0 26px; }.story-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.primary-button { min-height:48px; border:0; border-radius:18px; padding:0 19px; background:var(--terracotta); color:#fff; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(165,76,46,.24); transition:background .2s,transform .2s; }.primary-button:hover { background:var(--teal); transform:translateY(-2px); }.primary-button span { font-size:1.25em; padding-left:8px; }.text-button { min-height:44px; padding:0 13px; color:var(--teal); border:1px solid rgba(24,60,66,.27); border-radius:14px; background:rgba(255,249,238,.72); cursor:pointer; }.motion-note { position:absolute; z-index:5; right:24px; bottom:20px; max-width:380px; padding:10px 14px; color:var(--muted); background:var(--paper); border-radius:12px; font-size:.82rem; }

/* 状态与可访问性区：暂停与系统减少动态效果均会停止所有环境动画 */
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation-play-state:paused !important; }
@media (max-width:720px) { .topbar { padding:16px 18px; }.brand span { display:none; }.topbar-actions { gap:5px; }.quiet-button { padding:0 10px; font-size:.78rem; }.scene::before,.scene::after { background-position:62% center; }.story-panel { top:auto; bottom:22px; padding:22px; border-radius:22px; }.story-panel h1 { font-size:2.35rem; }.story-panel p:not(.eyebrow) { margin:13px 0 18px; font-size:.9rem; }.motion-note { display:none; }.seagull{left:57%;top:20%}.leaf-sway--home{left:46%} }
@media (prefers-reduced-motion: reduce) { .scene::before,.scene::after { transition-duration:0ms !important; } .scene-motion-layers * { animation:none !important; } *,*::before,*::after { scroll-behavior:auto !important; } }

/* 静态环境区：候鸟、树叶与蒸汽等环境层已移除，只有用户触发的转场可动。 */
.scene::before,.scene::after { transition:none; }

/* Jitter 风格转场区：整卡先收束，后以标签、标题、正文、按钮顺序进入。 */
.scene.is-transitioning { pointer-events:none; }.scene.is-exiting .story-panel { animation:glass-card-out 180ms cubic-bezier(.5,0,.8,.35) both; }.scene.is-entering::before,.scene.is-entering::after { animation:scene-reveal 300ms cubic-bezier(.2,.72,.26,1) both; }.scene.is-entering .story-panel { animation:glass-card-in 320ms cubic-bezier(.18,.8,.28,1) both; }.scene.is-entering .eyebrow,.scene.is-entering .story-panel h1,.scene.is-entering .story-panel p:not(.eyebrow),.scene.is-entering .story-actions { opacity:0; animation:content-rise 280ms cubic-bezier(.2,.8,.28,1) both; }.scene.is-entering .eyebrow { animation-delay:70ms; }.scene.is-entering .story-panel h1 { animation-delay:125ms; }.scene.is-entering .story-panel p:not(.eyebrow) { animation-delay:180ms; }.scene.is-entering .story-actions { animation-delay:235ms; }@keyframes glass-card-out { to { opacity:0; transform:translateY(12px) scale(.96); filter:blur(1px); } }@keyframes scene-reveal { from { opacity:.72; transform:scale(1.025); } to { opacity:1; transform:scale(1); } }@keyframes glass-card-in { from { opacity:0; transform:translateY(16px) scale(.97); filter:blur(2px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }@keyframes content-rise { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:translateY(0); } }

/* 减少动态效果区：状态保留，任何转场立即完成。 */
@media (prefers-reduced-motion: reduce) { .scene.is-exiting .story-panel,.scene.is-entering::before,.scene.is-entering::after,.scene.is-entering .story-panel,.scene.is-entering .eyebrow,.scene.is-entering .story-panel h1,.scene.is-entering .story-panel p:not(.eyebrow),.scene.is-entering .story-actions { animation:none !important; } }