/* ============================================================
   ボスカットインオーバーレイ
   ============================================================ */
.boss-cutin-overlay {
    background: radial-gradient(circle at center, #2d0000 0%, #000 70%);
    z-index: 120;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boss-cutin-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px;
    text-align: center;
}

/* 各要素はデフォルト非表示 — active クラス付与時にアニメーション開始 */
.boss-cutin-label {
    font-family: var(--font-pixel);
    font-size: 72px;
    color: #ff3333;
    text-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 50px rgba(255, 0, 0, 0.8), 0 0 100px rgba(255, 0, 0, 0.4);
    letter-spacing: 10px;
    opacity: 0;
}

.boss-cutin-img {
    max-width: 600px;
    max-height: 600px;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 50, 0, 0.9)) drop-shadow(0 0 50px rgba(255, 0, 0, 0.6));
    opacity: 0;
}

.boss-cutin-name {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 100, 0, 0.8);
    white-space: nowrap;
    opacity: 0;
    display: none; /* ボス名を非表示 */
}

/* active クラスが付いた瞬間にアニメーション発火 */
#boss-cutin-overlay.active .boss-cutin-label {
    animation: boss-cutin-label-pop 0.4s cubic-bezier(0.2, 0, 0.2, 1.5) both;
}

#boss-cutin-overlay.active .boss-cutin-img {
    animation: boss-cutin-img-zoom 1.6s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#boss-cutin-overlay.active .boss-cutin-name {
    animation: boss-cutin-name-rise 0.4s 0.6s ease-out both;
}

@keyframes boss-cutin-label-pop {
    0% {
        opacity: 0;
        transform: scale(2.2);
    }

    70% {
        opacity: 1;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes boss-cutin-img-zoom {
    0% {
        opacity: 0;
        transform: scale(0.05) translateY(40px);
    }

    30% {
        opacity: 1;
        transform: scale(0.6) translateY(10px);
    }

    75% {
        opacity: 1;
        transform: scale(1.08) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1.0) translateY(0);
    }
}

@keyframes boss-cutin-name-rise {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードアウト（オーバーレイ全体） */
#boss-cutin-overlay.fade-out {
    animation: boss-cutin-fadeout 0.5s ease-out forwards;
}

@keyframes boss-cutin-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ボス登場時：interval-overlay の画像をズームイン後にバウンス */
#interval-overlay.boss-entrance .interval-img {
    animation: boss-interval-enter 0.5s ease-out both,
        bounce 2s 0.5s infinite ease-in-out;
}

@keyframes boss-interval-enter {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================
   ボスカットイン シームレス遷移
   ============================================================ */

/* ボス画像ズームアップ（2秒後に発火） */
.boss-cutin-img.zoom-up {
    animation: boss-img-zoom-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes boss-img-zoom-up {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 1;
        transform: scale(1.4);
    }

    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* ラベル・名前のフェードアウト */
.boss-cutin-label.fade-out-el,
.boss-cutin-name.fade-out-el {
    animation: boss-el-fadeout 0.4s ease-out forwards;
}

@keyframes boss-el-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* ボタングループ（デフォルト非表示）— オーバーレイ下部に絶対配置 */
.boss-cutin-btns {
    position: absolute;
    bottom: 120px; /* ボス名削除に合わせて上に移動 */
    left: 0;
    right: 0;
    justify-content: center;
    gap: 20px;
    display: none;
    opacity: 0;
}

/* ボタン表示アニメーション */
.boss-cutin-btns.visible {
    display: flex !important;
    animation: boss-btns-fadein 0.5s ease-out 0.3s both;
}

@keyframes boss-btns-fadein {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}