/* 哈基米页 · 水墨橘猫 */
body.cat-page { min-height: 100%; overflow-x: hidden; }
.cat-corner { right: clamp(22px, 4vw, 58px); top: clamp(26px, 7vh, 72px); }

.cat-wrap {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 24px);
  padding: 82px 16px 36px;
}
.cat-head { text-align: center; }
.cat-head h1 {
  margin: 0;
  font-family: var(--font-shou);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.15;
  letter-spacing: .2em;
  text-indent: .2em;
}
.cat-head p {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--ink-soft);
}

.stage {
  position: relative;
  width: min(92vw, 620px);
  height: clamp(320px, 54vh, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage::before {
  content: "";
  position: absolute;
  width: min(76vw, 350px);
  height: min(76vw, 350px);
  border: 2px solid rgba(27,26,23,.075);
  border-radius: 48% 52% 54% 46% / 52% 46% 54% 48%;
  transform: rotate(-18deg);
  pointer-events: none;
}

.cat {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: clamp(230px, 29vw, 350px);
  cursor: pointer;
  transform-origin: 50% 32%;      /* 以头部为轴，放大时脸始终留在画面里 */
  will-change: transform;         /* 提前交给 GPU，放大时不卡 */
  -webkit-tap-highlight-color: transparent;
}
.cat:focus-visible { outline: 2px solid rgba(27,26,23,.45); outline-offset: 14px; border-radius: 50%; }
.cat-inner { display: block; animation: catBreathe 4.8s ease-in-out infinite; }

.cat picture { display: block; width: 100%; }

/* 猫图：任意比例的图片都能自适应，不拉伸。
   当前 cat.png 已抠掉白底；如果换成白底照片，加一行
   mix-blend-mode: multiply; 就能让底色融进宣纸。 */
.cat-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(300px, 50vh, 460px);
  object-fit: contain;
  margin: 0 auto;
  filter: saturate(.97) contrast(.98) brightness(1.01);
  -webkit-user-drag: none;
  user-select: none;
}
@keyframes catBreathe {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.012); }
}

/* 点击：先微微一沉蓄力，再猛地弹大、轻轻上跳，最后带阻尼落回 */
.cat.is-puff { animation: catPuff 1.15s cubic-bezier(.22,.72,.28,1) both; }
@keyframes catPuff {
  0%   { transform: translateY(0)    scale(1, 1)          rotate(0deg); }
  8%   { transform: translateY(2px)  scale(.95, 1.03)     rotate(-1deg); }
  22%  { transform: translateY(-8px) scale(1.7, 1.76)     rotate(-2.6deg); }
  38%  { transform: translateY(-3px) scale(1.56, 1.6)     rotate(2.2deg); }
  56%  { transform: translateY(0)    scale(1.3, 1.26)     rotate(-1.3deg); }
  74%  { transform: translateY(0)    scale(1.1, 1.11)     rotate(.7deg); }
  88%  { transform: translateY(0)    scale(.985, 1.005)   rotate(-.3deg); }
  100% { transform: translateY(0)    scale(1, 1)          rotate(0deg); }
}

.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bubble {
  position: absolute;
  left: 58%;
  top: -1%;
  max-width: 38%;
  padding: 12px 20px;
  background: rgba(243,239,228,.97);
  border: 1.5px solid rgba(27,26,23,.72);
  border-radius: 20px 24px 18px 22px / 22px 18px 24px 20px;
  color: var(--ink);
  font-family: var(--font-shou);
  font-size: clamp(16px, 2.4vw, 26px);
  line-height: 1.35;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(27,26,23,.11);
  animation: bubbleIn .5s cubic-bezier(.2,1.5,.35,1) both;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -7px;
  width: 12px; height: 12px;
  background: rgba(243,239,228,.97);
  border-right: 1.5px solid rgba(27,26,23,.72);
  border-bottom: 1.5px solid rgba(27,26,23,.72);
  transform: rotate(45deg);
}
@keyframes bubbleIn {
  0%   { transform: scale(.3) translateY(20px) rotate(-9deg); opacity: 0; }
  55%  { transform: scale(1.12) translateY(0) rotate(3deg); opacity: 1; }
  78%  { transform: scale(.97) rotate(-1.2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.bubble.is-out { animation: bubbleOut .4s ease-in forwards; }
@keyframes bubbleOut {
  to { transform: translateY(-14px) scale(.92); opacity: 0; }
}

/* 猫放大时，标题与落款退到背景，视觉焦点只在猫身上 */
.cat-head, .cat-foot { transition: opacity .28s ease; }
body.is-puffing .cat-head,
body.is-puffing .cat-foot { opacity: .16; }

.cat-foot {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: .36em;
  color: var(--ink-soft);
  opacity: .7;
}

@media (max-width: 560px) {
  .cat-wrap { padding-top: 74px; }
  .stage { height: clamp(300px, 46vh, 400px); }
  .cat { width: min(78vw, 300px); }
  .cat-img { height: clamp(290px, 48vh, 430px); }
  .bubble { left: 54%; top: -3%; max-width: 44%; padding: 10px 14px; }
  .cat-corner { font-size: 10px; }
}
@media (max-height: 660px) {
  .stage { height: 300px; }
  .cat { width: 210px; }
  .cat-img { height: 300px; }
}