/**
 * Hero Background Crossfade Animation
 * Crossfades between two hero background images
 */

/* First image - starts visible - target the img inside the figure */
body.home #brxe-byurhk img {
    animation: heroImage1Fade 12s ease-in-out infinite !important;
    animation-fill-mode: both !important;
}

/* Second image - starts hidden - target the img inside the figure */
body.home #brxe-zlrzob img {
    animation: heroImage2Fade 12s ease-in-out infinite !important;
    animation-fill-mode: both !important;
}

/* Contain the images - prevent overflow */
body.home .hero--inner {
    overflow: hidden !important;
}

/* Position the figure elements with gradient mask at bottom */
/* Use negative z-index to keep backgrounds BEHIND content */
body.home #brxe-byurhk {
    position: absolute !important;
    z-index: -1 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

body.home #brxe-zlrzob {
    position: absolute !important;
    z-index: -2 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* First image animation - fades out then back in with pronounced zoom and pan */
@keyframes heroImage1Fade {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    40% {
        opacity: 1;
        transform: scale(1.15) translate(-5%, 3%);
    }
    50% {
        opacity: 0;
        transform: scale(1.15) translate(-5%, 3%);
    }
    90% {
        opacity: 0;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

/* Second image animation - fades in then back out with opposite movement */
@keyframes heroImage2Fade {
    0% {
        opacity: 0;
        transform: scale(1.15) translate(5%, -3%);
    }
    40% {
        opacity: 0;
        transform: scale(1.15) translate(5%, -3%);
    }
    50% {
        opacity: 1;
        transform: scale(1.15) translate(5%, -3%);
    }
    90% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1.15) translate(5%, -3%);
    }
}