/* ---------------------------------------------------------------------------
   宠物**怎么上色**。从 style.css 里抽出来的那一段，两个页面共用：

     index.html    桌面上那只真身
     looker.html   捏造型面板里的预览

   为什么不让面板整份引 style.css：那边还有 `body { pointer-events: none }`、
   `#pet { position: fixed }`、点击穿透和舞台布局那一套 —— 全是给桌面窗口的，
   套到一个普通面板上会打架。**上色是共用的，布局不是。**

   抽出来之后还白送一件事：面板里的预览和真身用的是同一份规则，
   不可能出现「预览好看、戴上去不一样」。
   （这和 web/wear.js 的位置由 bbox 现算是同一个思路：不造第二份真相。）

   这里的颜色值只是「还没加载皮肤」时的兜底。真正生效的是 web/skin.js
   按 skins/<name>.js 的 palette 写到 :root 上的同名变量，再由 web/look.js
   用用户捏的那份覆盖一遍。
--------------------------------------------------------------------------- */
:root {
  /* 低饱和 + 高明度，主色不超过三个 —— 这是「萌」的配色底线 */
  --fur:       #F0CFA4;
  --fur-dark:  #DCB283;
  --fur-light: #FBEEDC;
  --nose:      #6E5548;
  --eye:       #3A2F2B;
  --blush:     #F0A0A0;
}

/* --- 配色 ----------------------------------------------------------------- */
.fur        { fill: var(--fur); }
.fur-dark   { fill: var(--fur-dark); }
.fur-light  { fill: var(--fur-light); }
.nose       { fill: var(--nose); }
.sclera     { fill: #FFFFFF; }
/* transform-box 必须显式给 fill-box：SVG 元素的默认参考框是 view-box，
   rig.js 给瞳孔写 scale() 时会绕整个 100×100 画布的中心缩放 —— 瞳孔直接飞出脸。
   translate 不受影响，所以在加缩放之前这条一直没被需要。 */
.pupil      { fill: var(--eye); transform-box: fill-box; transform-origin: center; }
/* 高光。--spark-a 是「捏造型」里那个开关（look-items.js 的 spark 项），
   默认 .92 —— 不加载 look.js 的话它就永远是原来那个值 */
.spark      { fill: #FFFFFF; opacity: var(--spark-a, .92); }
/* 腮红透明度由表情驱动（rig.js 在 #pet 上写 --blush-a）。
   走 transition 而不是逐帧写 —— 表情切换是离散事件，没必要占着主循环。

   --blush-k 是用户捏的「腮红浓度」，**乘**上去而不是覆盖：
   透明度的真相在 rig 那边（惊讶时浓、睡着时淡），用户调的是这条曲线的
   整体高度。两边各管各的，rig.js 一行不用改。 */
.blush      { fill: var(--blush);
              opacity: calc(var(--blush-a, .38) * var(--blush-k, 1));
              transition: opacity .28s ease-out; }
/* 眼皮默认跟主毛色一致；脸上有白斑的动物（老虎眼周是白的）由皮肤单独给 --lid */
.lid        { fill: var(--lid, var(--fur)); }

/* 开心时把眼睛换成 ^ ^ */
.joy {
  fill: none;
  stroke: var(--eye);
  stroke-width: 2.8;
  stroke-linecap: round;
  opacity: 0;
}
.eye, .joy { transition: opacity .12s ease-out; }
#pet.state-happy .eye { opacity: 0; }
#pet.state-happy .joy { opacity: 1; }

/* 斑纹层：条纹、斑点、色块。颜色由皮肤的 palette.marks 给，没给就退回暗毛色。
   stroke-width / stroke-linecap 由每个皮肤自己内联给 —— 条纹粗细跟造型走。
   web/marks/ 下的通用花纹用的也是这两个类，所以「花纹色」对两者一视同仁。 */
.marks      { fill: none; stroke: var(--marks, var(--fur-dark)); }
.marks-fill { fill: var(--marks, var(--fur-dark)); }

/* 第二块**独立**底色。和 fur-light 的区别是关键：fur-light 是「底毛浅一档」，
   accent 是另一块不相干的颜色 —— 玄凤鹦鹉的黄头配灰身、企鹅的白肚配黑背、
   熊猫的黑块配白身。没有这个键的时候这类动物只能挪用 fur-light，
   于是「浅一档」的语义就废了。没给就退回 --fur-light。 */
.accent     { fill: var(--accent, var(--fur-light)); }
/* 角质部件：喙、角、象牙、蹄、爪。它不是毛，卡通化的档位也不一样
   （毛要提亮加彩度，角质要保持哑光）。 */
.hard       { fill: var(--hard, var(--fur-light)); }

.fur-dark-stroke {
  fill: none;
  stroke: var(--fur-dark);
  stroke-width: 9;
  stroke-linecap: round;
}
.mouth {
  fill: none;
  stroke: var(--nose);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* 眨眼：眼皮从上往下压。闭 70ms 是关键，慢了就变成「困」而不是「眨」。
   走 CSS transition 而不是 JS 逐帧，所以主循环降到 10fps 时它依然丝滑。
   （transform-origin 由皮肤内联给出，不在这里写死。）

   **静止时眼皮是 scaleY(0)。** look.js 的 eyeScale() 靠这一条：
   它按 <g class="eye"> 的外接框中心缩放，而眼皮收成一条线之后，
   那个框正好就是「眼白 + 瞳孔」那一块。 */
#lid-far, #lid-near {
  transform: scaleY(0);
  transition: transform 85ms cubic-bezier(.4, 0, .6, 1);
}