/* News banner module.
   Usage: include this stylesheet on the homepage and place the banner slot under the intro logo box. */
.newsbanner-slot {
    position: absolute;
    top: 60vh;
    top: 60svh;
    left: 0;
    z-index: 0;
    width: 100vw;
    margin-top: 0;
    margin-left: calc(50% - 50vw);
}

/* Surface shell: creates the atmospheric band that blends the banner into the intro section. */
.newsbanner-surface {
    --newsbanner-max-width: 1600px;
    --newsbanner-display-width: 960px;
    --newsbanner-aspect-ratio: 16 / 3;
    --newsbanner-top: 60vh;
    --newsbanner-height-limit: clamp(88px, 12vw, 150px);
    --newsbanner-backdrop-height: calc(var(--newsbanner-height-limit) * 0.6);
    --newsbanner-banner-opacity: 1;
    --newsbanner-backdrop-opacity: 0.82;
    position: absolute;
    top: var(--newsbanner-top);
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 880;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: calc(var(--newsbanner-height-limit) + 1.8rem);
    padding: 0.8rem 1rem 1rem;
    overflow: hidden;
    background: linear-gradient(180deg,
            rgba(2, 8, 14, 0) 0%,
            rgba(2, 8, 14, 0.5) 20%,
            rgba(2, 8, 14, 0.82) 54%,
            rgba(2, 8, 14, 0.42) 82%,
            rgba(2, 8, 14, 0) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.newsbanner-backdrop {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--newsbanner-backdrop-height);
    transform: translateY(-50%);
    z-index: 0;
    overflow: hidden;
    opacity: var(--newsbanner-backdrop-opacity);
    mask-image:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.68) 16%,
            rgba(0, 0, 0, 0.98) 32%,
            rgba(0, 0, 0, 0.98) 68%,
            rgba(0, 0, 0, 0.68) 84%,
            rgba(0, 0, 0, 0) 100%),
        radial-gradient(ellipse 78% 70% at center,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.98) 50%,
            rgba(0, 0, 0, 0.72) 66%,
            rgba(0, 0, 0, 0.18) 84%,
            rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.68) 16%,
            rgba(0, 0, 0, 0.98) 32%,
            rgba(0, 0, 0, 0.98) 68%,
            rgba(0, 0, 0, 0.68) 84%,
            rgba(0, 0, 0, 0) 100%),
        radial-gradient(ellipse 78% 70% at center,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.98) 50%,
            rgba(0, 0, 0, 0.72) 66%,
            rgba(0, 0, 0, 0.18) 84%,
            rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.newsbanner-backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px) saturate(0.5) brightness(0.75);
    transform: scale(1.14);
    transform-origin: center center;
}

.newsbanner-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(2, 8, 14, 0.96) 0%,
            rgba(2, 8, 14, 0.62) 12%,
            rgba(2, 8, 14, 0.18) 26%,
            rgba(2, 8, 14, 0.12) 74%,
            rgba(2, 8, 14, 0.62) 88%,
            rgba(2, 8, 14, 0.96) 100%),
        linear-gradient(180deg,
            rgba(2, 8, 14, 0.08) 0%,
            rgba(2, 8, 14, 0.4) 22%,
            rgba(2, 8, 14, 0.6) 100%),
        radial-gradient(circle at center,
            rgba(204, 51, 51, 0.16) 0%,
            rgba(204, 51, 51, 0.04) 42%,
            rgba(0, 0, 0, 0) 72%);
}

/* Foreground banner: capped to 150px height and framed like a deliberate section element. */
.newsbanner-banner {
    position: relative;
    z-index: 2;
    display: block;
    width: min(calc(100vw - 2rem), var(--newsbanner-display-width), var(--newsbanner-max-width));
    max-width: calc(100vw - 2rem);
    aspect-ratio: var(--newsbanner-aspect-ratio);
    max-height: var(--newsbanner-height-limit);
    opacity: var(--newsbanner-banner-opacity);
    color: #fff;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(225, 238, 255, 0.16),
        0 18px 42px rgba(0, 0, 0, 0.42),
        0 0 30px rgba(204, 51, 51, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow 0.2s ease, opacity 0.25s ease;
}

.newsbanner-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0) 26%,
            rgba(0, 0, 0, 0.12) 65%,
            rgba(204, 51, 51, 0.18) 100%),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

.newsbanner-banner::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -28%;
    width: 24%;
    z-index: 2;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 52%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg) translateX(-220%);
    animation: newsbanner-shimmer 6.4s ease-in-out infinite;
    pointer-events: none;
}

.newsbanner-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.newsbanner-surface.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.newsbanner-surface.is-fixed {
    --newsbanner-top: 0px;
    position: fixed;
    background: linear-gradient(180deg,
            rgba(2, 8, 14, 0.96) 0%,
            rgba(2, 8, 14, 0.82) 28%,
            rgba(2, 8, 14, 0.6) 58%,
            rgba(2, 8, 14, 0.18) 88%,
            rgba(2, 8, 14, 0) 100%);
}

.newsbanner-banner:hover,
.newsbanner-banner:focus-visible {
    opacity: 1;
    box-shadow:
        inset 0 0 0 1px rgba(204, 51, 51, 0.72),
        0 22px 48px rgba(0, 0, 0, 0.48),
        0 0 36px rgba(204, 51, 51, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@keyframes newsbanner-shimmer {
    0% {
        transform: skewX(-18deg) translateX(-220%);
        opacity: 0;
    }

    8% {
        opacity: 0.18;
    }

    22% {
        transform: skewX(-18deg) translateX(640%);
        opacity: 0;
    }

    100% {
        transform: skewX(-18deg) translateX(640%);
        opacity: 0;
    }
}

@media (max-width: 1024px) {
    .newsbanner-slot {
        top: 60vh;
        top: 60svh;
    }

    .newsbanner-surface {
        padding-bottom: 0.9rem;
    }
}

@media (max-width: 768px) {
    .newsbanner-slot {
        top: 60vh;
        top: 60svh;
    }

    .newsbanner-surface {
        --newsbanner-height-limit: clamp(78px, 18vw, 120px);
        min-height: calc(var(--newsbanner-height-limit) + 1.25rem);
        padding: 0.55rem 0.75rem 0.7rem;
    }

    .newsbanner-banner {
        width: min(calc(100vw - 1.5rem), var(--newsbanner-display-width), var(--newsbanner-max-width));
        max-width: calc(100vw - 1.5rem);
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .newsbanner-slot {
        top: 60vh;
        top: 60svh;
    }

    .newsbanner-surface {
        --newsbanner-height-limit: clamp(72px, 22vw, 104px);
        min-height: calc(var(--newsbanner-height-limit) + 1rem);
        padding: 0.45rem 0.5rem 0.55rem;
    }

    .newsbanner-banner {
        width: min(calc(100vw - 1rem), var(--newsbanner-display-width), var(--newsbanner-max-width));
        max-width: calc(100vw - 1rem);
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .newsbanner-surface,
    .newsbanner-banner,
    .newsbanner-banner::after {
        transition-duration: 0.01ms !important;
    }

    .newsbanner-banner::after {
        animation: none !important;
    }
}