/* =========================================
   1. ヘッダーナビと猫の設定
   ========================================= */
#navi-in {
  position: relative !important;
  overflow: visible !important;
}

#header-walking-cat {
  position: absolute;
  top: -38px; /* viewBoxが45x45になったので少し上に調整 */
  left: -45px;
  width: 45px;
  height: 45px;
  z-index: 100;
  pointer-events: none;
  animation: cocoonCatWalk 35s linear infinite; /*猫の歩く速度*/
}

#header-walking-cat svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 停止中（パタパタ中）は歩行アニメーションを一時停止 */
#header-walking-cat.is-paused {
  animation-play-state: paused;
}

@keyframes cocoonCatWalk {
  0% { left: -45px; transform: scaleX(-1); }
  49.9% { left: calc(100% + 10px); transform: scaleX(-1); }
  50% { left: calc(100% + 10px); transform: scaleX(1); }
  99.9% { left: -45px; transform: scaleX(1); }
  100% { left: -45px; transform: scaleX(-1); }
}

/* =========================================
   2. 猫のモーション（歩き用SVG）
   ========================================= */
/* 足の回転軸設定 */
.walk-leg1 { animation: walkFront 0.4s infinite ease-in-out; transform-origin: 18px 30.93px; }
.walk-leg2 { animation: walkBack 0.4s infinite ease-in-out; transform-origin: 16px 30.93px; }
.walk-leg3 { animation: walkBack 0.4s infinite ease-in-out; transform-origin: 32px 30.93px; }
.walk-leg4 { animation: walkFront 0.4s infinite ease-in-out; transform-origin: 30px 30.93px; }
.walk-tail { animation: tailSwing 0.8s infinite ease-in-out; transform-origin: 32px 27.93px; }
.walk-body-group { animation: bodyBounce 0.4s infinite ease-in-out; }

@keyframes walkFront { 0%,100%{ transform: rotate(-22deg); } 50%{ transform: rotate(22deg); } }
@keyframes walkBack { 0%,100%{ transform: rotate(22deg); } 50%{ transform: rotate(-22deg); } }
@keyframes tailSwing { 0%,100%{ transform: rotate(-10deg); } 50%{ transform: rotate(15deg); } }
@keyframes bodyBounce { 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-1.5px); } }

/* =========================================
   3. 猫のモーション（パタパタ用SVG）
   ========================================= */
/* 前足を空に向かってパタパタさせる */
.pata-leg1 { animation: pataArmBack 0.3s infinite alternate ease-in-out; transform-origin: 16.61px 22.62px; }
.pata-leg2 { animation: pataArmFront 0.3s infinite alternate ease-in-out 0.1s; transform-origin: 16.92px 24.54px; }
/* 尻尾はゆっくり揺らす */
.pata-tail { animation: pataTail 1.5s infinite alternate ease-in-out; transform-origin: 30.54px 33.16px; }
/* 耳ピクピク */
.pata-ear-left { animation: earTwitch 2s infinite; transform-origin: 24.53px 11.12px; }
.pata-ear-right { animation: earTwitch 2.5s infinite 0.2s; transform-origin: 25.62px 14.09px; }

/* パタパタ用キーフレーム（マイナス角度で上へ上げる） */
@keyframes pataArmFront {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-35deg); }
}
@keyframes pataArmBack {
  0% { transform: rotate(10deg); }
  100% { transform: rotate(-25deg); }
}
@keyframes pataTail {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); }
}
@keyframes earTwitch {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-10deg); }
  90% { transform: rotate(5deg); }
  95% { transform: rotate(-5deg); }
}

/* =========================================
   4. 季節のエフェクト用コンテナ (既存のまま)
   ========================================= */
#seasonal-effect-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.particle { position: absolute; pointer-events: none; opacity: 0.8; }

.particle-spring { top: -10%; width: 20px; height: 20px; background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='29.2 305.4 21.3 23.1'><path fill='rgb(255,152,152)' stroke='none' paint-order='stroke fill markers' d=' M 34.14588280454544 328.4483714861401 C 29.566079796298656 311.1280562951558 37.87314123458299 306.6091875549791 40.82928844030532 305.5730710729498 C 41.40543402463986 305.37082200974584 41.9721169827107 305.5630616247794 42.26957158464043 306.0624503232821 L 43.62144408657836 308.343762945854 C 43.858968054569594 308.74347165288435 44.27399248949984 308.9535208455869 44.73538589238461 308.9075431894596 L 47.37339025053091 308.64765991405665 C 47.952794833301574 308.58995943753547 48.44242839720868 308.9344366349329 48.62062689981575 309.51846892135524 C 49.53708258484121 312.51245796064455 50.816182543534985 321.8830060071014 34.14588280454544 328.4483714861401 Z' fill-opacity='1'/></svg>"); background-size: contain; background-repeat: no-repeat; animation: fallDown linear forwards, swayAndSpin 3.5s ease-in-out infinite alternate; }
.particle-summer { top: 110%; width: 6px; height: 6px; background: #e4ff00; border-radius: 50%; box-shadow: 0 0 8px #e4ff00; animation: floatUp linear forwards, blink 1.5s ease-in-out infinite alternate; }
.particle-autumn { top: -10%; width: 20px; height: 20px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23e63946' d='M383.8 351.7c2.5-2.5 105.2-92.4 105.2-92.4l-17.5-7.5c-10-4.9-7.4-11.5-5-17.4 2.4-7.6 20.1-67.3 20.1-67.3s-47.7 10-57.7 12.5c-7.5 2.4-10-2.5-12.5-7.5s-15-32.4-15-32.4-52.6 59.9-55.1 62.3c-10 7.5-20.1 0-17.6-10 0-10 27.6-129.6 27.6-129.6s-30.1 17.4-40.1 22.4c-7.5 5-12.6 5-17.6-5C293.5 72.3 255.9 0 255.9 0s-37.5 72.3-42.5 79.8c-5 10-10 10-17.6 5-10-5-40.1-22.4-40.1-22.4S183.3 182 183.3 192c2.5 10-7.5 17.5-17.6 10-2.5-2.5-55.1-62.3-55.1-62.3S98.1 167 95.6 172s-5 9.9-12.5 7.5C73 177 25.4 167 25.4 167s17.6 59.7 20.1 67.3c2.4 6 5 12.5-5 17.4L23 259.3s102.6 89.9 105.2 92.4c5.1 5 10 7.5 5.1 22.5-5.1 15-10.1 35.1-10.1 35.1s95.2-20.1 105.3-22.6c8.7-.9 18.3 2.5 18.3 12.5S241 512 241 512h30s-5.8-102.7-5.8-112.8 9.5-13.4 18.4-12.5c10 2.5 105.2 22.6 105.2 22.6s-5-20.1-10-35.1 0-17.5 5-22.5z'/></svg>"); background-size: contain; background-repeat: no-repeat; animation: fallDown linear forwards, swayAndSpin 3.5s ease-in-out infinite alternate; }
.particle-winter { top: -10%; width: 8px; height: 8px; background: #ffffff; border-radius: 50%; box-shadow: 0 0 5px rgba(255,255,255,0.8); animation: fallDown linear forwards; }

@keyframes swayAndSpin { 0% { transform: translateX(-20px) rotate(0deg) rotateY(0deg); } 100% { transform: translateX(20px) rotate(360deg) rotateY(180deg); } }
@keyframes fallDown { to { top: 110%; } }
@keyframes floatUp { to { top: -10%; } }
@keyframes blink { from { opacity: 0.2; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } }

/* =========================================
   5. 横スクロールバー出現防止
   ========================================= */
html, body {
  overflow-x: clip;
  width: 100%;
}

/* =========================================
   6. クリック時のリアクション（吹き出し＆ジャンプ）
   ========================================= */
#header-walking-cat {
  cursor: pointer;
  pointer-events: auto !important; 
}

/* 飛び上がり（ジャンプ）アニメーション：Y軸の移動だけにする */
@keyframes catJump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* 驚いた時（全体）：歩くアニメーションを停止するだけ（上書きしない） */
#header-walking-cat.is-surprised {
  animation-play-state: paused !important;
}

/* 驚いた時（全体）：足の動きも停止 */
#header-walking-cat.is-surprised [class^="walk-leg"],
#header-walking-cat.is-surprised [class^="pata-"] {
  animation-play-state: paused !important;
}

/* ★追加：ジャンプする時だけ、中のSVGだけを飛ばす */
#header-walking-cat.is-jumping svg {
  animation: catJump 0.4s ease-out !important;
}

/* 吹き出し本体 */
#header-walking-cat::after {
  content: attr(data-speech); /* JSからランダムなセリフを受け取る */
  position: absolute;
  top: -35px;
  left: 50%;
  /* 
     ★重要：猫自体が scaleX(-1) で反転しているとき、
     吹き出しまで逆向きになってしまうのを打ち消すための変数制御 
  */
  transform: translateX(-50%) scaleX(var(--speech-scale, 1)) scale(0);
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: none;
  z-index: 101;
}

/* 吹き出しの三角 */
#header-walking-cat::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  transition: all 0.2s;
  z-index: 101;
}

/* クリック時（吹き出し表示） */
#header-walking-cat.is-surprised::after {
  transform: translateX(-50%) scaleX(var(--speech-scale, 1)) scale(1);
  opacity: 1;
}

#header-walking-cat.is-surprised::before {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}