.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);
    }
}

/* ============ Title ขยับลอยๆ + แสงเพี้ยนแบบป้ายผีสิง ============ */
@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;
}