/* onomeo 的皮肤。每一页都引这一份，放在各页自己的样式后面。
   管四件事：白绿那套配色、铺满黑底的像素猫、左上角的猫脸字标、右上角的配色开关。
   黑金那套仍然是各页原来的值，这里只在切到白绿时覆盖。 */

/* ── 白绿配色：颜色来自「项目1」那边的米白底 + 鲜绿 ── */
:root[data-scheme="light"] {
  --paper:      #fbf3e4;
  --paper-2:    #ffffff;
  --paper-3:    #f3ead8;
  --paper-hi:   #ece2cc;
  --rule:       rgba(42, 38, 32, 0.10);
  --rule-hi:    rgba(42, 38, 32, 0.22);
  --neutral:    #857a66;
  --muted:      rgba(42, 38, 32, 0.66);
  --ink:        #2a2620;
  --gold:       #58cc02;
  --gold-soft:  rgba(88, 204, 2, 0.16);
  --gold-line:  rgba(88, 204, 2, 0.5);
  /* 对话页自己那套名字 */
  --wall:       #fbf3e4;
  --card:       #ffffff;
  --ink-2:      rgba(42, 38, 32, 0.72);
  --ink-3:      rgba(42, 38, 32, 0.5);
  --hair:       rgba(42, 38, 32, 0.10);
  --hair-2:     rgba(42, 38, 32, 0.2);
}

/* 底色画在 html 上，body 透明，像素猫那层才露得出来 */
html { background: var(--wall, var(--paper)); transition: background 0.3s; }
body { background: transparent !important; }

/* ── 像素猫背景：正中淡、四周实，不抢字 ── */
.onomeo-cats {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.7) 60%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.7) 60%, #000 100%);
}

/* ── 猫脸字标：只勾轮廓的像素猫脸 + meo ── */
.wm-face { display: inline-flex; align-items: center; gap: 0.14em; line-height: 1; vertical-align: middle; }
.wm-face svg { height: 22px; width: auto; display: block; shape-rendering: crispEdges; overflow: visible; }
.wm-face .ink { fill: var(--ink); }
.wm-face .acc { fill: var(--gold); }
.wm-face .wsk { fill: var(--ink); opacity: 0.7; }
.wm-face .pup { fill: var(--wall, var(--paper)); transform: translateX(var(--px, 0px)); }
.wm-face .lid { transform-box: fill-box; transform-origin: top; transform: scaleY(0); }
.wm-face .lid .cover { fill: var(--wall, var(--paper)); }
.wm-face .lid .shut { fill: var(--ink); }
.wm-face.blink .lid { animation: onomeo-lid 0.32s steps(1, end); }
.wm-face.blink.twice .lid { animation: onomeo-lid 0.28s steps(1, end) 2; }
@keyframes onomeo-lid {
  0% { transform: scaleY(0); } 25% { transform: scaleY(0.5); } 50% { transform: scaleY(1); }
  75% { transform: scaleY(0.5); } 100% { transform: scaleY(0); }
}
:root.onomeo-asleep .wm-face .lid { transform: scaleY(1); }
.wm-face .peye.hide { visibility: hidden; }
.wm-face .meo { color: var(--gold); font-weight: 700; font-size: 17px; letter-spacing: 0.005em; }
a:hover .wm-face .meo { color: var(--gold); }

/* ── 配色开关：跟语言按钮一个长相 ── */
.scheme-btn { font: inherit; cursor: pointer; }
.scheme-btn.legal-link { background: none; border: 0; padding: 0; color: inherit; }

/* ── 开场：黑里先睁眼，再飞进字标 ── */
html.onomeo-pre body { opacity: 0; }
.onomeo-wake, .onomeo-wake-eyes {
  position: fixed; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 34px;
}
.onomeo-wake { background: var(--wall, var(--paper)); z-index: 9998; transition: opacity 0.6s; }
.onomeo-wake-eyes { z-index: 9999; transition: opacity 0.3s; }
.onomeo-wake[hidden], .onomeo-wake-eyes[hidden] { display: none; }
.onomeo-wake.gone, .onomeo-wake-eyes.gone { opacity: 0; }
.onomeo-wake-eyes .eye {
  display: block; width: 72px; height: 56px; border-radius: 50%; background: var(--gold);
  position: relative; overflow: hidden; transform: scaleY(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.onomeo-wake-eyes .eye::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 46px; border-radius: 50%;
  background: var(--wall, var(--paper)); transform: translate(-50%, -50%);
}
.onomeo-wake-eyes.open .eye { transform: scaleY(1); }
.onomeo-wake-eyes.fly .eye { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .wm-face.blink .lid, .wm-face.blink.twice .lid { animation: none; }
}