/*
 * Purple banner (first made for "Our Executive Team" and "Who Are We?", now on every inner page):
 * brand-purple gradient + animated home-page wave pattern instead of each page's banner photo.
 * Loaded from header.php on every page; it styles every section.bread_crumb (the home page has none).
 * Revert: delete this file.
 */

/* gradient + soft glow behind the title (overrides the inline banner photo) */
section.bread_crumb {
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 45% 70% at 50% 50%, rgba(167, 128, 255, 0.35) 0%, rgba(167, 128, 255, 0) 70%),
        linear-gradient(90deg, rgb(120, 104, 170) 0%, rgb(108, 71, 185) 50%, rgb(85, 48, 135) 100%) !important;
    background-size: 140% 140%, 100% 100% !important;
    background-position: 50% 50%, center; /* no !important, or the glow animation can't move it */
    background-repeat: no-repeat !important;
    animation: hc-banner-glow 14s ease-in-out infinite;
}

/* wave pattern from the home banner: right edge (replaces the dark photo overlay) */
section.bread_crumb::before,
section.bread_crumb::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../wp-content/uploads/2025/06/banner_side_img.svg) no-repeat right center / auto 100% !important;
    filter: brightness(2.4);
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
    animation: hc-banner-wave-r 11s ease-in-out infinite;
}

/* mirrored copy on the left edge, slightly fainter; drifts out of sync with the right one */
section.bread_crumb::after {
    transform: scaleX(-1);
    opacity: 0.7;
    animation: hc-banner-wave-l 13s ease-in-out infinite;
}

/* lighter "glass" breadcrumb pill so it doesn't blend into the purple */
section.bread_crumb .breadcrumb_content p {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* slow drift + breathing of the wave lines, and a gently moving glow */
@keyframes hc-banner-wave-r {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
    50%      { transform: translate3d(-18px, -12px, 0); opacity: 0.6; }
}

@keyframes hc-banner-wave-l {
    0%, 100% { transform: scaleX(-1) translate3d(0, 0, 0); opacity: 0.7; }
    50%      { transform: scaleX(-1) translate3d(-18px, 12px, 0); opacity: 0.35; }
}

@keyframes hc-banner-glow {
    0%, 100% { background-position: 50% 50%, center; }
    33%      { background-position: 42% 46%, center; }
    66%      { background-position: 58% 54%, center; }
}

@media (prefers-reduced-motion: reduce) {
    section.bread_crumb,
    section.bread_crumb::before,
    section.bread_crumb::after {
        animation: none;
    }
}