/* =========================================================================
   TOPOGRAPHY — the contour tile, used as an alpha mask rather than a flat
   background image. Masking means each surface tints the contours in its own
   colour, so the same artwork reads white on the ember card, white on the
   dark green one, ink on the frosted map panel and forest green on the white
   of the mission. The tile itself is assets/img/pattern/topo.svg.

   On the cards it is deliberately not tiled: it is blown up and pushed off
   one corner, so what shows is a few sweeping arcs rather than a busy repeat
   at card size.
   ====================================================================== */

:root { --topo: url("../img/pattern/topo.svg"); }

/* ---- the overlay cards: an arc off one corner -------------------------- */
.crosscard,
.appeal { position: relative; }

.crosscard::before,
.appeal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-color: currentColor;
  /* the tile carried its own 22% in the original; that is now set here, since
     masking strips the artwork back to pure alpha */
  opacity: .22;
  -webkit-mask-image: var(--topo);
  mask-image: var(--topo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 880px 880px;
  mask-size: 880px 880px;
  /* the arc sweeps in from the bottom left of each card */
  -webkit-mask-position: -90px -300px;
  mask-position: -90px -300px;
}

/* the copy sits over the pattern, never under it */
.crosscard > *,
.appeal > * { position: relative; z-index: 1; }

/* The map panel is left clear: it is already frosted glass over the rainforest,
   so contours on top of that read as noise rather than texture. */

/* each ground carries the contours at its own weight: the ember card is the
   boldest surface on the page, so it takes the lightest touch */
.crosscard--family::before { opacity: .1; }
.crosscard--impact::before { opacity: .12; }
.appeal::before { opacity: .1; }

/* ---- the mission: contours across the white ---------------------------- */
.mission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--forest);
  opacity: .16;
  -webkit-mask-image: var(--topo);
  mask-image: var(--topo);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 600px 600px;
  mask-size: 600px 600px;
}
.mission > * { position: relative; z-index: 1; }

/* ---- the curve under the hero ----------------------------------------- */
/* The seam is itself a mask, so anything inside it is clipped to the arc:
   the contours appear only in the white sweep reaching up into the hero,
   and stop dead at its edge. */
.hero .seam--curve { position: relative; }
.hero .seam--curve::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--forest);
  opacity: .14;
  -webkit-mask-image: var(--topo);
  mask-image: var(--topo);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 600px 600px;
  mask-size: 600px 600px;
}

/* ---- blobs drawn in contours rather than photography -------------------
   Both shapes keep their outline and their tint; what changes is what fills
   them. A faint ground gives the shape its body, and the contours sit on top
   of it, clipped to the same curve. */
.impact__blob > img,
.impact__blob img { display: none; }

/* the blob's own opacity is left to the tuned value in style.css, so what is
   set there is what is seen: overriding it here was quietly doubling the
   weight of the contours */
.impact__blob::before,
.impact__blob::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* no fill: a tint this large reads as a lighter patch of ground rather than a
   shape, and the join with the section above showed it up. Only the contour
   lines carry the blob now. */
.impact__blob::before { background: none; }
.impact__blob::after {
  background: var(--leaf);
  /* soft enough to read as texture on the dark ground rather than as drawing:
     a quarter of the blob's own 40%, so a tenth in the end */
  opacity: .25;
  -webkit-mask-image: var(--topo);
  mask-image: var(--topo);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 600px 600px;
  mask-size: 600px 600px;
}

.sideblob--family { background: none; opacity: 1; }
.sideblob--family::before,
.sideblob--family::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.sideblob--family::before { background: var(--leaf); opacity: .16; }
.sideblob--family::after {
  background: var(--forest);
  opacity: .2;
  -webkit-mask-image: var(--topo);
  mask-image: var(--topo);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 600px 600px;
  mask-size: 600px 600px;
}

/* the donate blob takes the same treatment: shape and tint kept, photograph
   replaced by contours on the forest ground */
.sideblob--donate { background: none; opacity: 1; }
.sideblob--donate::before,
.sideblob--donate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* no fill, for the same reason as the impact blob: a tint across a shape this
   size reads as a lighter patch of ground rather than as a shape */
.sideblob--donate::before { background: none; }
.sideblob--donate::after {
  background: var(--leaf);
  /* matched to the impact blob: a tenth, so the contours read as texture */
  opacity: .1;
  -webkit-mask-image: var(--topo);
  mask-image: var(--topo);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 600px 600px;
  mask-size: 600px 600px;
}