/* =========================================================
   Black Cat Decoration
   画面下を歩く小さな黒猫。LPのモノクロ世界観に合わせた装飾。
   ========================================================= */

.cat {
  position: fixed;
  left: 0;
  bottom: 14px;
  width: 64px;                 /* 画像のアスペクト比はheight:autoで維持 */
  height: auto;
  z-index: 40;                 /* ヘッダー(100)・トップ戻る(60)より下 */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  will-change: left;
  /* 画像が浮かないように下に薄い影 */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
  transition: opacity 0.35s ease;
}

/* フッタが画面に入ったら猫は隠す（PC/SP共通） */
body.footer-visible .cat {
  opacity: 0;
  pointer-events: none;
}

/* 向き反転用ラッパー（吹き出しは反転させない） */
.cat-flip {
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 画像はデフォルトで右向き → dir=-1 で水平反転 */
.cat[data-dir="-1"] .cat-flip {
  transform: scaleX(-1);
}

.cat-img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ---------- 歩く（上下のバウンド） ---------- */
.cat[data-state="walk"] .cat-img {
  animation: catBob 0.5s ease-in-out infinite;
}

@keyframes catBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ---------- しっぽを振る（idle）：身体をわずかに左右スウェイ ---------- */
.cat[data-state="tail-wag"] .cat-img {
  animation: catSway 1.1s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes catSway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ---------- 座る（脚を縮めるイメージで縦に少し縮める） ---------- */
.cat[data-state="sit"] .cat-img {
  transform: scaleY(0.9) translateY(2px);
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- クリック吹き出し ---------- */
.cat-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(6px) scale(0.85);
  background: #fff;
  color: #111;
  border: 1px solid #111;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-bubble.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 吹き出しの三角しっぽ（小さなとんがり） */
.cat-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- レスポンシブ ---------- */
/* タブレット〜スマホ：CTAバーの上を歩く */
@media (max-width: 768px) {
  .cat {
    width: 40px;
    /* SP固定CTA(高さ約76px)の上に乗るよう底辺を持ち上げる */
    bottom: calc(76px + env(safe-area-inset-bottom));
    transition: opacity 0.4s ease;
  }
  .cat-bubble {
    font-size: 10px;
    padding: 2px 8px;
  }
}

@media (max-width: 480px) {
  .cat {
    width: 36px;
  }
}

/* ---------- リデュースモーション対応 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cat,
  .cat *,
  .cat[data-state] * {
    animation: none !important;
    transition: none !important;
  }
}