/* Shared tokens, fonts and the character art used on both pages. */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latin-wght.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-205F;
}
@font-face {
  font-family: 'WenKai';
  src: url('../fonts/wenkai-subset.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #FFF8F4;
  --paper: #FFFFFF;
  --ink: #4B3A42;
  --ink-soft: #8C7881;
  --ink-faint: #BCAEB4;
  --line: #F1E3E7;
  --rose: #E7728F;
  --rose-deep: #C9506F;
  --blush: #FCE6EC;
  --blush-2: #FFF0F3;
  --peach: #FFE3D3;
  --lav: #ECE4F8;
  --mint: #DDF2E8;
  --mint-ink: #3E8C6B;
  --butter: #FFF3CF;
  --bad: #E35D6A;
  --bad-soft: #FDE4E6;
  --good: #44A57A;
  --good-soft: #E1F4EA;
  --law: #6A7FD0;
  --law-soft: #E8ECFB;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(120, 60, 80, .06), 0 8px 24px rgba(201, 80, 111, .08);
  --font: 'Fredoka', 'WenKai', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'WenKai', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', system-ui, sans-serif;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 10px; }

/* ---- 暖宝 ---- */
.nb { display: block; width: 100%; height: auto; overflow: visible; }
.nb-bob { animation: nb-bob 3.2s ease-in-out infinite; transform-origin: 100px 240px; }
.nb-eyes .nb-eye { transform-box: fill-box; transform-origin: center; animation: nb-blink 5.5s infinite; }
.nb-iris, .nb-shine { transition: transform .25s ease-out; }
.nb-lock-l, .nb-tail-l { transform-box: fill-box; transform-origin: 50% 0; animation: nb-sway 3.2s ease-in-out infinite; }
.nb-lock-r, .nb-tail-r { transform-box: fill-box; transform-origin: 50% 0; animation: nb-sway 3.2s ease-in-out infinite reverse; }
.nb-happy { opacity: 0; }
.nb-glasses { opacity: 0; transform: translateY(-14px); transform-box: fill-box; transition: opacity .3s, transform .45s var(--ease-spring); }
.nb-glasses.on { opacity: 1; transform: none; }
.nb.is-happy .nb-eyes { opacity: 0; }
.nb.is-happy .nb-happy { opacity: 1; }
.nb.is-happy .nb-arm-l, .nb.is-happy .nb-arm-r { animation: nb-wave .5s ease-in-out 3; }
.nb-arm-l, .nb-arm-r { transform-box: fill-box; transform-origin: 50% 20%; }

@keyframes nb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nb-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes nb-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes nb-wave { 50% { transform: rotate(-16deg) translateY(-3px); } }

/* ---- Mushrooms ---- */
.mush { display: block; width: 100%; height: auto; overflow: visible; }
.mush-body { transform-origin: 50px 104px; }
.mush-eyes { transform-box: fill-box; transform-origin: center; animation: nb-blink 4.6s infinite; }
.mush.is-hop .mush-body { animation: mush-hop .55s var(--ease-spring); }
.mush.is-walk .mush-body { animation: mush-waddle .5s ease-in-out infinite; }
.mush.is-walk .mush-foot-l { animation: mush-step .5s ease-in-out infinite; }
.mush.is-walk .mush-foot-r { animation: mush-step .5s ease-in-out infinite .25s; }
@keyframes mush-hop {
  0% { transform: scale(1, 1); }
  20% { transform: scale(1.12, .84); }
  45% { transform: translateY(-26px) scale(.92, 1.1); }
  75% { transform: translateY(0) scale(1.08, .92); }
  100% { transform: scale(1, 1); }
}
@keyframes mush-waddle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-1.5px); } }
@keyframes mush-step { 50% { transform: translateY(-2.5px); } }

@media (prefers-reduced-motion: reduce) {
  .nb-bob, .nb-lock-l, .nb-lock-r, .nb-tail-l, .nb-tail-r, .mush.is-walk .mush-body,
  .mush.is-walk .mush-foot-l, .mush.is-walk .mush-foot-r { animation: none; }
}