/* 阳阳小屋 · 阳阳——金太阳鹦鹉（DESIGN.md §1.5；2026-09-19 由墨滴换成鹦鹉，部件 class 不变）
 * 依赖 tokens.css。SVG 由 mascot.js 一次构建，七种 mood 用根节点 class 切换：
 *   .mx-mascot--idle / --happy / --excited / --oops / --think / --sleepy / --cheer
 * 结构：.mx-mascot（定位、位移过渡）> .mx-mascot__bubble + svg > .mx-mascot__rig（一次性动作）> .mx-mascot__breath（呼吸）> 各部件
 */

/* main 放在 body 里的固定层：铺满视口、不挡触摸 */
.mx-mascot-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-mascot);
  pointer-events: none;
  overflow: visible;
}

.mx-mascot {
  --mx-mascot-size: 150px;
  --mx-body: #ffb43c;                 /* 金太阳：金黄到橙 */
  --mx-body-shade: #e07a2a;
  --mx-body-line: #5a3a1e;            /* 深棕描边，多邻国那种粗线条的精神 */
  --mx-wing: #3fae5a;
  --mx-wing-tip: #3b7fd1;
  --mx-face: #ff8a3a;
  --mx-beak: #3b3b45;
  --mx-blink: 5.2s;

  position: absolute;
  left: 0;
  top: 0;
  width: var(--mx-mascot-size);
  height: calc(var(--mx-mascot-size) * 1.2);
  transform: translate3d(var(--mx-x, 24px), var(--mx-y, 0px), 0);
  transition: transform .4s var(--ease-out), opacity .2s ease, visibility .2s;
  will-change: transform;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}
.mx-mascot.is-hidden { opacity: 0; visibility: hidden; }

.mx-mascot__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* ---------- 部件颜色 ---------- */

.mx-mascot__shadow { fill: var(--ink); opacity: .12; }
.mx-mascot__body { fill: url(#mx-mascot-bodyg); stroke: var(--mx-body-line); stroke-width: 2.6; stroke-linejoin: round; }
.mx-mascot__belly { fill: #ffd76a; opacity: .55; }
.mx-mascot__body-shade { fill: var(--mx-body-shade); mix-blend-mode: multiply; opacity: .35; }
.mx-mascot__head { fill: url(#mx-mascot-headg); stroke: var(--mx-body-line); stroke-width: 2.6; stroke-linejoin: round; }
.mx-mascot__face { fill: var(--mx-face); opacity: .9; }
.mx-mascot__crest { fill: #ff7a2e; stroke: var(--mx-body-line); stroke-width: 2.2; stroke-linejoin: round; }
.mx-mascot__eye-ring { fill: #fff8ea; stroke: var(--mx-body-line); stroke-width: 1.6; }
.mx-mascot__wing { fill: url(#mx-mascot-wingg); stroke: var(--mx-body-line); stroke-width: 2.4; stroke-linejoin: round; }
.mx-mascot__wing-tip { fill: var(--mx-wing-tip); opacity: .9; }
.mx-mascot__wing-line { fill: none; stroke: var(--mx-body-line); stroke-width: 1.4; stroke-linecap: round; opacity: .45; }
.mx-mascot__tail-feather { fill: var(--mx-wing); stroke: var(--mx-body-line); stroke-width: 2.2; stroke-linejoin: round; }
.mx-mascot__tail-tip { fill: var(--mx-wing-tip); stroke: var(--mx-body-line); stroke-width: 1.6; stroke-linejoin: round; }
.mx-mascot__foot { fill: none; stroke: #8b8b96; stroke-width: 4; stroke-linecap: round; }
.mx-mascot__beak { fill: var(--mx-beak); stroke: var(--mx-body-line); stroke-width: 1.6; stroke-linejoin: round; }
.mx-mascot__beak-light { fill: #ffffff; opacity: .28; }
.mx-mascot__beak-line { fill: none; stroke: #16161c; stroke-width: 2; stroke-linecap: round; }
.mx-mascot__beak-inner { fill: #7a2b2b; }
.mx-mascot__beak-lower { fill: var(--mx-beak); stroke: var(--mx-body-line); stroke-width: 1.4; stroke-linejoin: round; }
.mx-mascot__brush-handle { fill: none; stroke: var(--wood); stroke-width: 8; stroke-linecap: round; }
.mx-mascot__brush-handle-line { fill: none; stroke: var(--wood-dark); stroke-width: 10.5; stroke-linecap: round; opacity: .6; }
.mx-mascot__brush-ferrule { fill: none; stroke: var(--paper); stroke-width: 8; stroke-linecap: butt; }
.mx-mascot__brush-hair { fill: var(--ink); }
.mx-mascot__brush-top { fill: var(--coral); }
.mx-mascot__eye { fill: var(--ink); }
.mx-mascot__eye-light { fill: var(--paper); }
.mx-mascot__eye-star { fill: var(--gold); stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.mx-mascot__eye-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mx-mascot__blush { fill: #ff5a3d; opacity: .35; }
.mx-mascot__tongue { fill: #ff8fa3; }
.mx-mascot__sweat { fill: var(--sky-accent); stroke: color-mix(in oklab, var(--sky-accent) 70%, var(--ink) 30%); stroke-width: 1.5; }
.mx-mascot__dot { fill: var(--ink-soft); }
.mx-mascot__zzz { fill: var(--ink-soft); stroke: var(--paper); stroke-width: 3; paint-order: stroke; font-family: var(--font-display); }
.mx-mascot__spark { fill: var(--gold-2); stroke: var(--gold); stroke-width: 1.2; stroke-linejoin: round; }

/* ---------- 表情部件的显隐（默认 idle 的样子） ---------- */

.mx-mascot__eye-star,
.mx-mascot__eyes-oops,
.mx-mascot__eyes-closed,
.mx-mascot__eyes-glad,
.mx-mascot__mouth-open,
.mx-mascot__mouth--wavy,
.mx-mascot__mouth--o,
.mx-mascot__mouth--flat,
.mx-mascot__sweat,
.mx-mascot__dots,
.mx-mascot__zzzs,
.mx-mascot__sparks {
  display: none;
}

.mx-mascot--happy   .mx-mascot__eyes-normal,
.mx-mascot--excited .mx-mascot__eyes-normal,
.mx-mascot--oops    .mx-mascot__eyes-normal,
.mx-mascot--sleepy  .mx-mascot__eyes-normal,
.mx-mascot--cheer   .mx-mascot__eyes-normal,
.mx-mascot--happy   .mx-mascot__mouth--smile,
.mx-mascot--excited .mx-mascot__mouth--smile,
.mx-mascot--oops    .mx-mascot__mouth--smile,
.mx-mascot--think   .mx-mascot__mouth--smile,
.mx-mascot--sleepy  .mx-mascot__mouth--smile,
.mx-mascot--cheer   .mx-mascot__mouth--smile {
  display: none;
}

.mx-mascot--happy   .mx-mascot__eye-star     { display: block; }
.mx-mascot--happy   .mx-mascot__mouth-open   { display: block; }
.mx-mascot--excited .mx-mascot__eyes-glad    { display: block; }
.mx-mascot--excited .mx-mascot__mouth-open   { display: block; }
.mx-mascot--excited .mx-mascot__sparks       { display: block; }
.mx-mascot--oops    .mx-mascot__eyes-oops    { display: block; }
.mx-mascot--oops    .mx-mascot__mouth--wavy  { display: block; }
.mx-mascot--oops    .mx-mascot__sweat        { display: block; }
.mx-mascot--think   .mx-mascot__mouth--flat  { display: block; }
.mx-mascot--think   .mx-mascot__dots         { display: block; }
.mx-mascot--sleepy  .mx-mascot__eyes-closed  { display: block; }
.mx-mascot--sleepy  .mx-mascot__mouth--o     { display: block; }
.mx-mascot--sleepy  .mx-mascot__zzzs         { display: block; }
.mx-mascot--cheer   .mx-mascot__eyes-glad    { display: block; }
.mx-mascot--cheer   .mx-mascot__mouth-open   { display: block; }

/* ---------- 常驻动画：呼吸、眨眼、偶尔瞟一眼 ---------- */

.mx-mascot__rig {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .26s var(--ease-bounce);
}
.mx-mascot__breath {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mx-mascot-breathe 3.2s ease-in-out infinite;
}
.mx-mascot__eyes-normal {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mx-mascot-blink var(--mx-blink) linear infinite;
}
.mx-mascot__pupils {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mx-mascot-glance 9s ease-in-out infinite;
  transition: transform .3s var(--ease-out);
}

@keyframes mx-mascot-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.015, 1.035); }
}
@keyframes mx-mascot-blink {
  0%, 91%  { transform: scaleY(1); }
  94%      { transform: scaleY(.08); }
  97%, 100% { transform: scaleY(1); }
}
@keyframes mx-mascot-glance {
  0%, 68%  { transform: translate(0, 0); }
  74%, 86% { transform: translate(5px, 2px); }
  92%, 100% { transform: translate(0, 0); }
}

/* ---------- 一次性动作 ---------- */

/* happy：跳一下（压扁 → 起跳 → 落地回弹） */
.mx-mascot--happy .mx-mascot__rig {
  animation: mx-mascot-jump .62s var(--ease-out) both;
}
@keyframes mx-mascot-jump {
  0%   { transform: translateY(0) scale(1, 1); }
  16%  { transform: translateY(2px) scale(1.1, .88); }
  46%  { transform: translateY(-38px) scale(.95, 1.08); }
  72%  { transform: translateY(0) scale(1.08, .92); }
  86%  { transform: translateY(-7px) scale(.99, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* excited：原地转一圈 + 墨尖冒火花 */
.mx-mascot--excited .mx-mascot__rig {
  transform-origin: 50% 58%;
  animation: mx-mascot-spin .8s var(--ease-out) both;
}
@keyframes mx-mascot-spin {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
.mx-mascot__spark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mx-mascot-spark 1.1s ease-out infinite;
}
.mx-mascot__sparks > g:nth-child(2) .mx-mascot__spark { animation-delay: .35s; }
.mx-mascot__sparks > g:nth-child(3) .mx-mascot__spark { animation-delay: .7s; }
@keyframes mx-mascot-spark {
  0%   { transform: scale(.2) rotate(0); opacity: 0; }
  30%  { transform: scale(1.1) rotate(20deg); opacity: 1; }
  100% { transform: scale(.5) rotate(60deg) translateY(-10px); opacity: 0; }
}

/* oops：歪头 + 汗滴 */
.mx-mascot--oops .mx-mascot__rig { transform: rotate(-9deg); }
.mx-mascot__sweat {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: mx-mascot-sweat 1.6s ease-in infinite;
}
@keyframes mx-mascot-sweat {
  0%   { transform: translateY(-4px) scale(.6); opacity: 0; }
  20%  { transform: translateY(0) scale(1); opacity: 1; }
  80%  { transform: translateY(14px) scale(1); opacity: 1; }
  100% { transform: translateY(20px) scale(.8); opacity: 0; }
}

/* think：眼睛看上方 + 头顶三个点依次亮起 */
.mx-mascot--think .mx-mascot__pupils { animation: none; transform: translate(4px, -6px); }
.mx-mascot__dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mx-mascot-dot 1.5s ease-in-out infinite;
}
.mx-mascot__dot:nth-child(2) { animation-delay: .22s; }
.mx-mascot__dot:nth-child(3) { animation-delay: .44s; }
@keyframes mx-mascot-dot {
  0%, 100% { opacity: .15; transform: translateY(2px) scale(.8); }
  35%, 60% { opacity: 1; transform: translateY(0) scale(1); }
}

/* sleepy：闭眼 + Zzz 飘走 + 呼吸放慢、身子微微歪 */
.mx-mascot--sleepy .mx-mascot__rig { transform: rotate(5deg); }
.mx-mascot--sleepy .mx-mascot__breath { animation-duration: 4.6s; }
.mx-mascot--sleepy .mx-mascot__eyes-normal { animation: none; }
.mx-mascot__zzz {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mx-mascot-zzz 2.6s ease-out infinite;
}
.mx-mascot__zzz:nth-child(2) { animation-delay: .85s; }
.mx-mascot__zzz:nth-child(3) { animation-delay: 1.7s; }
@keyframes mx-mascot-zzz {
  0%   { transform: translate(0, 4px) scale(.7); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(14px, -26px) scale(1.15); opacity: 0; }
}

/* cheer：举笔挥舞 + 小碎跳 */
.mx-mascot--cheer .mx-mascot__rig { animation: mx-mascot-bob .5s ease-in-out infinite; }
.mx-mascot__arm-r {
  transform-box: view-box;
  transform-origin: 150px 150px;
  transition: transform .3s var(--ease-out);
}
.mx-mascot--cheer .mx-mascot__arm-r { animation: mx-mascot-wave .34s ease-in-out infinite alternate; }
.mx-mascot--happy .mx-mascot__arm-r { transform: rotate(-16deg); }
.mx-mascot--excited .mx-mascot__arm-r { transform: rotate(-22deg); }
.mx-mascot--sleepy .mx-mascot__arm-r { transform: rotate(22deg); }
.mx-mascot__arm-l {
  transform-box: view-box;
  transform-origin: 58px 124px;
  transition: transform .3s var(--ease-out);
}
.mx-mascot--cheer .mx-mascot__arm-l { animation: mx-mascot-wave-l .34s ease-in-out infinite alternate; }
@keyframes mx-mascot-wave-l {
  from { transform: rotate(-30deg); }
  to   { transform: rotate(-60deg); }
}
@keyframes mx-mascot-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-7px) scale(.99, 1.02); }
}
@keyframes mx-mascot-wave {
  from { transform: rotate(-34deg); }
  to   { transform: rotate(16deg); }
}

/* ---------- 气泡 ---------- */

.mx-mascot__bubble {
  position: absolute;
  bottom: calc(100% - 14px);
  left: 62%;
  width: max-content;
  min-width: 96px;
  max-width: min(320px, 70vw);
  padding: 10px 15px;
  background: var(--paper-noise), var(--paper);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  font: 17px/1.45 var(--font-body);
  color: var(--ink);
  white-space: pre-line;
  word-break: break-word;
  transform-origin: 0 100%;
  transform: scale(.82) translateY(6px);
  opacity: 0;
  visibility: hidden;
  transition: transform .26s var(--ease-bounce), opacity .2s ease, visibility .26s;
}
.mx-mascot__bubble.is-on {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
}
.mx-mascot__bubble.is-off {
  transition: transform .15s var(--ease-in), opacity .15s var(--ease-in), visibility .15s;
}
/* 尾巴：一小块旋转的方块，指向阳阳的头 */
.mx-mascot__bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 14px;
  width: 13px;
  height: 13px;
  background: var(--paper);
  border-right: 1px solid var(--card-stroke);
  border-bottom: 1px solid var(--card-stroke);
  transform: rotate(45deg) skew(12deg, 12deg);
  border-bottom-right-radius: 3px;
}
/* 阳阳靠右时气泡翻到左边 */
.mx-mascot__bubble.is-left {
  left: auto;
  right: 62%;
  transform-origin: 100% 100%;
}
.mx-mascot__bubble.is-left::after {
  left: auto;
  right: 14px;
  transform: rotate(45deg) skew(-12deg, -12deg);
}

/* ---------- 减少动态：只留状态，不循环 ---------- */

@media (prefers-reduced-motion: reduce) {
  .mx-mascot__breath, .mx-mascot__eyes-normal, .mx-mascot__pupils,
  .mx-mascot__spark, .mx-mascot__sweat, .mx-mascot__dot, .mx-mascot__zzz,
  .mx-mascot--cheer .mx-mascot__rig, .mx-mascot--cheer .mx-mascot__arm-r, .mx-mascot--cheer .mx-mascot__arm-l {
    animation: none !important;
  }
  .mx-mascot__spark, .mx-mascot__sweat, .mx-mascot__dot, .mx-mascot__zzz { opacity: 1; }
  .mx-mascot--cheer .mx-mascot__arm-r { transform: rotate(-30deg); }
  .mx-mascot--cheer .mx-mascot__arm-l { transform: rotate(110deg); }
  .mx-mascot { transition-duration: 1ms; }
}