/* ============================================================
   My Dream Home · 生活化元素
   让「工程图纸」住进人：窗 / 扫地机器人 / 礼貌的摄像头 / 家的一天
   与 style.css 共用主题令牌；类名前缀：win / bot / cam / radar / day
   ============================================================ */

/* ============================================================
   一、窗 —— 理想家的第一个画面
   深色主题 = 黄昏归家（墨蓝天 + 琥珀余晖）
   浅色主题 = 清晨醒来（清透暖白 + 淡蓝天光）
   ============================================================ */
.win{
  position:relative; overflow:hidden;
  border:1px solid var(--rule-2); border-radius:3px;
  background:var(--panel);
  box-shadow:0 1px 0 var(--rule);
}
.win__stage{ position:relative; }
.win__stage svg{ display:block; width:100%; height:auto; }

/* 天空：随主题变化（见下方主题块） */
.win-sky{ fill:url(#winSky); }
.win-hill-back{ fill:var(--hill-back); }
.win-hill-front{ fill:var(--hill-front); }
.win-sill{ fill:url(#winSill); }
.sky-top{ stop-color:var(--sky-top); }
.sky-mid{ stop-color:var(--sky-mid); }
.sky-low{ stop-color:var(--sky-low); }
.sill-top{ stop-color:var(--sill-top); }
.sill-low{ stop-color:var(--sill-low); }

/* 光束：斜向扫过窗内，缓慢流动 */
.win-beam{
  fill:var(--beam);
  animation:beamDrift 11s var(--ease) infinite alternate;
  transform-box:fill-box; transform-origin:center;
}
@keyframes beamDrift{
  0%{ opacity:.28; transform:translateX(-4%) rotate(.5deg); }
  100%{ opacity:.62; transform:translateX(5%) rotate(-.8deg); }
}

/* 太阳 / 余晖：呼吸感 */
.win-glow{ fill:var(--sun); animation:glowPulse 6s var(--ease) infinite; }
@keyframes glowPulse{
  0%,100%{ opacity:.85; }
  50%{ opacity:.45; }
}

/* 窗帘：两侧垂坠，轻微摆动 */
.win-curtain{ fill:var(--curtain); stroke:var(--curtain-line); stroke-width:1; }
.win-curtain--l{ transform-origin:top left; animation:curtainL 9s ease-in-out infinite; }
.win-curtain--r{ transform-origin:top right; animation:curtainR 9s ease-in-out infinite; }
@keyframes curtainL{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(1.6%);} }
@keyframes curtainR{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(-1.6%);} }

/* 热茶蒸汽：两条曲线上升 */
.win-steam{ fill:none; stroke:var(--steam); stroke-width:1.2; stroke-linecap:round; }
.win-steam--1{ animation:steam 4s ease-in-out infinite; }
.win-steam--2{ animation:steam 4s ease-in-out infinite 1.3s; }
@keyframes steam{
  0%{ opacity:0; transform:translateY(3px); }
  40%{ opacity:.7; }
  100%{ opacity:0; transform:translateY(-8px); }
}

/* 窗的题注：挂在右下角，说明「这扇窗在做什么」 */
.win__cap{
  position:absolute; right:14px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-din); font-size:10px; letter-spacing:.14em;
  color:var(--ink-2); background:var(--topbar-bg);
  padding:5px 10px; border:1px solid var(--rule-2); border-radius:2px;
}
.win__cap .lamp{ width:5px; height:5px; }

/* ============================================================
   二、扫地机器人 —— 会自己干活的家庭成员
   固定在视口底部，随滚动推进，扫过的地方变干净
   ============================================================ */
.scrollbot{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  pointer-events:none;
  padding:0 20px 14px;
}
.scrollbot__track{
  position:relative; height:2px; max-width:var(--maxw);
  margin:0 auto; background:var(--rule);
  overflow:visible;
}
/* 已清扫区 = 阅读进度，琥珀色 */
.scrollbot__clean{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  background:linear-gradient(90deg, var(--sig), var(--sig-2));
  transform:scaleX(0); transform-origin:left;
  opacity:.5;
}
/* 机器人本体：沿轨道行进 */
.scrollbot__bot{
  position:absolute; top:50%; left:0;
  width:34px; height:22px;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
  transition:none;
}
.scrollbot__bot svg{ display:block; width:100%; height:100%; }
.scrollbot__bot--run{ animation:botBob .9s ease-in-out infinite; }
@keyframes botBob{
  0%,100%{ transform:translate(-50%,-50%); }
  50%{ transform:translate(-50%,-62%); }
}
.bot-body{ fill:var(--panel-2); stroke:var(--rule-3); stroke-width:1.2; }
.bot-top{ fill:var(--panel); stroke:var(--rule-2); stroke-width:1; }
.bot-eye{ fill:var(--sig); }
.bot-whisker{ fill:none; stroke:var(--dwg-dim); stroke-width:1.4; stroke-linecap:round; }
.bot-whisker--l{ animation:whiskL .8s ease-in-out infinite alternate; transform-origin:center; }
.bot-whisker--r{ animation:whiskR .8s ease-in-out infinite alternate; transform-origin:center; }
@keyframes whiskL{ from{ transform:rotate(0);} to{ transform:rotate(-14deg);} }
@keyframes whiskR{ from{ transform:rotate(0);} to{ transform:rotate(14deg);} }

@media (max-width:860px){
  .scrollbot{ display:none; }
}

/* ============================================================
   三、礼貌的摄像头 —— 不用时，自觉地闭上眼
   对比：摄像头（物理遮挡，默认关闭） vs 毫米波雷达（只感知存在）
   ============================================================ */
.camrow{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--rule); border:1px solid var(--rule-2);
  border-radius:3px; overflow:hidden;
}
.camcell{ position:relative; background:var(--bg-alt); padding:34px 30px 36px; }
.camcell--off::after{
  content:"OFF"; position:absolute; top:18px; right:18px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-3); border:1px solid var(--rule-2); padding:2px 7px; border-radius:2px;
}
.camcell--on::after{
  content:"ON"; position:absolute; top:18px; right:18px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  color:var(--sig); border:1px solid var(--sig-dip); padding:2px 7px; border-radius:2px;
}
.camcell__svg{ max-width:220px; margin:0 auto 22px; }
.camcell__svg svg{ display:block; width:100%; height:auto; }
.camcell h3{ margin:0 0 10px; font-size:17px; font-weight:600; }
.camcell h3 small{
  display:block; margin-top:6px;
  font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:.1em; color:var(--ink-3);
}
.camcell p{ margin:0; font-size:14px; line-height:1.9; color:var(--ink-2); }
.camcell p b{ color:var(--ink); font-weight:600; }

/* 摄像头本体 */
.cam-base{ fill:var(--panel-2); stroke:var(--rule-3); stroke-width:1.2; }
.cam-dome{ fill:var(--panel); stroke:var(--rule-3); stroke-width:1.2; }
.cam-lens{ fill:var(--lens); stroke:var(--rule-3); stroke-width:1; }
/* 快门叶片：默认闭合（物理遮挡） */
.cam-blade{ fill:var(--ink-3); stroke:var(--rule-3); stroke-width:.6; transform-origin:50% 50%; }
.camcell--off .cam-blade{ animation:bladeIdle 7s var(--ease) infinite; }
@keyframes bladeIdle{
  0%,88%,100%{ transform:rotate(0); }
  92%{ transform:rotate(0); }
}
.camcell--on .cam-blade{ transform:rotate(0); }

/* 雷达波纹 */
.radar-ring{ fill:none; stroke:var(--sig); stroke-width:1.2; transform-box:fill-box; transform-origin:center; }
.radar-ring--1{ animation:radarPing 2.8s ease-out infinite; }
.radar-ring--2{ animation:radarPing 2.8s ease-out infinite .9s; }
.radar-ring--3{ animation:radarPing 2.8s ease-out infinite 1.8s; }
@keyframes radarPing{
  0%{ opacity:.55; transform:scale(.22); }
  100%{ opacity:0; transform:scale(1.05); }
}
.radar-dot{ fill:var(--sig); }

/* ============================================================
   四、家的一天 —— 光环境条（色温从清晨走到深夜）
   ============================================================ */
.dayline{
  position:relative; margin:0 0 8px;
  border:1px solid var(--rule-2); border-radius:3px;
  background:var(--bg-alt); padding:26px 30px 22px;
  overflow:hidden;
}
.dayline__bar{
  position:relative; height:16px; border-radius:2px; overflow:hidden;
  background:linear-gradient(90deg,
    #1b2a4a 0%,    /* 03:00 深夜蓝 */
    #3a4a7a 8%,    /* 清晨 */
    #7fb2c9 20%,   /* 上午 */
    #f2d9a0 40%,   /* 正午 */
    #f0a86a 58%,   /* 午后暖 */
    #e8813f 78%,   /* 黄昏琥珀 */
    #3a2a52 92%,   /* 入夜 */
    #14182e 100%   /* 深夜 */
  );
}
.dayline__sun{
  position:absolute; top:20px; left:50%; width:26px; height:26px;
  border-radius:50%; background:var(--sig);
  transform:translateX(-50%);
  box-shadow:0 0 24px 6px var(--sig-dip);
  animation:sunArc 14s var(--ease) infinite;
}
@keyframes sunArc{
  0%{ left:8%; opacity:.15; }
  25%{ left:28%; opacity:.95; }
  50%{ left:50%; opacity:1; }
  75%{ left:72%; opacity:.9; }
  100%{ left:92%; opacity:.12; }
}
.dayline__ticks{
  display:flex; justify-content:space-between; margin-top:16px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-3);
}
.dayline__note{
  margin-top:14px; font-size:12.5px; color:var(--ink-3); line-height:1.8;
}
.dayline__note b{ color:var(--sig); font-weight:600; }

/* ============================================================
   五、剖面图生活点缀 —— 窗光 / 炊烟 / 人影
   ============================================================ */
/* 窗户里透出的暖光 */
.liv-win{ fill:var(--liv-win); stroke:var(--rule-2); stroke-width:1; }
.liv-win--dim{ fill:var(--liv-win-dim); stroke:var(--rule-2); stroke-width:1; }
/* 屋顶炊烟 */
.liv-smoke{ fill:none; stroke:var(--dwg-dim); stroke-width:1.3; stroke-linecap:round; opacity:.55; }
.liv-smoke--1{ animation:smokeRise 6s ease-in-out infinite; }
.liv-smoke--2{ animation:smokeRise 6s ease-in-out infinite 2s; }
@keyframes smokeRise{
  0%{ opacity:0; transform:translateY(4px); }
  35%{ opacity:.55; }
  100%{ opacity:0; transform:translateY(-12px); }
}
/* 人影剪影 */
.liv-person{ fill:var(--person); }

/* ============================================================
   六、主题着色
   ============================================================ */
[data-theme="dark"]{
  --hill-back:   #1c2a33;
  --hill-front:  #14202a;
  --beam:        rgba(240,134,60,.16);
  --curtain:     #1a252b;
  --curtain-line:rgba(158,183,196,.28);
  --steam:       rgba(230,238,241,.5);
  --lens:        #0b0f12;
  --liv-win:     rgba(240,150,70,.30);
  --liv-win-dim: rgba(240,150,70,.14);
  --person:      #223038;
  --sky-top:     #2b3947;
  --sky-mid:     #5a4a4f;
  --sky-low:     #a86a45;
  --sill-top:    #1c252b;
  --sill-low:    #12181c;
  --sun:         #f0863c;
  --dawn-top:    #223242;
  --dawn-low:    #c98a5a;
  --blanket:     #1c262d;
}
[data-theme="light"]{
  --hill-back:   #cfe0d8;
  --hill-front:  #a8c4bd;
  --beam:        rgba(240,170,90,.20);
  --curtain:     #ffffff;
  --curtain-line:rgba(60,72,80,.16);
  --steam:       rgba(60,72,80,.35);
  --lens:        #1c262c;
  --liv-win:     rgba(224,150,70,.30);
  --liv-win-dim: rgba(224,150,70,.14);
  --person:      #d5d0c6;
  --sky-top:     #cfe0e8;
  --sky-mid:     #e8d9c8;
  --sky-low:     #f2c08a;
  --sill-top:    #ffffff;
  --sill-low:    #e8e4dc;
  --sun:         #e08a3c;
  --dawn-top:    #d7e6ef;
  --dawn-low:    #f7dfb8;
  --blanket:     #ffffff;
}

@media (max-width:860px){
  .camrow{ grid-template-columns:1fr; }
  .dayline{ padding:20px 18px 18px; }
}

/* ============================================================
   七、家的大脑 —— 清晨的一个决定
   大模型中枢（记忆环 + 脉冲）+ 决策卡（定时被划掉，今天延后）
   ============================================================ */
.brain{
  position:relative; overflow:hidden;
  border:1px solid var(--rule-2); border-radius:3px;
  background:var(--panel);
  box-shadow:0 1px 0 var(--rule);
}
.brain__stage{ position:relative; }
.brain__stage svg{ display:block; width:100%; height:auto; }

/* 清晨天空：窗外只漏进来一条窄缝的光 */
.dawn-top{ stop-color:var(--dawn-top); }
.dawn-low{ stop-color:var(--dawn-low); }

.brain__cap{
  position:absolute; right:14px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-din); font-size:10px; letter-spacing:.14em;
  color:var(--ink-2); background:var(--topbar-bg);
  padding:5px 10px; border:1px solid var(--rule-2); border-radius:2px;
}
.brain__cap .lamp{ width:5px; height:5px; }

/* 脉冲外环 */
.brain-pulse{
  fill:none; stroke:var(--sig); stroke-width:1.2;
  transform-box:fill-box; transform-origin:center;
  animation:brainPulse 3s var(--ease) infinite;
}
.brain-pulse--2{ animation-delay:1.5s; }
@keyframes brainPulse{
  0%{ opacity:.5; transform:scale(.5); }
  100%{ opacity:0; transform:scale(1.2); }
}

/* 记忆轨道 */
.brain-orbit{ fill:none; stroke:var(--rule-2); stroke-width:1; stroke-dasharray:2 5; }
.brain-links line{ stroke:var(--rule-2); stroke-width:1; }

/* 核心 */
.brain-core{ fill:var(--sig-wash); stroke:var(--sig-dip); stroke-width:1.4; }
.brain-core--in{ fill:var(--panel); stroke:var(--rule-3); stroke-width:1; }
.brain-syn line{ stroke:var(--sig); stroke-width:1.1; opacity:.75; }
.brain-syn__dot{ fill:var(--sig); animation:synBlip 2.6s var(--ease) infinite; }
.brain-syn__dot:nth-of-type(2){ animation-delay:.35s; }
.brain-syn__dot:nth-of-type(3){ animation-delay:.7s; }
.brain-syn__dot:nth-of-type(4){ animation-delay:1.05s; }
.brain-syn__dot:nth-of-type(5){ animation-delay:1.4s; }
.brain-syn__dot:nth-of-type(6){ animation-delay:1.75s; }
@keyframes synBlip{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.brain-core__t{
  font-family:var(--font-din); font-size:15px; font-weight:600;
  letter-spacing:.12em; fill:var(--sig);
}
.brain-core__s{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em;
  fill:var(--ink-3);
}

/* 记忆胶囊：它记得的习惯 */
.brain-mem rect{ fill:var(--panel-2); stroke:var(--rule-2); stroke-width:1; }
.brain-mem__t{
  font-family:var(--font-cn); font-size:10px; fill:var(--ink-2); letter-spacing:.05em;
}

/* 决策信号线 + 下落信号点 */
.brain-sigline{ stroke:var(--sig); stroke-width:1.2; stroke-dasharray:3 4; }
.brain-sigdot{ fill:var(--sig); animation:sigDrop 1.7s var(--ease) infinite; }
@keyframes sigDrop{
  0%{ transform:translateY(0); opacity:0; }
  20%{ opacity:1; }
  100%{ transform:translateY(104px); opacity:0; }
}

/* 决策卡 */
.brain-card rect{ fill:var(--bg-alt); stroke:var(--rule-2); stroke-width:1; }
.brain-card line{ stroke:var(--rule-2); stroke-width:1; }
.brain-card__off{
  font-family:var(--font-cn); font-size:11.5px; fill:var(--ink-3); letter-spacing:.03em;
}
.brain-card__del{ stroke:var(--ink-3); stroke-width:1.2; stroke-linecap:round; }
.brain-card__on{
  font-family:var(--font-cn); font-size:12.5px; font-weight:600; fill:var(--sig); letter-spacing:.03em;
}
.brain-card__on-sub{
  font-family:var(--font-cn); font-size:10px; fill:var(--ink-2); letter-spacing:.04em;
}

/* 卧室：窗帘半掩 + 还在睡的人 */
.brain-floor{ stroke:var(--rule-2); stroke-width:1; }
.brain-hill{ fill:var(--hill-front); }
.brain-curtain{ fill:var(--curtain); stroke:var(--rule-3); stroke-width:1; }
.brain-fold{ fill:none; stroke:var(--curtain-line); stroke-width:1.2; }
/* 缝里的太阳：清晨刚爬上山头 */
.brain-sunhalo{ fill:var(--sun); opacity:.16; animation:bhSun 5s var(--ease) infinite alternate; }
@keyframes bhSun{ 0%{ opacity:.1; } 100%{ opacity:.26; } }
.brain-sun{ fill:var(--sun); }
.brain-beam{ fill:var(--beam); opacity:.4; }

/* 挂在帘上的钟牌：此刻本该是定时开帘的时间 */
.brain-clock rect{
  fill:var(--panel); stroke:var(--sig-dip); stroke-width:1.2;
}
.brain-clock text{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em;
  fill:var(--sig);
}
.brain-blanket{ fill:var(--blanket); stroke:var(--rule-3); stroke-width:1.2; }
.brain-bed rect{ fill:var(--panel-2); stroke:var(--rule-3); stroke-width:1.2; }
.brain-bed line{ stroke:var(--rule-3); stroke-width:1.4; }
.brain-head{ fill:var(--person); stroke:var(--rule-3); stroke-width:1; }
.brain-z1,.brain-z2{
  fill:none; stroke:var(--ink-3); stroke-width:1.4; stroke-linecap:round;
}
.brain-z1{ animation:zz 3s ease-in-out infinite; }
.brain-z2{ animation:zz 3s ease-in-out infinite 1.5s; }
@keyframes zz{
  0%{ opacity:0; transform:translateY(3px); }
  40%{ opacity:.65; }
  100%{ opacity:0; transform:translateY(-4px); }
}

@media (prefers-reduced-motion: reduce){
  .win-beam,.win-glow,.win-curtain--l,.win-curtain--r,
  .win-steam--1,.win-steam--2,.scrollbot__bot--run,
  .radar-ring--1,.radar-ring--2,.radar-ring--3,.radar-sweep,
  .dayline__sun,.liv-smoke--1,.liv-smoke--2,.camcell--off .cam-blade,
  .brain-pulse,.brain-pulse--2,.brain-syn__dot,.brain-sigdot,.brain-z1,.brain-z2{
    animation:none !important;
  }
}