.bpGhostTitle {
    animation: fadeSlideUp 1s ease both;
    animation-delay: .1s;
}

.bpRewardContentMainLayout {
    animation: fadeSlideUp 1s ease both;
    animation-delay: .2s;
}



@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bpGhostVeilFlicker {
    0% {
        opacity: 0;
    }

    10%,
    78%,
    100% {
        opacity: 0.14;
    }

    80% {
        opacity: 0.42;
    }

    82% {
        opacity: 0.06;
    }

    84% {
        opacity: 0.33;
    }

    86% {
        opacity: 0.04;
    }

    88% {
        opacity: 0.25;
    }

    90% {
        opacity: 0.14;
    }
}

.bpGhostButton {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* เงาดำ-แดงด้านใน — ซ่อนอยู่จนกว่าจะ hover */
.bpGhostButton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 65%,
            rgba(160, 0, 0, 0.274) 0%,
            rgba(80, 0, 0, 0.45) 48%,
            transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* ════════════════════════════════
   HOVER STATE — ominous blood glow
   ════════════════════════════════ */
.bpGhostButton:hover {
    text-shadow:
        0 0 6px rgba(197, 19, 19, 0.9),
        0 0 16px rgba(200, 0, 0, 0.65),
        0 0 34px rgba(140, 0, 0, 0.35);
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.18) saturate(1.45) contrast(1.06);
    animation:
        bpGhostBloodPulse 2.2s ease-in-out infinite,
        bpGhostTextDrip 4.0s linear infinite;
}

.bpGhostButton:hover::before {
    animation: bpGhostVeilFlicker 3.2s linear infinite;
}

.bpGhostButton:active {
    animation: none;
    transform: translateY(1px) scale(0.965);
    filter: brightness(0.55) saturate(2.0) contrast(1.18);
    color: #cc0000;
    text-shadow:
        0 0 4px rgba(255, 0, 0, 1.00),
        0 0 10px rgba(180, 0, 0, 0.88);
    box-shadow:
        0 0 14px rgba(200, 0, 0, 0.85),
        0 0 5px rgba(150, 0, 0, 1.00),
        inset 0 2px 12px rgba(0, 0, 0, 0.85);
    border-color: rgba(150, 0, 0, 0.88);
    transition: transform 0.08s ease, filter 0.08s ease;
}

.bpGhostButton:active::before {
    opacity: 0.38;
    animation: none;
}


/* ============ 1. LIGHTNING FLASH ============ */
.bpGhostLightning {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: overlay;
    animation: lightningFlash 7s infinite;
}

@keyframes lightningFlash {

    0%,
    91%,
    100% {
        opacity: 0;
    }

    92% {
        opacity: 0.55;
    }

    92.5% {
        opacity: 0.05;
    }

    93% {
        opacity: 0.7;
    }

    93.4% {
        opacity: 0;
    }

    94% {
        opacity: 0.35;
    }

    94.3% {
        opacity: 0;
    }
}

/* vignette ที่ตอบสนองกับฟ้าแลบ ทำให้ภาพดูสว่างวาบขึ้นพร้อมกัน */
.bpGhostLightningGlow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 10%,
            rgba(180, 60, 60, 0) 0%,
            transparent 60%);
    pointer-events: none;
    z-index: 4;
    animation: lightningGlow 7s infinite;
}

@keyframes lightningGlow {

    0%,
    91%,
    100% {
        background: radial-gradient(ellipse at 30% 10%,
                rgba(180, 60, 60, 0) 0%,
                transparent 60%);
    }

    92.5% {
        background: radial-gradient(ellipse at 30% 10%,
                rgba(220, 90, 90, 0.35) 0%,
                transparent 65%);
    }

    94% {
        background: radial-gradient(ellipse at 30% 10%,
                rgba(220, 90, 90, 0) 0%,
                transparent 65%);
    }
}


/* ============ 3. EMBERS / DUST / SOULS ลอยขึ้น ============ */
.bpGhostEmberLayer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.ember {
    position: absolute;
    bottom: -5%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle,
            #ff5b5b 0%,
            rgba(255, 0, 0, 0.4) 60%,
            transparent 100%);
    box-shadow: 0 0 6px 2px rgba(255, 60, 60, 0.5);
    animation: emberRise linear infinite;
}

@keyframes emberRise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    50% {
        transform: translateY(-50vh) translateX(20px) scale(1.3);
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-100vh) translateX(-10px) scale(0.4);
        opacity: 0;
    }
}

/* ============ 4. VIGNETTE หลอน เต้นถี่ๆ เบาๆ (heartbeat dread) ============ */
.bpGhostVignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center,
            transparent 40%,
            rgba(0, 0, 0, 0.75) 100%);
    animation: vignettePulse 5s ease-in-out infinite;
}

@keyframes vignettePulse {

    0%,
    100% {
        background: radial-gradient(ellipse at center,
                transparent 40%,
                rgba(0, 0, 0, 0.75) 100%);
    }

    50% {
        background: radial-gradient(ellipse at center,
                transparent 38%,
                rgba(20, 0, 0, 0.82) 100%);
    }
}


/* ============ ควันลอยขึ้น (เพิ่มเติมจากหมอกลอยซ้ายขวา) ============ */
.bpGhostSmokeLayer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.smokeWisp {
    position: absolute;
    bottom: -20%;
    width: 180px;
    height: 380px;
    background: radial-gradient(ellipse at center,
            rgba(200, 200, 210, 0.308) 0%,
            rgba(204, 75, 75, 0.205) 45%,
            transparent 75%);
    filter: blur(6px);
    border-radius: 50%;
    animation: smokeRise linear infinite;
}

.smokeWisp:nth-child(1) {
    left: 10%;
    width: 160px;
    animation-duration: 22s;
    animation-delay: 0s;
    opacity: .5;
}

.smokeWisp:nth-child(2) {
    left: 35%;
    width: 220px;
    animation-duration: 28s;
    animation-delay: -8s;
    opacity: .35;
}

.smokeWisp:nth-child(3) {
    left: 55%;
    width: 190px;
    animation-duration: 24s;
    animation-delay: -15s;
    opacity: .45;
}

.smokeWisp:nth-child(4) {
    left: 75%;
    width: 200px;
    animation-duration: 30s;
    animation-delay: -4s;
    opacity: .3;
}

.smokeWisp:nth-child(5) {
    left: 90%;
    width: 150px;
    animation-duration: 20s;
    animation-delay: -12s;
    opacity: .4;
}

@keyframes smokeRise {
    0% {
        transform: translateY(0) translateX(0) scaleX(1);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateY(-50vh) translateX(15px) scaleX(1.3);
    }

    85% {
        opacity: .3;
    }

    100% {
        transform: translateY(-100vh) translateX(-20px) scaleX(1.6);
        opacity: 0;
    }
}

/* ============ Title ขยับลอยๆ + แสงเพี้ยนแบบป้ายผีสิง ============ */
/* .bpGhostTitle {
    animation:
        fadeSlideUp 1s ease both,
        bpGhostTitleFloat 6s ease-in-out infinite,
        bpGhostTitleFlicker 7s linear infinite;
    animation-delay: .1s, 1.1s, 1.1s;
} */

@keyframes bpGhostTitleFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(-0.4deg);
    }
}

@keyframes bpGhostTitleFlicker {

    0%,
    92%,
    100% {
        filter: brightness(1) drop-shadow(0 0 0px rgba(200, 0, 0, 0));
    }

    93% {
        filter: brightness(1.4) drop-shadow(0 0 14px rgba(220, 30, 30, 0.6));
    }

    94% {
        filter: brightness(0.85) drop-shadow(0 0 0px rgba(200, 0, 0, 0));
    }

    95% {
        filter: brightness(1.25) drop-shadow(0 0 10px rgba(220, 30, 30, 0.5));
    }
}


.bpGhostMainLayout {
    opacity: 0;
    transition: opacity .4s ease;
}

.bpGhostMainLayout.is-ready {
    opacity: 1;
}

.bpGhostTitle,
.bpGhostButtonLayout {
    opacity: 0;
    /* ค้างไว้ก่อน */
}

.is-ready .bpGhostTitle {
    animation: fadeSlideUp 1s ease both, bpGhostTitleFloat 6s ease-in-out infinite, bpGhostTitleFlicker 7s linear infinite;
    animation-delay: 0s, 1s, 1s;
}

.is-ready .bpGhostButtonLayout {
    animation: fadeSlideUp 1s ease both;
    animation-delay: .2s;
}