/* ambient.css (owner: the ambient agent): the look of the falling petals, sparkles, feathers and motes
 * of light that ambient.js moves over the art. The script makes them inside its ".fx-layer ambient-layer"
 * (one in each art section) and its ".fx-page ambient-page" (on <body>); base.css places, clips and hides
 * those layers. Without the script nothing here shows.
 *
 * A particle is two elements: the outer one falls, twinkles or rises, the inner one is the picture and
 * sways. Both move by transform and opacity only, each on a compositor layer of its own. */
.ambient-layer > i,
.ambient-page > i {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;   /* until its animation shows it */
  will-change: transform, opacity;
}

.ambient-layer > i > i,
.ambient-page > i > i {
  display: block;
}

/* A petal or a feather: the script's inline SVG (petal pinks from the hero art, creams and gold from
   tokens.css). */
.amb-petal > i,
.amb-feather > i {
  background-size: 100% 100%;
  will-change: transform;
}

/* A feather rocks from near its tip. */
.amb-feather > i {
  transform-origin: 50% 25%;
}

/* A sparkle: the site's own gold ornament in a soft warm glow, parchment white to pale gold. */
.amb-spark > i {
  background:
    url("/assets/img/ui/sparkle.svg") center / 64% 64% no-repeat,
    radial-gradient(closest-side, rgb(255 250 240 / 0.95), rgb(247 220 145 / 0.4) 40%, rgb(247 220 145 / 0));
}

/* A mote: a soft warm light, parchment white in a gold-bright haze, so it shows on the pale sky too. */
.amb-mote > i {
  background-image: radial-gradient(closest-side, rgb(255 250 240 / 0.95), rgb(255 250 240 / 0.8) 20%, rgb(243 198 90 / 0.45) 50%, rgb(243 198 90 / 0));
}