/* Electra theme: ambient animated page background */
html {
    background: #0b121a;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 16% 16%, rgba(73, 115, 151, 0.28), transparent 45%),
        radial-gradient(ellipse at 84% 78%, rgba(104, 61, 41, 0.26), transparent 48%),
        #101a24;
}

/* These two fixed layers stay behind every part of the theme. */
body::before,
body::after {
    content: "";
    pointer-events: none;
    position: fixed;
    z-index: 0;
    will-change: transform, opacity;
}

/*
 * The video layer is fixed to the viewport, so it keeps playing while the
 * visitor scrolls. Screen blending preserves Electra's own artwork under it.
 */
.electra-background-video {
    pointer-events: none;
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    mix-blend-mode: screen;
    filter: brightness(0.86) saturate(0.9);
    opacity: 0.68;
    transform: scale(1.04);
    animation: electra-video-ambient 18s ease-in-out infinite alternate;
}

/*
 * Keep the original hero artwork crisp. It sits above the moving video only
 * in the header area, then scrolls away naturally with the page.
 */
body::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 508px;
    background:
        radial-gradient(ellipse at 50% 10%, rgba(183, 123, 70, 0.13), transparent 52%),
        url("../images/body-bg-top.jpg") center top / 1920px auto no-repeat;
    filter: saturate(1.04) contrast(1.04);
    opacity: 1;
    transform: none;
    transform-origin: center top;
    animation: none;
    z-index: 1;
}

/* A soft, blurred animated layer is concentrated around the lower area/footer. */
body::after {
    right: -14vw;
    bottom: -210px;
    left: -14vw;
    height: min(780px, 78vh);
    background:
        radial-gradient(ellipse at 20% 65%, rgba(47, 117, 153, 0.5), transparent 38%),
        radial-gradient(ellipse at 76% 52%, rgba(187, 99, 48, 0.38), transparent 42%),
        url("../images/body-bg-bottom.jpg") center bottom / 1920px auto no-repeat;
    filter: blur(21px) saturate(1.16);
    opacity: 0.8;
    transform: scale(1.1);
    transform-origin: center bottom;
    animation: electra-footer-ambient 24s ease-in-out infinite alternate;
}

/* The page itself remains crisp and always sits above the animated backdrop. */
.wrapper {
    position: relative;
    z-index: 2;
}

/*
 * Electra's two main page columns were fully opaque. Making only these
 * surfaces translucent lets the fixed video remain visible down the page
 * without reducing the readability of the inner cards, forms and text.
 */
.wrapper .container > .left-sidebar,
.wrapper .container > .content {
    background-color: rgba(17, 12, 11, 0.52) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

@keyframes electra-background-drift {
    from {
        opacity: 0.82;
        transform: scale(1.035) translate3d(-0.8%, -0.4%, 0);
    }

    to {
        opacity: 0.98;
        transform: scale(1.075) translate3d(0.9%, 0.7%, 0);
    }
}

@keyframes electra-footer-ambient {
    from {
        opacity: 0.66;
        transform: scale(1.1) translate3d(-2.2%, 1.5%, 0);
    }

    to {
        opacity: 0.92;
        transform: scale(1.18) translate3d(2.2%, -1.5%, 0);
    }
}

@keyframes electra-video-ambient {
    from {
        opacity: 0.54;
        transform: scale(1.04) translate3d(-0.7%, -0.5%, 0);
    }

    to {
        opacity: 0.76;
        transform: scale(1.1) translate3d(0.7%, 0.5%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    .electra-background-video {
        animation: none;
    }
}

@media (max-width: 700px) {
    body::before {
        height: 360px;
        background-size: auto 360px;
    }
}