/* =====================================================================
   BP Promo Text — Frontend Styles
   ===================================================================== */

/* ——— Wrapper ——— */
.bp-promo-text-wrapper {
    box-sizing: border-box;
    max-width: 100%;
    word-break: break-word;
    line-height: 1.5;
    /* hidden until animation triggers */
    visibility: hidden;
}

.bp-promo-text-wrapper.bp-promo-visible {
    visibility: visible;
}

.bp-promo-text-wrapper.bp-promo-no-animation {
    visibility: visible;
}

/* ——— Keyframes ——— */
@keyframes bpFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bpFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes bpFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes bpFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes bpFadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes bpSlideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes bpSlideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes bpSlideInUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes bpSlideInDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes bpBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

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

@keyframes bpZoomIn {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bpPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

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

@keyframes bpFlash {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

/* ——— Typewriter cursor blink ——— */
.bp-promo-typewriter-cursor {
    display: inline-block;
    border-right: 3px solid currentColor;
    white-space: nowrap;
    overflow: hidden;
    animation: bpTypewriterBlink 0.5s step-end infinite alternate;
}

/* When typing is done, remove cursor */
.bp-promo-typewriter-done {
    border-right-color: transparent;
    animation: none;
}

@keyframes bpTypewriterBlink {
    50% {
        border-color: transparent;
    }
}

/* ——— New Animations ——— */

/* Fade Out */
@keyframes bpFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Blink */
@keyframes bpBlink2 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Zoom Out */
@keyframes bpZoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* Heartbeat */
@keyframes bpHeartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

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

/* Gradient Flow */
@keyframes bpGradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Neon Glow */
@keyframes bpNeonGlow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6;
    }

    to {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6, 0 0 50px #0073e6;
    }
}

/* Tracking In (letter-spacing compressed → normal) */
@keyframes bpTrackingIn {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        letter-spacing: normal;
        opacity: 1;
    }
}

/* Tracking Out (letter-spacing normal → wide) */
@keyframes bpTrackingOut {
    from {
        letter-spacing: normal;
        opacity: 1;
    }

    to {
        letter-spacing: 1em;
        opacity: 0;
    }
}

/* Flip X */
@keyframes bpFlipX {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    to {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

/* Flip Y */
@keyframes bpFlipY {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    to {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

/* Skew */
@keyframes bpSkew {
    0% {
        transform: skewX(-30deg);
        opacity: 0;
    }

    50% {
        transform: skewX(10deg);
    }

    75% {
        transform: skewX(-5deg);
    }

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

/* Blur In */
@keyframes bpBlurIn {
    from {
        filter: blur(12px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

/* Floating */
@keyframes bpFloating {

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

    50% {
        transform: translateY(-15px);
    }
}

/* Bounce */
@keyframes bpBounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    70% {
        transform: scale(0.9);
    }

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

/* Gradient Flow helper class */
.bp-promo-gradient-flow {
    background: linear-gradient(270deg, #ff8a00, #e52e71, #9b2de5, #ff8a00) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}