/* ==========================================================================
   nbit.center — Section background FX
   Canvas layer sits BEHIND section content (see section-fx.js).
   ========================================================================== */

.nb-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* readability scrim: keep the centre (where text sits) darker so the
       animated background never competes with the copy */
    -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, rgba(0, 0, 0, 0.65) 100%);
    mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, rgba(0, 0, 0, 0.65) 100%);
    opacity: 0.62;
}

.nb-fx canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sections that host an FX layer must clip it and stack content above.
   Use overflow:clip (not hidden) so it clips the FX WITHOUT creating a scroll
   container — otherwise it would break position:sticky descendants (e.g. the
   founder portrait). overflow:hidden is the fallback for very old browsers. */
.nb-section,
.nb-cta-band {
    position: relative;
    overflow: hidden;
    overflow: clip;
}

.nb-section > .nb-container,
.nb-cta-band > .nb-container {
    position: relative;
    z-index: 1;
}

/* On inner pages the FX is only a banner strip at the top, not the whole page. */
.nb-section--page > .nb-fx {
    inset: 0 0 auto 0;
    height: clamp(260px, 42vh, 460px);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    opacity: 0.55;
}

/* The CTA band is short — keep the stream subtle and edge-faded. */
.nb-cta-band > .nb-fx {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    opacity: 0.5;
}

/* The KI / "Zukunftssicher mit KI" network is the busiest effect — keep it
   noticeably more restrained than the others. */
#ki .nb-fx {
    opacity: 0.36;
}

/* ------------------------------------------------------------------------
   Closing CTA band on inner pages: make it full-bleed and flush with the
   footer (remove the black container margins + the section's bottom gap).
   ------------------------------------------------------------------------ */
.nb-section--page:has(.nb-cta-band) {
    padding-bottom: 0;
}

.nb-section--page > .nb-container > .nb-cta-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    /* engine paints a single static frame; keep it faint and calm */
    .nb-fx {
        opacity: 0.4;
    }
}