/**
 * Shared decorative ribbon (hero atmosphere) — TestNeo marketing pages
 */
.hero,
.labs-hero,
.aimx-hero,
.blog-hero,
.page-hero,
.article-hero,
.has-site-ribbon {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.site-ribbon,
.hero-ribbon {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Docs articles are long — keep ribbon in the top band only */
.doc-main.has-site-ribbon {
    position: relative;
    isolation: isolate;
}
.doc-main.has-site-ribbon > .site-ribbon {
    inset: auto;
    top: 0;
    right: 0;
    left: 0;
    height: min(420px, 55vh);
    overflow: hidden;
}

.site-ribbon img,
.hero-ribbon img {
    position: absolute;
    top: -4%;
    right: -6%;
    width: min(62vw, 720px);
    height: auto;
    max-width: none;
    opacity: 0.72;
    mix-blend-mode: multiply;
    transform: rotate(-4deg);
    user-select: none;
}

.site-ribbon::after,
.hero-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 58%, var(--bg, #fff) 96%),
        linear-gradient(90deg, var(--bg, #fff) 0%, color-mix(in srgb, var(--bg, #fff) 70%, transparent) 22%, transparent 42%, transparent 100%);
    pointer-events: none;
}

.has-site-ribbon > *:not(.site-ribbon):not(.hero-ribbon),
.hero > .container,
.labs-hero > .container,
.aimx-hero > .container,
.blog-hero > .container,
.article-hero > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .site-ribbon img,
    .hero-ribbon img {
        width: min(90vw, 520px);
        right: -18%;
        top: 0;
        opacity: 0.38;
    }
}

@media (max-width: 600px) {
    .site-ribbon img,
    .hero-ribbon img {
        width: 120%;
        right: -40%;
        top: -2%;
        opacity: 0.28;
    }
}

@media (prefers-color-scheme: dark) {
    .site-ribbon img,
    .hero-ribbon img {
        opacity: 0.45;
        mix-blend-mode: screen;
        filter: brightness(1.15) saturate(0.9);
    }
    .site-ribbon::after,
    .hero-ribbon::after {
        background:
            linear-gradient(180deg, transparent 50%, var(--bg, #111110) 94%),
            linear-gradient(90deg, var(--bg, #111110) 0%, transparent 35%, transparent 72%, color-mix(in srgb, var(--bg, #111110) 70%, transparent) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-ribbon img,
    .hero-ribbon img { transform: none; }
}