/* blazingworld.online — OLIVER · 一座可以点进去的蒸汽朋克城市
   场景：城市全景 →(方寸菜园标签)→ 阳台菜园 →(入户门)→ 书房 →(档案)→ 个人介绍
   Palette: Bronze #3A2E1F · Brass #B8862D · Gold #E0A21B · Cream #E8E4D5 · Green #3C7A43 */

/* 字体（2026-07-12 选型，取自 personal_agent 塔罗牌工艺）：
   Aref Ruqaa Ink=塔罗牌英文主字（OFL，墨韵錾刻衬线）· Courier Prime 打字机=档案文书 UI ·
   鼎猎宋刻体=中文木刻宋（简体齐全，与塔罗英文同「古籍雕版」气质）· PlexArrows 仅 ←→↓ 兜底 */
@font-face{
  font-family:'Aref Ruqaa Ink';
  font-style:normal; font-weight:100 500; font-display:swap;
  src:url('assets/fonts/ArefRuqaa-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Aref Ruqaa Ink';
  font-style:normal; font-weight:501 900; font-display:swap;
  src:url('assets/fonts/ArefRuqaa-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal; font-weight:100 500; font-display:swap;
  src:url('assets/fonts/CourierPrime-400.woff2') format('woff2');
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal; font-weight:501 900; font-display:swap;
  src:url('assets/fonts/CourierPrime-700.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Arrows';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/PlexArrows.woff2') format('woff2');
  unicode-range:U+2190-2199;
}
@font-face{
  font-family:'DingLie Song';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/DingLie.woff2') format('woff2');
}

:root{
  --bronze:#3A2E1F; --brass:#B8862D; --gold:#E0A21B; --gold-ink:#7D590B;
  --cream:#E8E4D5; --ink:#20312A; --green:#3C7A43; --green-dark:#2A5A33;
  --mono:'Courier Prime','Plex Arrows','DingLie Song','Microsoft YaHei','PingFang SC',ui-monospace,Menlo,monospace;
  --serif:'Aref Ruqaa Ink','DingLie Song','Microsoft YaHei','PingFang SC',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bronze);overscroll-behavior:none}
body{background:var(--bronze);color:var(--cream);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
img{display:block;max-width:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--bronze)}

/* ---------- 通用小组件 ---------- */
.chip{
  font:500 12px/1 var(--mono);letter-spacing:.12em;
  color:var(--bronze);background:rgba(242,233,213,.85);
  padding:9px 14px;border-radius:3px;border:1px solid rgba(58,46,31,.25);
  text-decoration:none;
}
button.chip{cursor:pointer}
button.chip:hover, a.chip:hover{background:rgba(242,233,213,.98)}

#nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(16px,3vw,40px);
  pointer-events:none;
}
#nav .chip{pointer-events:auto}
#nav .brand{font-weight:500;letter-spacing:.2em}

/* ---------- 场景舞台 ---------- */
#world{position:fixed;inset:0;overflow:hidden}
.scene{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .65s ease, transform 1.05s cubic-bezier(.25,.6,.25,1), visibility 0s linear 1.05s;
  will-change:transform,opacity;
}
.scene.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* 城市全景：正方形贴片 100vmax 居中，点击缩放由 JS 驱动 --s/--tx/--ty */
.pan{
  position:absolute;left:50%;top:50%;
  width:100vmax;height:100vmax;
  margin-left:-50vmax;margin-top:-50vmax;
  transform:translate3d(var(--tx,0),var(--ty,0),0) scale(var(--s,1));
  transition:transform 1.15s cubic-bezier(.25,.6,.22,1);
  will-change:transform;
}
.pan img{width:100%;height:100%;object-fit:cover}

/* 近景场景：图片 cover 全屏 */
.fill{position:absolute;inset:0}
.fill img{width:100%;height:100%;object-fit:cover}

/* ---------- 热区（点击冒险的可点标记）---------- */
.hotspot{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  background:none;border:0;cursor:pointer;
  display:grid;place-items:center;
  padding:0;text-decoration:none;
  z-index:5;
}
.hotspot .ring{
  position:absolute;width:46px;height:46px;border-radius:50%;
  border:2px solid rgba(255,240,200,.9);
  box-shadow:0 0 12px rgba(224,162,27,.65), inset 0 0 10px rgba(224,162,27,.4);
  animation:breathe 2.6s ease-in-out infinite;
}
.hotspot:hover .ring{animation-duration:1.1s}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.22);opacity:1}
}
.hotspot .tag{
  position:relative;top:44px;
  display:block;text-align:center;white-space:nowrap;
  padding:9px 16px 8px;border-radius:4px;
  transition:transform .25s ease, filter .25s ease;
}
.hotspot:hover .tag{transform:translateY(-3px);filter:brightness(1.08)}
.hotspot .tag b{display:block;font:600 17px/1.2 var(--serif);letter-spacing:.22em;padding-left:.22em}
.hotspot .tag i{display:block;margin-top:4px;font:500 10px/1 var(--mono);letter-spacing:.1em;font-style:normal;opacity:.9}
/* 三种牌子材质 */
.tag.brass{
  background:linear-gradient(165deg,#D3A94C 0%,#B8862D 45%,#8F6820 100%);
  color:#FFF6E0;border:1px solid #6E5014;
  box-shadow:0 3px 12px rgba(58,46,31,.45), inset 0 1px 0 rgba(255,244,214,.6);
}
.tag.wood{
  background:linear-gradient(170deg,#8A6142 0%,#6E4A2F 60%,#59391F 100%);
  color:#F5E8CE;border:1px solid #4A2F17;
  box-shadow:0 3px 12px rgba(40,26,12,.5), inset 0 1px 0 rgba(255,230,190,.35);
}
.tag.kraft{
  background:linear-gradient(170deg,#D9C29A 0%,#C4A878 100%);
  color:#4A3A22;border:1px solid #9A7F52;
  box-shadow:0 3px 12px rgba(58,46,31,.4), inset 0 1px 0 rgba(255,244,214,.7);
}
/* 城市里的主标签更醒目 */
.plaque-spot .tag b{font-size:20px}
.plaque-spot .ring{width:56px;height:56px}

/* ---------- 黄铜管件相框：可点元素的统一语言（框=可交互） ----------
   九宫格 border-image：四角齿轮饰件固定比例，直管段拉伸。
   --fbu = 资产像素→CSS像素 的缩放单元；outset 44 单元让铜管外缘恰好压在按钮边缘。 */
a.chip, button.chip, .hotspot .tag{
  --fbu:.09px;
  border:3px solid rgba(143,104,32,.7); /* border-image 未加载时的兜底框线 */
  border-image:url(assets/ui/frame-border.webp) 262 221 205 330 /
    calc(var(--fbu)*262) calc(var(--fbu)*221) calc(var(--fbu)*205) calc(var(--fbu)*330) /
    calc(var(--fbu)*44) stretch;
  filter:drop-shadow(0 2px 5px rgba(40,26,12,.5));
}
a.chip, button.chip{padding:10px 26px 9px}
.hotspot .tag{--fbu:.105px;padding:11px 28px 10px}
.plaque-spot .tag{--fbu:.12px;padding:13px 32px 12px}
/* 材质牌换掉方形外投影（框体轮廓用 drop-shadow 跟随镂空形状），保留内高光 */
/* 黄铜牌加深为氧化青铜——金框贴金底没有对比度，深底才衬得出鎏金框 */
.tag.brass{
  background:linear-gradient(165deg,#6E5322 0%,#523D14 48%,#3A2B0D 100%);
  color:#FFEDC2;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.25);
}
.tag.wood{box-shadow:inset 0 1px 0 rgba(255,230,190,.35)}
.tag.kraft{box-shadow:inset 0 1px 0 rgba(255,244,214,.7)}
.hotspot:hover .tag{transform:translateY(-3px);filter:drop-shadow(0 4px 8px rgba(40,26,12,.55)) brightness(1.1)}
/* 焦点圈让位于相框：热区的 outline 会被视觉下移的牌面截断，改套在牌面上；
   chip 的 outline 外扩越过相框 outset，不压角饰 */
.hotspot:focus-visible{outline:0}
.hotspot:focus-visible .tag{outline:2px solid var(--gold);outline-offset:7px}
a.chip:focus-visible, button.chip:focus-visible{outline-offset:7px}

/* ---------- 项目卡（悬停 / 聚焦「方寸菜园」牌浮出，介绍独立项目）---------- */
.proj-card{
  position:absolute; left:50%; bottom:calc(100% + 16px);
  width:min(332px,80vw);
  transform:translate(-50%,10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, transform .3s cubic-bezier(.3,1.1,.4,1), visibility 0s linear .3s;
  background:linear-gradient(178deg,#F7F0DE,#EBE1C7);
  color:#2A2013; text-align:left;
  border:1px solid #A98B54; border-radius:11px;
  padding:16px 18px 15px;
  box-shadow:0 20px 46px rgba(20,14,6,.5), inset 0 1px 0 rgba(255,250,235,.7);
  z-index:9;
}
.hotspot:hover .proj-card,
.hotspot:focus-visible .proj-card{
  opacity:1; visibility:visible; transform:translate(-50%,0);
  pointer-events:auto; /* 浮出后可交互：鼠标能移上卡片、点卡片上的按钮（点击冒泡到整块 <a> 打开项目）*/
  transition-delay:0s,0s,0s;
}
.proj-card::after{ /* 指向牌子的下尖角 */
  content:''; position:absolute; left:50%; top:100%;
  width:14px; height:14px; margin:-8px 0 0 -7px;
  background:#EBE1C7; border-right:1px solid #A98B54; border-bottom:1px solid #A98B54;
  transform:rotate(45deg);
}
.proj-card::before{ /* 隐形桥：填平牌子与卡片间的空隙，鼠标从牌子移向卡片途中不丢 hover（随卡片一起 pointer-events）*/
  content:''; position:absolute; left:0; right:0; top:100%; height:28px;
}
.pc-kicker{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.26em;color:#9A6E1E;margin-bottom:9px}
.pc-title{display:block;font:600 23px/1.05 var(--serif);letter-spacing:.03em;color:#241B0E}
.pc-title em{font:400 12px/1 var(--mono);font-style:normal;letter-spacing:.12em;color:#7A5A2A;margin-left:9px}
.pc-desc{display:block;font:400 12px/1.72 var(--mono);color:#463824;margin:10px 0 11px}
.pc-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pc-chip{font:500 10px/1 var(--mono);letter-spacing:.03em;color:#6E5322;background:rgba(184,134,45,.15);border:1px solid rgba(169,139,84,.55);border-radius:3px;padding:4px 7px}
.pc-cta{display:block;text-align:center;font:700 11px/1 var(--mono);letter-spacing:.08em;color:#FFF6E0;background:linear-gradient(165deg,#B8862D,#8F6820);border:1px solid #6E5014;border-radius:5px;padding:9px 0}
@media (prefers-reduced-motion:reduce){ .proj-card{transition:opacity .01s} }

/* ---------- 场景 UI ---------- */
.hint{
  position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);
  z-index:6;animation:hintFloat 3.2s ease-in-out infinite;
}
@keyframes hintFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.wordmark{
  position:absolute;left:clamp(16px,3vw,40px);bottom:4.5vh;z-index:6;
  font:600 clamp(26px,3vw,40px)/1.1 var(--serif);letter-spacing:.18em;
  display:flex;flex-direction:column;gap:6px;
}
.wordmark span{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;opacity:.85}
.back{position:absolute;left:clamp(16px,3vw,40px);bottom:4.5vh;z-index:6}

/* 漂浮光尘（游戏感的环境呼吸）*/
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,235,180,.95),rgba(255,220,140,0) 70%);
  animation:mote 9s linear infinite;
  opacity:0;
}
.motes i:nth-child(1){left:18%;top:78%;animation-delay:0s}
.motes i:nth-child(2){left:42%;top:85%;animation-delay:2.2s;animation-duration:11s}
.motes i:nth-child(3){left:63%;top:74%;animation-delay:4.1s}
.motes i:nth-child(4){left:80%;top:82%;animation-delay:1.3s;animation-duration:12s}
.motes i:nth-child(5){left:30%;top:90%;animation-delay:5.6s}
.motes i:nth-child(6){left:55%;top:88%;animation-delay:7s;animation-duration:10s}
@keyframes mote{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.9}
  85%{opacity:.5}
  100%{transform:translateY(-46vh) translateX(3vw);opacity:0}
}

/* ---------- 档案（个人介绍）---------- */
#dossier{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(30,22,12,.55);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s ease;
}
#dossier.open{opacity:1}
#dossier[hidden]{display:none}
.folder{
  position:relative;
  width:min(560px,92vw);
  transform:scale(.7) translateY(8vh);
  transition:transform .55s cubic-bezier(.3,1.25,.4,1);
}
#dossier.open .folder{transform:none}
.flap{
  position:absolute;inset:0 0 auto 0;height:60px;border-radius:8px 8px 0 0;
  background:linear-gradient(175deg,#C9AC7C,#B08F5C);
  border:1px solid #8F7344;border-bottom:0;
  transform-origin:top;
  transition:transform .6s cubic-bezier(.4,0,.2,1) .25s, opacity .3s ease .55s;
  z-index:2;
  pointer-events:none; /* 纯装饰：翻开后隐形残留会挡住 close 按钮下半段 */
}
#dossier.open .flap{transform:rotateX(120deg);opacity:0}
.paper{
  position:relative;border-radius:6px;
  background:var(--cream);color:var(--ink);
  padding:clamp(24px,4vw,40px);
  border:1px solid rgba(32,49,42,.4);
  box-shadow:0 0 0 5px #C9AC7C, 0 0 0 6px #8F7344, 0 24px 60px rgba(20,14,6,.5);
}
.paper .eyebrow{font:500 10.5px/1 var(--mono);letter-spacing:.3em;color:var(--gold-ink);margin-bottom:14px}
.paper h2{font:600 clamp(26px,4vw,34px)/1.2 var(--serif);letter-spacing:.1em}
.paper h2 .cn{font-size:.65em;letter-spacing:.35em;color:var(--green-dark);margin-left:10px}
.gold-rule{width:44px;height:2px;background:var(--gold);border:0;margin:14px 0}
.paper .line{font:500 12.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--gold-ink)}
.paper .label{font:500 10px/1 var(--mono);letter-spacing:.28em;color:rgba(32,49,42,.55);margin:18px 0 6px}
.paper .body{font:400 13px/1.9 var(--mono);color:rgba(32,49,42,.9)}
.paper .body a{color:var(--green-dark)}
.folder .close{position:absolute;right:0;top:-46px}

/* ---------- 响应式 ---------- */
@media (max-width:720px){
  .hotspot .tag b{font-size:15px}
  .wordmark{bottom:auto;top:70px}
  .hint{bottom:3vh;white-space:normal;max-width:88vw;font-size:11px;line-height:1.55;text-align:center}
  /* 竖屏收窄相框牌：城市主牌挂在 100vmax 全景右侧，Cinzel/宋体又比旧字体宽，
     收缩 + 左移双管齐下（光圈仍在楼上，牌子略偏像吊牌） */
  .hotspot .tag{--fbu:.095px;padding:10px 22px 9px}
  .plaque-spot .tag{--fbu:.085px;padding:11px 18px 10px;position:relative;left:-28px}
  .plaque-spot .tag b{font-size:15px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .scene,.pan,.folder,.flap{transition:none !important}
  .ring,.hint,.motes i{animation:none !important}
  .motes{display:none}
}