/* The invite's background artwork. Shared by the landing page and the ticket
   page so both render the identical composition from one source. */

/* ---------- floating gradient blobs ---------- */

.blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* the artwork from the invite — already soft and grained, so no blur here */
.blob {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
}

/* PNG first so browsers without image-set() still get artwork */
.blob-a { background-image: url("/img/3asset.png");
  background-image: image-set(url("/img/3asset.webp") type("image/webp"), url("/img/3asset.png") type("image/png")); }
.blob-b { background-image: url("/img/1asset.png");
  background-image: image-set(url("/img/1asset.webp") type("image/webp"), url("/img/1asset.png") type("image/png")); }
.blob-c { background-image: url("/img/4asset.png");
  background-image: image-set(url("/img/4asset.webp") type("image/webp"), url("/img/4asset.png") type("image/png")); }
.blob-d { background-image: url("/img/3asset.png");
  background-image: image-set(url("/img/3asset.webp") type("image/webp"), url("/img/3asset.png") type("image/png")); }
.blob-e { background-image: url("/img/2asset.png");
  background-image: image-set(url("/img/2asset.webp") type("image/webp"), url("/img/2asset.png") type("image/png")); }

/* echoes the vertical chain of shapes on the invite, but kept sparse so the
   cream stays the dominant colour the way it is on the printed piece */
.blob-a { width: 44vmax; height: 44vmax; top: -14vmax; right: -12vmax; opacity: .85; }
.blob-b { width: 30vmax; height: 42vmax; top: 30%;  left: -13vmax; opacity: .5; }
.blob-c { width: 36vmax; height: 36vmax; top: 52%;  right: -15vmax; opacity: .6; }
.blob-d { width: 46vmax; height: 46vmax; bottom: -20vmax; left: -8vmax; opacity: .7; }
.blob-e { width: 26vmax; height: 36vmax; top: 6%;   left: 30%; opacity: .3; }