/* Mario Stanković — Background engine.
   .mesh applies a film-grain overlay; .bg-* sets the gradient mesh.
   Place content inside a child element (it is lifted above the grain). */

.mesh { position: relative; isolation: isolate; overflow: hidden; --ms-grain: .5; }
.mesh::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'1.4'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  background-size: 280px 280px; mix-blend-mode: overlay; opacity: var(--ms-grain);
}
.mesh > * { position: relative; z-index: 1; }

/* Warm sunrise mesh (terracotta / amber / marigold) */
.bg-warm { --ms-grain:.55; background-color:#EC6F41;
  background-image:
    radial-gradient(60% 50% at 78% 30%, rgba(233,177,94,1) 0%, rgba(233,177,94,0) 58%),
    radial-gradient(55% 48% at 15% 20%, rgba(235,143,80,1) 0%, rgba(235,143,80,0) 60%),
    radial-gradient(50% 55% at 30% 92%, rgba(236,111,65,1) 0%, rgba(236,111,65,0) 62%),
    radial-gradient(45% 40% at 90% 88%, rgba(159,175,112,1) 0%, rgba(159,175,112,0) 55%); }

/* Cool grove mesh (sage / jade / petrol) */
.bg-cool { --ms-grain:.5; background-color:#216D7A;
  background-image:
    radial-gradient(58% 50% at 22% 30%, rgba(78,165,123,1) 0%, rgba(78,165,123,0) 60%),
    radial-gradient(55% 52% at 80% 24%, rgba(159,175,112,1) 0%, rgba(159,175,112,0) 58%),
    radial-gradient(50% 55% at 70% 88%, rgba(33,109,122,1) 0%, rgba(33,109,122,0) 60%),
    radial-gradient(45% 45% at 8% 92%, rgba(14,45,65,1) 0%, rgba(14,45,65,0) 60%); }

/* Full spectrum mesh (the signature) */
.bg-spectrum { --ms-grain:.5; background-color:#E9B15E;
  background-image:
    radial-gradient(46% 45% at 12% 18%, rgba(236,111,65,1) 0%, rgba(236,111,65,0) 60%),
    radial-gradient(44% 46% at 84% 22%, rgba(235,143,80,1) 0%, rgba(235,143,80,0) 60%),
    radial-gradient(48% 48% at 22% 82%, rgba(159,175,112,1) 0%, rgba(159,175,112,0) 60%),
    radial-gradient(46% 50% at 78% 70%, rgba(78,165,123,1) 0%, rgba(78,165,123,0) 58%),
    radial-gradient(40% 44% at 52% 100%, rgba(33,109,122,1) 0%, rgba(33,109,122,0) 60%); }

/* Deep night mesh (navy / midnight — for dark surfaces) */
.bg-dark { --ms-grain:.4; background-color:#0E1E2B;
  background-image:
    radial-gradient(55% 48% at 82% 24%, rgba(33,109,122,1) 0%, rgba(33,109,122,0) 60%),
    radial-gradient(50% 46% at 12% 30%, rgba(14,45,65,1) 0%, rgba(14,45,65,0) 62%),
    radial-gradient(46% 52% at 74% 92%, rgba(78,165,123,.65) 0%, rgba(78,165,123,0) 58%),
    radial-gradient(40% 40% at 6% 90%, rgba(236,111,65,.5) 0%, rgba(236,111,65,0) 60%); }

/* Soft cream mesh (subtle tints on paper) */
.bg-soft { --ms-grain:.4; background-color:#FBF4E9;
  background-image:
    radial-gradient(55% 55% at 78% 18%, rgba(233,177,94,.55) 0%, rgba(233,177,94,0) 60%),
    radial-gradient(50% 50% at 14% 24%, rgba(236,111,65,.32) 0%, rgba(236,111,65,0) 62%),
    radial-gradient(48% 52% at 68% 88%, rgba(78,165,123,.4) 0%, rgba(78,165,123,0) 60%),
    radial-gradient(44% 44% at 12% 92%, rgba(33,109,122,.3) 0%, rgba(33,109,122,0) 62%); }