/* =========================
   BANNER WITH ICON FRAME
========================= */
/* The transparent banner must keep its native proportions. Higher specificity
   prevents older fixed-height/mobile and cover rules from clipping the motif. */
.brand-banner .banner-header {
    position: absolute;
    inset: 0 0 auto;
    height: auto;
    max-width: 760px;
    justify-self: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: auto;
}
.brand-banner .banner-header::before,
.brand-banner .banner-header::after {
    content: none;
    animation: none;
}
.brand-banner .main-banner {
    height: auto;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .55))
            drop-shadow(0 0 9px rgba(123, 63, 180, .25));
}
.brand-banner .banner-icon {
    display: none;
}
.brand-banner {
    /* Align the alternate banner's chain with the navigation's upper edge.
       The shield and serpents hang below this line. */
    width: min(760px, calc(90vw - 740px));
    aspect-ratio: 2171 / 406;
    margin: 6px auto 0;
    position: relative;
    z-index: 1001;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

/* Compact bar: links on the left, music on the right, ornament in between. */
.brand-banner + .topbar {
    padding-top: 10px;
    margin-bottom: 46px;
    gap: 10px;
}
.site-header .topbar-brand,
.site-header .topbar .discord-button {
    display: none;
}
.brand-banner + .topbar .topbar-menu {
    gap: 4px;
}
.brand-banner + .topbar .nav-link {
    padding-inline: 8px;
}
@media (max-width: 1100px) {
    .site-header .brand-banner {
        width: min(90vw, 760px);
        margin-top: 6px;
        margin-bottom: 0;
    }
    .brand-banner + .topbar {
        padding-top: clamp(48px, 14vw, 96px);
        margin-bottom: 0;
    }
}

.banner-header {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: 170px;
    overflow: visible;
    border-radius: 18px;
    border: 1px solid rgba(192,108,255,0.30);
    background: #000;
    box-shadow:
        0 0 12px rgba(143,61,255,0.24),
        0 0 38px rgba(192,108,255,0.30),
        0 0 86px rgba(98,35,210,0.22);
    isolation: isolate;
}

.banner-header::before {
    content: "";
    position: absolute;
    inset: -24px -34px;
    z-index: -1;
    pointer-events: none;
    border-radius: 36px;
    background:
        radial-gradient(ellipse at 10% 74%, rgba(112,42,255,0.82), transparent 31%),
        radial-gradient(ellipse at 28% 108%, rgba(192,108,255,0.58), transparent 39%),
        radial-gradient(ellipse at 64% 110%, rgba(143,61,255,0.62), transparent 41%),
        radial-gradient(ellipse at 91% 70%, rgba(98,35,210,0.78), transparent 33%);
    filter: blur(18px);
    opacity: 0.90;
    transform: translate3d(0, 0, 0) scale(1);
    animation: bannerFireGlow 5.8s ease-in-out infinite alternate;
}

.banner-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 18% 100%, rgba(192,108,255,0.14), transparent 42%),
        radial-gradient(ellipse at 84% 100%, rgba(112,42,255,0.13), transparent 38%),
        linear-gradient(to top, rgba(143,61,255,0.06), transparent 46%);
    box-shadow:
        inset 0 -10px 28px rgba(143,61,255,0.10),
        inset 0 0 0 1px rgba(225,178,255,0.08);
    mix-blend-mode: screen;
    animation: bannerHeatReflection 4.6s ease-in-out infinite alternate;
}

@keyframes bannerFireGlow {
    0% {
        opacity: 0.68;
        filter: blur(19px);
        transform: translate3d(-2px, 1px, 0) scale(0.985);
    }
    38% {
        opacity: 0.92;
        filter: blur(16px);
        transform: translate3d(2px, -1px, 0) scale(1.015);
    }
    72% {
        opacity: 0.78;
        filter: blur(21px);
        transform: translate3d(-1px, 2px, 0) scale(1.005);
    }
    100% {
        opacity: 0.98;
        filter: blur(17px);
        transform: translate3d(2px, 0, 0) scale(1.025);
    }
}