/*
============================================================
BHPE Module: Hero Pulse Wave
Version: 1.1.4

Semantic Selector Migration Edition

Compatible with:
[data-bh-layout="pulse-wave"]

Restores:
- Hero background
- Split layout
- CTA hover
- Original pulse glow animation
- SVG compatibility

============================================================
*/


[data-bh-layout="pulse-wave"] {

    position: relative;
    min-height: 80vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


[data-bh-layout="pulse-wave"]::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        var(
            --page-bg,
            var(
                --pulse-background,
                radial-gradient(
                    circle,
                    var(--ieera-color-primary),
                    transparent 70%
                )
            )
        );

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}



[data-bh-layout="pulse-wave"] .ie-wrap {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: auto;

    padding-left: clamp(20px,4vw,60px);
    padding-right: clamp(20px,4vw,60px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
}



[data-bh-layout="pulse-wave"] .split-left {

    flex:1;
}


[data-bh-layout="pulse-wave"] .split-right {

    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

}


[data-bh-layout="pulse-wave"] .svg-stage {

    display:flex;
    align-items:center;
    justify-content:center;

}



/*
============================================================
Original BHPE pulse glow animation

IMPORTANT:
box-shadow animation belongs to HTML wrapper,
not SVG circle.

Add class:
bh-module-hero-pulse-wave-ring

to .svg-stage wrapper.

============================================================
*/


[data-bh-layout="pulse-wave"]
.bh-module-hero-pulse-wave-ring {

    animation:
        hero-pulse-wave-pulse
        2s
        infinite;

}



@keyframes hero-pulse-wave-pulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(0,229,255,.45);

    }


    70% {

        box-shadow:
            0 0 0 20px
            rgba(0,229,255,0);

    }


    100% {

        box-shadow:
            0 0 0 0
            rgba(0,229,255,0);

    }

}



/*
============================================================
SVG fallback animation

For:
class="bh-svg-pulse"

============================================================
*/


[data-bh-layout="pulse-wave"]
.bh-svg-pulse {

    animation:
        hero-pulse-wave-svg-pulse
        2s
        infinite;

}


@keyframes hero-pulse-wave-svg-pulse {

    0% {

        opacity:.35;
        stroke-opacity:.35;

    }


    50% {

        opacity:1;
        stroke-opacity:1;

    }


    100% {

        opacity:.35;
        stroke-opacity:.35;

    }

}



/*
============================================================
CTA
============================================================
*/


[data-bh-layout="pulse-wave"]
[data-ieera-role="cta"] {

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:.9rem 2rem;

    background:
        var(
            --pulse-button-bg,
            #00e5ff
        );

    color:
        var(
            --pulse-button-text,
            #07111f
        );

    border-radius:
        var(
            --ieera-radius-pill,
            999px
        );

    text-decoration:none;

    transition:

        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}



[data-bh-layout="pulse-wave"]
[data-ieera-role="cta"]:hover {

    transform:translateY(-3px);

    background:
        var(
            --pulse-button-hover-bg,
            #33eeff
        );

    box-shadow:
        0 10px 30px
        rgba(0,229,255,.35);

}



/*
============================================================
Typography
============================================================
*/


[data-bh-layout="pulse-wave"]
[data-ieera-role="eyebrow"] {

    color:
        var(
            --ieera-color-accent,
            #00e5ff
        );

}


[data-bh-layout="pulse-wave"]
[data-ieera-role="display"] {

    color:
        var(
            --hero-title-color,
            #ffffff
        );

}


[data-bh-layout="pulse-wave"]
[data-ieera-role="lead"] {

    color:
        var(
            --hero-description-color,
            rgba(255,255,255,.75)
        );

}



@media(max-width:900px){

    [data-bh-layout="pulse-wave"] .ie-wrap {

        flex-direction:column;

        text-align:center;

    }

}