/* --- ハロウィンの演出（#42） ---
   10月の間だけ halloween.js が .hero に部品を足し、このファイルの動きで再生する。
   かぼちゃがインスタのボタンを食べ、口からインスタを抱えたおばけが出てボタンになる。 */

/* こうもり（文字より後ろ）を飛ばすため、ヒーローの中身を一段手前に出す */
.hero.is-halloween .hero-content {
  position: relative;
  z-index: 1;
}

/* 本物のボタンは、食べられる見た目の複製と入れ替えるので隠す */
.hero.is-halloween-swapped .instagram-icon-btn {
  visibility: hidden;
}

/* --- こうもり（ずっと後ろを飛んでいる） --- */
.hw-bats {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hw-bat {
  position: absolute;
  left: 0;
}

.hw-bat svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #141414;
  overflow: visible;
}

.hw-bat .hw-wl { transform-box: view-box; transform-origin: 50px 46px; animation: hwFlapL .32s ease-in-out infinite alternate; }
.hw-bat .hw-wr { transform-box: view-box; transform-origin: 70px 46px; animation: hwFlapR .32s ease-in-out infinite alternate; }
.hw-bat-wave { animation: hwWave 1.6s ease-in-out infinite; }
.hw-bat.b1 { width: 58px; top: 16%; animation: hwFlyR 9s linear infinite; }
.hw-bat.b2 { width: 44px; top: 34%; animation: hwFlyL 11s linear -4s infinite; }
.hw-bat.b3 { width: 34px; top: 7%;  animation: hwFlyR 13s linear -9s infinite; opacity: .85; }
.hw-bat.b2 .hw-wl, .hw-bat.b2 .hw-wr { animation-duration: .27s; }

@keyframes hwFlapL { from { transform: rotate(0); } to { transform: rotate(-28deg) scaleY(.7); } }
@keyframes hwFlapR { from { transform: rotate(0); } to { transform: rotate(28deg) scaleY(.7); } }
@keyframes hwWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hwFlyR { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
@keyframes hwFlyL { from { transform: translateX(calc(100vw + 80px)) scaleX(-1); } to { transform: translateX(-80px) scaleX(-1); } }

/* --- 演出の舞台：本物のボタンの中心に置く（位置は halloween.js が決める） --- */
.hw {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  visibility: hidden; /* 始まるまでは何も見せない */
}

.hw.is-started {
  visibility: visible;
}

.hw-center {
  position: absolute;
  width: 0;
  height: 0;
}

/* 食べられるボタン（本物と同じ見た目の複製） */
.hw-ig {
  position: absolute;
  left: -32px;
  top: -32px;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(214, 36, 159, 0.3);
}

/* かぼちゃ（出入り・噛みつき・もぐもぐを入れ子で分ける） */
.hw-pk-enter { position: absolute; z-index: 1; left: -176px; top: -138px; width: 130px; height: 169px; opacity: 0; }
.hw-pk-lunge, .hw-pk-body { width: 100%; height: 100%; }
.hw-pk-lunge { transform-origin: 50% 90%; }
.hw-pk-body { transform-origin: 50% 100%; }
.hw-pk-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hw-mouth { transform-box: fill-box; transform-origin: 50% 0; }
.hw-stem { transform-box: fill-box; transform-origin: 50% 100%; }
.hw-gulp { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.hw-eyes-happy { opacity: 0; }

.hw-crumb { position: absolute; left: -28px; top: 2px; width: 7px; height: 7px; border-radius: 2px; opacity: 0; }
.hw-mogu {
  position: absolute;
  left: -40px;
  top: -96px;
  font-weight: 900;
  font-size: 15px;
  color: #e8851a;
  white-space: nowrap;
  opacity: 0;
}
.hw-gefu {
  position: absolute;
  z-index: 4;
  left: -92px;
  top: -150px;
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
  color: #ff5fa2;
  letter-spacing: .06em;
  text-shadow: 2px 2px 0 #4a1f3a;
  transform-origin: left bottom;
  opacity: 0;
}
.hw-star { position: absolute; left: -113px; top: -12px; width: 16px; height: 16px; color: #ffd84a; opacity: 0; }

/* おばけ（最後はこれがインスタへのボタンになる） */
.hw-ghost {
  position: absolute;
  z-index: 3;
  left: -44px;
  top: -52px;
  width: 92px;
  height: 100px;
  transform-origin: 50% 90%;
  opacity: 0;
}
.hw-ghost-bob { width: 100%; height: 100%; }
.hw-ghost svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(80, 60, 140, .15)); transition: transform .3s ease; }

/* おばけの左に Happy、右に Halloween */
.hw-hh { position: absolute; z-index: 3; font-family: "Chewy", cursive; line-height: 1; white-space: nowrap; }
.hw-hh-l { right: 54px; top: -26px; font-size: 34px; color: #ff8a1a; transform: rotate(-8deg); text-shadow: 2px 2px 0 #4a2a12; letter-spacing: .02em; }
.hw-hh-r { left: 54px; top: -10px; font-size: 32px; color: #9b5de5; transform: rotate(6deg); text-shadow: 2px 2px 0 #3b1f4f; letter-spacing: .03em; }
.hw-ch { display: inline-block; opacity: 0; }
.hw-tw { position: absolute; color: #ffc928; font-size: 14px; opacity: 0; }
.hw-tw.t1 { left: -150px; top: -44px; }
.hw-tw.t2 { left: 196px; top: -22px; font-size: 11px; }
.hw-tw.t3 { left: 176px; top: 28px; font-size: 16px; }

/* --- 再生（.is-play を付けた瞬間から 4.8 秒） --- */
.hw.is-play .hw-pk-enter { animation: hwPkEnter 4.8s both; }
.hw.is-play .hw-pk-lunge { animation: hwPkLunge 4.8s both; }
.hw.is-play .hw-pk-body { animation: hwPkBody 4.8s both; }
.hw.is-play .hw-mouth { animation: hwMouth 4.8s both; }
.hw.is-play .hw-jaw { animation: hwJaw 4.8s both; }
.hw.is-play .hw-stem { animation: hwStem 4.8s both; }
.hw.is-play .hw-cat { animation: hwCatJump 4.8s both; }
.hw.is-play .hw-gulp { animation: hwGulp 4.8s both; }
.hw.is-play .hw-eyes-open { animation: hwEyesOpen 4.8s both; }
.hw.is-play .hw-eyes-happy { animation: hwEyesHappy 4.8s both; }
.hw.is-play .hw-ig { animation: hwIgEaten 4.8s both; }
.hw.is-play .hw-crumb { animation: hwCrumb 4.8s both; }
.hw.is-play .hw-mogu { animation: hwMogu 4.8s both; }
.hw.is-play .hw-gefu { animation: hwGefu 4.8s both; }
.hw.is-play .hw-star { animation: hwStar 4.8s both; }
.hw.is-play .hw-ghost { animation: hwGhostOut 4.8s both; }
.hw.is-play .hw-ghost-bob { animation: hwBob 2.4s ease-in-out 4.8s infinite; }
/* 文字と星は最初の1回だけ出し、あとは出したままにする（#48） */
.hw.is-text .hw-ch { animation: hwLetterPop .55s cubic-bezier(.3, 1.7, .5, 1) calc(4s + var(--i) * .06s) both,
                               hwLetterWiggle 3.2s ease-in-out calc(5.2s + var(--i) * .12s) infinite; }
.hw.is-text .hw-tw { animation: hwTwinkle 1.8s ease-in-out 4.6s infinite; }
.hw.is-text .hw-tw.t2 { animation-delay: 5.1s; }
.hw.is-text .hw-tw.t3 { animation-delay: 5.5s; }

/* 再生が終わったら、おばけを押せるようにする */
.hw.is-done .hw-ghost { pointer-events: auto; cursor: pointer; }
.hw.is-done .hw-ghost:hover svg,
.hw.is-done .hw-ghost:focus-visible svg { transform: scale(1.08); }

/* くり返す前に、おばけが「ぽんっ」と消えて、元の丸いボタンが飛び出して戻る（#48） */
.hw.is-reset .hw-ghost { animation: hwPoof .4s ease-in both; }
.hw.is-reset .hw-ig { animation: hwPopIn .5s cubic-bezier(.3, 1.7, .5, 1) .25s both; }

@keyframes hwPoof {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes hwPopIn {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hwPkEnter {
  0% { opacity: 0; transform: translateY(300px); }
  4% { opacity: 1; transform: translateY(300px); }
  15% { transform: translateY(-12px); }
  19% { transform: translateY(0); }
  83% { transform: translateY(0); }
  87% { transform: translateY(-10px); }
  98% { opacity: 1; transform: translateY(300px); }
  100% { opacity: 0; transform: translateY(300px); }
}
@keyframes hwPkLunge {
  0%, 24% { transform: translateX(0) rotate(0); }
  31%, 35% { transform: translateX(80px) rotate(4deg); }
  42%, 100% { transform: translateX(0) rotate(0); }
}
@keyframes hwPkBody {
  0%, 35.5% { transform: scale(1, 1); }
  37% { transform: scale(1.12, .9); }
  39% { transform: scale(1.04, 1); }
  43% { transform: scale(1.12, .92); }
  47% { transform: scale(1.04, 1); }
  51% { transform: scale(1.12, .92); }
  55% { transform: scale(1, 1); }
  58% { transform: scale(.93, 1.08); }
  62% { transform: scale(1.15, .88); }
  67%, 100% { transform: scale(1, 1); }
}
/* 口とあごは同じ時間で動かし、下の歯が口の縁から離れないようにする */
@keyframes hwMouth {
  0%, 18% { transform: scaleY(1); }
  26%, 35% { transform: scaleY(1.25); }
  36% { transform: scaleY(.86); }
  39% { transform: scaleY(1); } 43% { transform: scaleY(.86); }
  47% { transform: scaleY(1); } 51% { transform: scaleY(.86); }
  56% { transform: scaleY(1); }
  62%, 71% { transform: scaleY(1.25); }
  75%, 100% { transform: scaleY(1); }
}
@keyframes hwJaw {
  0%, 18% { transform: translateY(0); }
  26%, 35% { transform: translateY(10px); }
  36% { transform: translateY(-5.5px); }
  39% { transform: translateY(0); } 43% { transform: translateY(-5.5px); }
  47% { transform: translateY(0); } 51% { transform: translateY(-5.5px); }
  56% { transform: translateY(0); }
  62%, 71% { transform: translateY(10px); }
  75%, 100% { transform: translateY(0); }
}
@keyframes hwStem {
  0%, 60% { transform: rotate(0); }
  64% { transform: translateY(-6px) rotate(-14deg); }
  68% { transform: rotate(10deg); }
  72% { transform: rotate(-5deg); }
  76%, 100% { transform: rotate(0); }
}
@keyframes hwCatJump {
  0%, 61% { transform: translateY(0); }
  65% { transform: translateY(-26px); }
  70% { transform: translateY(-3px); }
  73% { transform: translateY(-8px); }
  76%, 100% { transform: translateY(0); }
}
@keyframes hwGulp {
  0%, 33% { opacity: 0; transform: scale(1); }
  33.5%, 34.5% { opacity: 1; transform: scale(1); }
  36% { opacity: 1; transform: scale(.25); }
  37%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes hwEyesOpen { 0%, 36% { opacity: 1; } 37%, 56% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes hwEyesHappy { 0%, 36% { opacity: 0; } 37%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes hwIgEaten {
  0%, 29% { transform: translate(0, 0) scale(1); opacity: 1; }
  31% { transform: translate(6px, -4px) scale(1.08); opacity: 1; }
  33.5% { transform: translate(-25px, 8px) scale(.42); opacity: 1; }
  34%, 100% { transform: translate(-25px, 8px) scale(.42); opacity: 0; }
}
@keyframes hwCrumb {
  0%, 35.5% { opacity: 0; transform: translate(0, 0) rotate(0); }
  36%, 44% { opacity: 1; }
  48%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(200deg); }
}
@keyframes hwMogu {
  0%, 37% { opacity: 0; transform: translateY(6px); }
  40%, 53% { opacity: 1; transform: translateY(0); }
  56%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes hwGefu {
  0%, 61% { opacity: 0; transform: scale(.4) translateY(10px); }
  64% { opacity: 1; transform: scale(1.12) translateY(0); }
  66%, 79% { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes hwStar {
  0%, 62% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  65% { opacity: 1; }
  78%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(140deg); }
}
/* しっぽを口に残したまま伸びて出てきて、ボタンの場所へ飛ぶ */
@keyframes hwGhostOut {
  0%, 61% { opacity: 0; transform: translate(-107px, -32px) scale(.15, .05); }
  62.5% { opacity: 1; transform: translate(-107px, -32px) scale(.3, .2); }
  66% { transform: translate(-107px, -32px) scale(.55, .8); }
  69% { transform: translate(-107px, -36px) scale(.8, 1.12); }
  72% { transform: translate(-98px, -62px) scale(.9, .95) rotate(-8deg); }
  77% { transform: translate(-48px, -44px) scale(1.06) rotate(6deg); }
  83%, 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@keyframes hwBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes hwLetterPop {
  0% { opacity: 0; transform: translateY(14px) scale(.3); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hwLetterWiggle {
  0%, 80%, 100% { transform: translateY(0) rotate(0); }
  88% { transform: translateY(-4px) rotate(-6deg); }
}
@keyframes hwTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  50% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}

/* スマホ：Halloween の文字が画面の右からはみ出さないよう、舞台ごと小さくする */
@media (max-width: 480px) {
  .hw-center { transform: scale(.85); }
}

@media (max-width: 360px) {
  .hw-center { transform: scale(.76); }
}