/* ================================================
   FLUID BACKGROUND — Reusable Scroll-Reactive Layer
   ================================================ */
.fluidbg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Orbs — large, soft, glowing blobs ── */
.fluidbg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    will-change: transform;
    mix-blend-mode: screen;
    transition: transform 0.15s linear;
}

.fluidbg-orb--1 {
    width: 500px;
    height: 500px;
    top: -10%;
    left: -8%;
}

.fluidbg-orb--2 {
    width: 420px;
    height: 420px;
    top: 30%;
    right: -10%;
}

.fluidbg-orb--3 {
    width: 380px;
    height: 380px;
    bottom: 5%;
    left: 20%;
}

.fluidbg-orb--4 {
    width: 320px;
    height: 320px;
    bottom: 15%;
    right: 15%;
}

/* ── Streaks — flowing light lines ── */
.fluidbg-streak {
    position: absolute;
    height: 1px;
    border-radius: 1px;
    will-change: transform, opacity;
    transition: transform 0.15s linear, opacity 0.15s linear;
}

.fluidbg-streak--1 {
    width: 65%;
    top: 25%;
    left: -5%;
    transform-origin: left center;
}

.fluidbg-streak--2 {
    width: 55%;
    bottom: 30%;
    right: -5%;
    transform-origin: right center;
}

/* ── Noise overlay ── */
.fluidbg-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ================================================
   Accessibility — Reduce motion
   ================================================ */
@media (prefers-reduced-motion: reduce) {

    .fluidbg-orb,
    .fluidbg-streak {
        transition: none !important;
        opacity: 0.15;
    }
}