/* =========================================================
   合体カットイン（Lv3「おちびちゃん」以上・1Pのみ）
   - 動きはすべてここ。JS(src/game/battle/cutin.js) は class の付け外しと
     img.src / textContent だけ行う（CSP が style-src 'self' のため）。
   - ★duration 0.85s は cutin.js の CUTIN_MS と対応。片方だけ変えないこと。
   ========================================================= */

.cutin-layer {
  position: fixed;
  inset: 0;
  /* merge-flight(90)より前、ポーズ(100)・セレブレーション(120)より後ろ。
     ポーズ中に出っぱなしにならないよう、あえて100未満にしている。 */
  z-index: 95;
  pointer-events: none; /* クリックは下に素通し */
  overflow: hidden; /* 帯がはみ出して横スクロールが出ないように */
  display: none;
}

.cutin-layer.is-active {
  display: block;
}

/* ---------- 斜めに走る帯 ---------- */
.cutin-band {
  position: absolute;
  top: 50%;
  left: -25%;
  width: 150%;
  /* キャラを2倍にしたぶん、帯も少し太らせて釣り合いを取っている
     （キャラのほうが大きく、帯から突き抜けて見えるのは意図どおり） */
  height: clamp(160px, 32vh, 300px);
  transform: translateY(-50%) skewY(-7deg);
  /* 下のゲーム画面が透けて見えるくらいの濃さにとどめる。
     濃くしすぎると盤面が隠れて手が止まるので、ピークでも 0.5 程度。 */
  background: linear-gradient(
    90deg,
    rgba(239, 108, 31, 0) 0%,
    rgba(239, 108, 31, 0.42) 12%,
    rgba(255, 178, 84, 0.5) 50%,
    rgba(239, 108, 31, 0.42) 88%,
    rgba(239, 108, 31, 0) 100%
  );
  box-shadow: 0 0 30px rgba(255, 170, 80, 0.32);
  opacity: 0;
}

.cutin-layer.is-active .cutin-band {
  animation: cutin-band 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cutin-band {
  0% {
    opacity: 0;
    transform: translateY(-50%) skewY(-7deg) translateX(-115%);
  }
  18% {
    opacity: 1;
    transform: translateY(-50%) skewY(-7deg) translateX(0);
  }
  70% {
    opacity: 1;
    transform: translateY(-50%) skewY(-7deg) translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) skewY(-7deg) translateX(115%);
  }
}

/* ---------- キャラ本体（左から入って、右へ抜ける） ---------- */
.cutin-image {
  position: absolute;
  top: 50%;
  left: 6%;
  /* 帯からはみ出すくらい大きく見せる（旧値 110/22vh/210 の約2倍） */
  height: clamp(220px, 44vh, 420px);
  width: auto;
  /* 横長のキャラ（ビル等）が狭い画面で画面幅いっぱいになるのを防ぐ。
     ★height を明示しているので max-width だけだと高さが据え置きになり
       絵が横に潰れる。object-fit: contain とセットで使うこと。 */
  max-width: 86vw;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 8px 18px rgba(90, 45, 10, 0.55));
  opacity: 0;
}

.cutin-layer.is-active .cutin-image {
  animation: cutin-char 0.85s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes cutin-char {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-160%) scale(0.8);
  }
  22% {
    opacity: 1;
    transform: translateY(-50%) translateX(8%) scale(1.06);
  }
  34% {
    transform: translateY(-50%) translateX(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateY(-50%) translateX(4%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(60%) scale(0.96);
  }
}

/* ---------- なまえ（右から入る） ---------- */
.cutin-label {
  position: absolute;
  top: 50%;
  right: 8%;
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: clamp(1.5rem, 5.5vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: 4px var(--primary-strong);
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #a53d0c,
    0 8px 14px rgba(95, 40, 8, 0.45);
  white-space: nowrap;
  opacity: 0;
}

.cutin-layer.is-active .cutin-label {
  animation: cutin-label 0.85s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes cutin-label {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(70%);
  }
  26% {
    opacity: 1;
    transform: translateY(-50%) translateX(-4%);
  }
  36% {
    transform: translateY(-50%) translateX(0);
  }
  70% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-40%);
  }
}

/* ---------- 狭い画面：キャラと名前がぶつかるので名前を下へ逃がす ----------
   キャラを2倍にしたので、横並びのままだと長い名前
   （「せいびしか と おちびちゃん」）が重なる。 */
@media (max-width: 560px) {
  .cutin-image {
    left: 4%;
    height: clamp(190px, 38vh, 320px);
  }

  .cutin-label {
    top: auto;
    bottom: 12%;
    right: 5%;
    transform: none;
    font-size: clamp(1.1rem, 6vw, 1.8rem);
  }

  /* 位置指定を変えたので、名前のアニメーションも translateY 抜きにする */
  .cutin-layer.is-active .cutin-label {
    animation: cutin-label-narrow 0.85s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  }
}

@keyframes cutin-label-narrow {
  0% {
    opacity: 0;
    transform: translateX(70%);
  }
  26% {
    opacity: 1;
    transform: translateX(-4%);
  }
  36% {
    transform: translateX(0);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-40%);
  }
}

/* ---------- 最終進化(Lv7)だけ金色にする ---------- */
.cutin-layer.is-lv7 .cutin-band {
  background: linear-gradient(
    90deg,
    rgba(184, 134, 11, 0) 0%,
    rgba(212, 160, 23, 0.45) 12%,
    rgba(255, 226, 140, 0.55) 50%,
    rgba(212, 160, 23, 0.45) 88%,
    rgba(184, 134, 11, 0) 100%
  );
  box-shadow: 0 0 40px rgba(255, 216, 120, 0.42);
}

.cutin-layer.is-lv7 .cutin-label {
  -webkit-text-stroke-color: #a9760a;
  text-shadow:
    0 3px 0 #8a5f06,
    0 8px 14px rgba(70, 48, 5, 0.5);
}

/* ---------- 動きを減らす設定のときは、流れずにフェードだけ ---------- */
@media (prefers-reduced-motion: reduce) {
  .cutin-layer.is-active .cutin-band,
  .cutin-layer.is-active .cutin-image,
  .cutin-layer.is-active .cutin-label {
    /* transform は各要素の初期値（translateY(-50%) 等）のまま保たれる */
    animation: cutin-fade 0.6s ease-out both;
  }
}

@keyframes cutin-fade {
  0%,
  100% {
    opacity: 0;
  }
  25%,
  70% {
    opacity: 1;
  }
}