/* TheHolyLamb — epic background shell */

.epic-bg {
    /* solid page color under art — never a hard image cut */
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #050308;
}

.epic-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/holy-guardian.jpg');
    background-position: 50% 18%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.48) contrast(1.1) saturate(1.05);
    opacity: 1;
    transition: opacity 0.5s ease;
}

@media (max-width: 768px) {
    .epic-bg-image {
        background-position: 50% 22%;
        filter: brightness(0.45) contrast(1.1) saturate(1.05);
    }
}

.epic-bg.is-animated .epic-bg-image {
    opacity: 0;
}

.epic-bg-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 40% at 50% 8%, rgba(255, 210, 130, 0.08), transparent 60%),
        radial-gradient(ellipse 50% 35% at 55% 78%, rgba(90, 20, 30, 0.07), transparent 55%);
    mix-blend-mode: screen;
    animation: bgGlow 24s ease-in-out infinite;
}

.epic-bg-rays {
    display: none !important;
}

/* Seamless: ease-in-out over full period returns to start */
@keyframes bgGlow {
    0%, 100% { opacity: 0.78; }
    50% { opacity: 1; }
}

#battle-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: block;
}

.bg-veil {
    display: none;
}

.site-main,
.site-footer {
    position: relative;
    z-index: 2;
}

/* Header + mobile menu must sit above page content (Audio Bible search, etc.) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(3, 2, 8, 0.92) !important;
}

@media (prefers-reduced-motion: reduce) {
    .epic-bg-glow { animation: none; }
    .epic-bg.is-animated .epic-bg-image { opacity: 1 !important; }
    #battle-bg { display: none !important; }
    .bg-veil {
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(180deg, rgba(5,3,10,0.3), rgba(5,3,10,0.75));
    }
}


/* Scroll fade: page color always under the art (no hard image edge) */
html, body {
    background-color: #050308 !important;
}

/* Soft bottom blend into page color (fixed layer under UI) */
.epic-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(5, 3, 8, 0) 0%,
        rgba(5, 3, 8, 0.25) 45%,
        rgba(5, 3, 8, 0.72) 100%
    );
}