/* os2.css —— ANetOS 2.0「余白」视觉系统（D003）。
   叠加在 os.css 之上：深度三层 · 玻璃两档 · 环境光四预设 · 潮汐 · 剧场 · 信箱 · 画坊。
   公理：动效只走 transform/opacity；文字不加深度；强调色单屏 ≤3 处；ANet 红只用于身份时刻。 */

:root{
  --identity:#EE342E;                       /* ANet 红：boot/ANet it!/画坊署名 专用 */
  --spring:cubic-bezier(.34,1.4,.64,1);
  --tide:600ms;
  /* 环境光（四预设由 data-light 切换；transition 由引用者各自做 3s） */
  --amb-level:1; --amb-warmth:0; --amb-glow:rgba(255,255,255,.14);
}
html[data-light="dawn"]{ --amb-level:.96; --amb-warmth:.06; --amb-glow:rgba(255,236,214,.16) }
html[data-light="day"]{ --amb-level:1;   --amb-warmth:0;   --amb-glow:rgba(255,255,255,.14) }
html[data-light="dusk"]{ --amb-level:.9;  --amb-warmth:.14; --amb-glow:rgba(255,190,120,.18) }
html[data-light="midnight"]{ --amb-level:.6; --amb-warmth:.10; --amb-glow:rgba(255,170,90,.10) }

/* 环境光作用面：整个舞台的亮度/暖度缓慢呼吸 */
#stage{ transition: filter 3s ease }
html[data-light="dawn"] #stage{ filter:brightness(.98) }
html[data-light="dusk"] #stage{ filter:brightness(.94) sepia(.06) }
html[data-light="midnight"] #stage{ filter:brightness(.62) sepia(.08) }

/* ———— 深度三层 & 焦点配方升级（N02 浮起配方 + N04 光影作证）———— */
.focusable.foc{ }
.bento.foc,.svc-card.foc,.music-card.foc,.ph-card.foc,.media-pick.foc,.style-card.foc{
  box-shadow:0 16px 25px rgba(0,0,0,.3);
  filter:brightness(1.1);
}
.bento,.svc-card,.music-card,.ph-card,.album-card{
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
/* 高光边：顶光打在玻璃上。
   !! 只对"文档流内"的卡片补 position:relative——绝不能碰 absolute 定位的浮层面板
   （曾把 #compose/#scribble/#storyq .panel 改成 relative → 面板塌成 2px，create 全灭）。 */
.svc-card,.music-card,.se-card,.trig-row{
  position:relative;
}
.bento::before,.svc-card::before,.music-card::before,.se-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--amb-glow),transparent);
  pointer-events:none; z-index:3;
}

/* ———— 玻璃两档（自适应 tint 由 JS 写 --wall-luma）———— */
:root{ --wall-luma:.35 }
.glass-thin{
  background:rgba(13,15,20, clamp(.35, calc(.92 - var(--wall-luma)), .8)) !important;
  backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(255,255,255,.10);
}
.glass-thick{
  background:rgba(11,13,17, clamp(.5, calc(1 - var(--wall-luma)), .86)) !important;
  backdrop-filter:blur(32px) saturate(1.45); -webkit-backdrop-filter:blur(32px) saturate(1.45);
  border:1px solid rgba(255,255,255,.12);
}
#compose .panel,#scribble .panel,#storyq .panel{ background:rgba(17,19,25,.92);
  backdrop-filter:blur(32px) saturate(1.4); -webkit-backdrop-filter:blur(32px) saturate(1.4) }
#topbar{ background:rgba(17,19,25,.72); backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3) }

/* ———— 照片墙：Aerial 式慢运镜 + 交叉溶解（双缓冲）———— */
#amb-img,#amb-img2{ transition:opacity 1.6s ease-in-out; will-change:opacity,transform }
.kenburns{ animation:kenburns 16s ease-in-out infinite alternate }
@keyframes kenburns{ from{ transform:scale(1.0) } to{ transform:scale(1.045) } }
html[data-light="midnight"] .kenburns{ animation-play-state:paused }

/* ———— 潮汐格：晨间来信（信封）———— */
#tide-letter{
  position:absolute; right:44px; bottom:150px; z-index:9;
  width:300px; border-radius:20px; padding:18px 20px;
  display:none; align-items:center; gap:14px; cursor:pointer;
  opacity:0; transform:translateY(14px);
  transition:opacity var(--tide) ease, transform var(--tide) var(--spring);
}
#tide-letter.in{ display:flex; opacity:1; transform:translateY(0) }
#tide-letter.recede{ opacity:.45 }
#tide-letter .env{
  width:64px; height:46px; flex:none; position:relative; border-radius:7px;
  background:linear-gradient(160deg,#F4EDE2,#E4D8C4);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
#tide-letter .env::before{ /* 信封翻盖 */
  content:""; position:absolute; inset:0 0 auto 0; height:24px;
  background:linear-gradient(160deg,#EFE6D6,#DCCEB4);
  clip-path:polygon(0 0,100% 0,50% 100%); border-radius:7px 7px 0 0;
}
#tide-letter .env::after{ /* 火漆 · 身份红（全屏唯一一处） */
  content:""; position:absolute; left:50%; top:16px; width:12px; height:12px;
  border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%, #F26A60, var(--identity) 65%);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
#tide-letter .tl-txt{ display:flex; flex-direction:column; gap:4px; min-width:0 }
#tide-letter .tl-a{ font-size:16px; font-weight:600; color:#fff }
#tide-letter .tl-b{ font-size:13px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ———— 信箱（Lucide mailbox + 呼吸光点；有新信时图标转暖）———— */
#mailbox{
  position:absolute; right:44px; bottom:56px; z-index:9; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:.5; transition:opacity .3s, color .5s; color:rgba(255,255,255,.75);
  border-radius:12px;
}
#mailbox:hover{ opacity:.95; background:rgba(255,255,255,.06) }
#mailbox.has{ opacity:.85; color:var(--accent) }
#mailbox .dot{ position:absolute; left:-6px; top:19px; width:4px; height:4px; border-radius:2px;
  background:var(--accent); opacity:0 }
#mailbox.has .dot{ animation:breathe 3.2s ease-in-out infinite }
@keyframes breathe{ 0%,100%{opacity:.12} 50%{opacity:.75} }
html[data-light="midnight"] #mailbox.has .dot{ animation:none; opacity:.18 }
html[data-light="midnight"] #mailbox.has{ color:rgba(255,255,255,.5) }

/* 画坊生成中：右下琥珀微光（存在感的全部） */
#atelier-glow{ position:absolute; right:86px; bottom:70px; width:5px; height:5px; border-radius:3px;
  background:#FFB44D; opacity:0; z-index:8; pointer-events:none }
#atelier-glow.on{ animation:breathe 5s ease-in-out infinite }
html[data-light="midnight"] #atelier-glow.on{ animation-duration:8s }

/* ———— 剧场模式（全局）———— */
#theater{ position:absolute; inset:0; z-index:58; display:none }
#theater.on{ display:block }
#theater .world-dim{ position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .5s ease }
#theater.on .world-dim{ background:rgba(0,0,0,.55) }
#theater .frame{
  position:absolute; left:50%; top:50%; width:min(72vw,1280px); aspect-ratio:16/9;
  transform:translate(-50%,-50%) scale(.94); opacity:0; border-radius:18px; overflow:hidden;
  background:#0B0C0F; box-shadow:0 30px 80px rgba(0,0,0,.6);
  transition:transform .5s var(--spring), opacity .5s ease;
}
#theater.on .frame{ transform:translate(-50%,-50%) scale(1); opacity:1 }
#theater .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity 1.5s ease-in-out }
#theater .chip{
  position:absolute; right:14px; bottom:14px; height:34px; border-radius:17px; padding:0 14px;
  display:flex; align-items:center; gap:8px; font-size:13px; color:#fff;
  background:rgba(11,13,17,.72); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#theater .chip .pulse{ width:7px; height:7px; border-radius:4px; background:#FFB44D;
  animation:breathe 1.6s ease-in-out infinite }
#theater .chip.done .pulse{ animation:none; background:var(--ok) }
#theater .letter-text{
  position:absolute; left:50%; bottom:calc(50% + min(36vw,640px)*9/16/1 + 26px); transform:translateX(-50%);
  font-size:clamp(18px,2.4vh,26px); color:#F2EDE4; font-weight:500; letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.6); white-space:nowrap; opacity:0; transition:opacity 1s ease .3s;
}
#theater.on .letter-text{ opacity:1 }
#theater .actions{
  position:absolute; left:50%; top:calc(50% + min(36vw,640px)*9/16 + 30px); transform:translateX(-50%);
  display:flex; gap:14px; opacity:0; transition:opacity .5s ease .4s;
}
#theater.on .actions{ opacity:1 }
#theater .t-btn{
  height:58px; border-radius:16px; padding:0 30px; font-size:17px; cursor:pointer;
  display:flex; align-items:center; color:var(--body);
  background:rgba(23,25,31,.8); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#theater .t-btn.primary{ background:var(--accent); border-color:var(--accent); color:#0B0C0F; font-weight:600 }
#theater .t-btn.foc{ box-shadow:0 12px 24px rgba(0,0,0,.4); filter:brightness(1.12) }

/* ———— 信箱浮层 ———— */
#letters{ z-index:56 }
#letters .panel{
  position:absolute; right:40px; bottom:40px; width:min(480px,calc(100vw - 80px));
  max-height:70vh; border-radius:24px; padding:24px; overflow-y:auto; scrollbar-width:none;
  background:rgba(15,17,22,.88); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(32px) saturate(1.45); -webkit-backdrop-filter:blur(32px) saturate(1.45);
  transform:translateY(16px); opacity:0; transition:all .45s var(--spring);
}
#letters.on .panel{ transform:translateY(0); opacity:1 }
#letters .lt-title{ font-size:20px; font-weight:600; margin-bottom:14px }
.letter-row{
  display:flex; gap:14px; align-items:center; padding:12px; border-radius:14px; cursor:pointer;
  transition:background .2s;
}
.letter-row:hover,.letter-row.foc{ background:rgba(255,255,255,.07) }
.letter-row img{ width:72px; height:54px; object-fit:cover; border-radius:9px; flex:none; background:var(--card-hi) }
.letter-row .lr-i{ width:72px; height:54px; border-radius:9px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:24px; background:var(--card-hi) }
.letter-row .lr-t{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.letter-row .lr-a{ font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.letter-row .lr-b{ font-size:12px; color:var(--muted) }
#letters .lt-empty{ font-size:14px; color:var(--muted); padding:20px 8px }

/* ———— 邻里画坊屏 ———— */
#atelier-wrap{ position:absolute; inset:0 34px 24px; display:flex; flex-direction:column; gap:18px; overflow:hidden }
#at-head{ display:flex; align-items:flex-end; gap:26px; margin-top:6px }
#at-fleet{ display:flex; flex-direction:column; gap:6px }
#at-fleet .fl-line{ font-size:26px; font-weight:600; color:var(--ink) }
#at-fleet .fl-line b{ color:var(--identity); font-weight:700 }
#at-fleet .fl-sub{ font-size:14px; color:var(--muted) }
#at-lights{ flex:1; height:56px; position:relative; overflow:hidden; border-radius:12px; align-self:stretch }
#at-lights i{ position:absolute; width:4px; height:4px; border-radius:2px; background:#FFB44D;
  animation:breathe 4s ease-in-out infinite }
#at-theme{ display:flex; align-items:center; gap:14px }
#at-theme .th-label{ font-size:14px; color:var(--muted) }
#at-theme .th-text{ font-size:19px; color:var(--ink); font-weight:600 }
#at-contrib{
  margin-left:auto; display:flex; align-items:center; gap:12px; cursor:pointer;
  height:50px; border-radius:16px; padding:0 18px;
  background:rgba(23,25,31,.7); border:1px solid var(--line);
}
#at-contrib .tgl{ position:relative; width:52px; height:28px; border-radius:14px;
  background:var(--card-hi); border:1px solid var(--line); transition:background .15s }
#at-contrib .tgl::after{ content:""; position:absolute; top:2px; left:3px; width:22px; height:22px;
  border-radius:11px; background:#fff; transition:left .15s }
#at-contrib.on .tgl{ background:var(--accent); border-color:var(--accent) }
#at-contrib.on .tgl::after{ left:26px }
#at-contrib .ct-t{ font-size:15px; color:var(--body) }
#at-gallery-label{ font-size:17px; font-weight:600; color:var(--body) }
#at-gallery{ flex:1; overflow-y:auto; scrollbar-width:none; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; align-content:start; padding-bottom:10px }
.at-work{ position:relative; border-radius:16px; overflow:hidden; background:var(--card);
  aspect-ratio:16/10; cursor:pointer; transition:transform .16s var(--spring);
  box-shadow:0 4px 16px rgba(0,0,0,.35) }
.at-work img{ width:100%; height:100%; object-fit:cover; display:block }
.at-work .aw-sig{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  font-size:12px; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:8px;
  opacity:0; transition:opacity .25s;
}
.at-work:hover .aw-sig,.at-work.foc .aw-sig{ opacity:1 }
.at-work .aw-dot{ width:7px; height:7px; border-radius:4px; background:var(--identity); flex:none }
.at-work.foc{ transform:scale(1.04); box-shadow:0 16px 25px rgba(0,0,0,.3); z-index:2 }

/* ———— 样张之塔星标 ———— */
#tower-star{
  position:absolute; right:26px; bottom:26px; z-index:8; display:none; align-items:center; gap:10px;
  height:34px; border-radius:17px; padding:0 13px;
  background:rgba(11,13,17,.6); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.85); font-size:13px;
}
#tower-star .star{ color:var(--accent); font-size:15px }
#tower-star .hint{ display:none; white-space:nowrap }
#tower-star.talk .hint{ display:inline }

/* ———— Boot 2.0：anet-logo 光带扫过显影（纯 transform/opacity，Safari 全版本安全）———— */
#splash2{
  position:absolute; top:0; left:0; right:0; bottom:0; background:#050607; z-index:99;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease;
  animation:splash-autohide .6s ease 2.8s forwards;   /* JS 全灭时的纯 CSS 退场兜底 */
}
@keyframes splash-autohide{ to{ opacity:0; visibility:hidden } }
#splash2 .logo-wrap{ position:relative; width:min(46vw,560px); overflow:hidden; border-radius:8px }
#splash2 img{
  display:block; width:100%; opacity:0;
  -webkit-transform:translateY(6px); transform:translateY(6px);
  animation:logo-in .9s ease-out .15s forwards;
}
#splash2 .shine{
  position:absolute; top:-20%; bottom:-20%; left:0; width:34%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  -webkit-transform:translateX(-140%) skewX(-12deg); transform:translateX(-140%) skewX(-12deg);
  animation:logo-shine 1.1s ease-in-out .55s forwards; pointer-events:none;
}
@keyframes logo-in{ to{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } }
@keyframes logo-shine{ to{ -webkit-transform:translateX(420%) skewX(-12deg); transform:translateX(420%) skewX(-12deg) } }

@media (prefers-reduced-motion:reduce){
  .kenburns{ animation:none }
  #mailbox.has .dot,#atelier-glow.on,#theater .chip .pulse,#at-lights i{ animation:none; opacity:.4 }
}
@media (max-width:900px){
  #tide-letter{ right:16px; bottom:120px; width:250px }
  #mailbox{ right:16px; bottom:30px }
  #theater .frame{ width:92vw }
}