/* ===========================================================================
   Auxilium — sfondo "mesh" fisso, condiviso da tutto il sito.

   3 blob blurred (blu / viola / ciano-ambra) posizionati assoluti nel body,
   sotto a tutto il contenuto. Animazione lenta sul transform (15-25 sec per
   ciclo) per dare "vita" senza disturbare la lettura.

   Vive in fixed: scrolla con il viewport, non con la pagina. I container
   sopra (.app-shell, .ax-landing-shell, ecc.) hanno sfondo bianco/semi
   trasparente che lascia trasparire il mesh nei margini e in zone "ariose".

   Sul tema scuro l'opacità dei blob viene abbassata e i colori shiftano
   verso il primary scuro per non rendere lo sfondo carico.
   =========================================================================== */

.ax-mesh-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ax-mesh-background .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.42;
    will-change: transform;
}

.ax-mesh-background .blob-1 {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, var(--ax-primary-500), transparent 65%);
    top: -180px;
    left: -120px;
    animation: ax-mesh-float-a 22s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.ax-mesh-background .blob-2 {
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, var(--ax-primary-700), transparent 65%);
    top: 80px;
    right: -160px;
    animation: ax-mesh-float-b 26s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.ax-mesh-background .blob-3 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--ax-accent-500), transparent 65%);
    bottom: -180px;
    left: 35%;
    opacity: 0.32;
    animation: ax-mesh-float-c 28s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes ax-mesh-float-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(60px, 80px, 0) scale(1.12); }
}
@keyframes ax-mesh-float-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-70px, 50px, 0) scale(0.94); }
}
@keyframes ax-mesh-float-c {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, -60px, 0) scale(1.08); }
}

/* ── Tema scuro: opacità ridotta, niente "warm" sul fondo nero ─────────── */
[data-theme="dark"] .ax-mesh-background .blob,
.theme-dark .ax-mesh-background .blob {
    opacity: 0.22;
}

[data-theme="dark"] .ax-mesh-background .blob-3,
.theme-dark .ax-mesh-background .blob-3 {
    /* L'ambra su sfondo scuro spinge troppo verso il "marketing tech",
       riconverto a blu primary per restare coerente con la palette dark. */
    background: radial-gradient(circle, var(--ax-primary-600), transparent 65%);
    opacity: 0.18;
}

/* ── Reduced motion: blob fermi, niente animazioni ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ax-mesh-background .blob {
        animation: none !important;
    }
}