/*
 * Paper-cut section transitions
 *
 * Each section owns its entrance edge.  The solid field is CSS, while the
 * transparent WebP supplies only the torn silhouette.  This prevents a
 * content-driven section height from stretching or offsetting the artwork.
 */

:root {
  /* The source artwork is 1,440px wide.  Its lower torn edge is placed at
     the entrance of the following section. */
  /* Use enough of the lower asset to start in its solid paper area.  A shallow
     crop starts after parts of the tear have already become transparent and
     exposes a straight section boundary. */
  --paper-cut-cover: clamp(54px, 12vw, 240px);
  --hero-paper-cut-cover: clamp(70px, 10vw, 148px);
}

/* Colour fields stay independent from their decorative entrance overlay. */
.benefit-band,
.why,
.varieties,
.csc,
.site-footer {
  background: var(--green) !important;
}

.about,
.membership,
.costs,
.contact {
  background: var(--sand) !important;
}

/* One source of truth for every coloured paper transition.  The next section
   carries the *lower* edge of the section above it: its colour tears downward
   into the new field, as in the approved desktop reference. */
.paper-cut-green::before,
.paper-cut-sand::before,
.paper-cut-photo::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  /* The opaque part begins at the top of the new field and the transparent
     lower edge reveals that field underneath.  This makes the preceding
     colour visibly tear downward instead of disappearing above the boundary. */
  inset: 0 0 auto !important;
  display: block !important;
  height: var(--paper-cut-cover) !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

/* A green field is preceded by sand; a sand field (or photograph) is preceded
   by green.  The transparent pixels stay transparent so the new field is
   visible underneath and the paper silhouette remains intact. */
.paper-cut-green::before {
  background-image: url("../images/backgrounds/green-paper-banner.webp") !important;
}

.paper-cut-sand::before,
.paper-cut-photo::before {
  background-image: url("../images/backgrounds/green-paper-cut.webp") !important;
}

/* The Join artwork already carries its own lower photo-to-sand tear.  Giving
   the following contact section a second entrance sheet creates a green bar
   and two competing silhouettes at this one boundary. */
.join-hero + .contact.paper-cut-sand::before,
.csc-join-scroll + .contact.paper-cut-sand::before {
  content: none !important;
}

/* The photo-to-green transition is painted by the hero itself.  A decoration
   belonging to the following section can end up behind the hero's stacking
   context, making the torn edge disappear at some widths. */
.paper-cut-benefits::before {
  content: none !important;
}

/* The following section owns the transition, so no lower duplicate may
   compete with the single shared paper edge. */
.paper-cut-green::after,
.paper-cut-sand::after,
.paper-cut-photo::after {
  content: none !important;
}

/* One clean green tear over the hero photo.  It is deliberately inside the
   hero stacking context, so the WebP's transparent pixels reveal the photo
   and the opaque part merges directly into the green benefit band. */
.hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: auto 0 0 !important;
  height: var(--hero-paper-cut-cover) !important;
  pointer-events: none !important;
  background: url("../images/backgrounds/green-paper-cut.webp") center top / 100% auto no-repeat !important;
}

.paper-cut-green > .shell,
.paper-cut-sand > .shell,
.paper-cut-photo > .shell,
.hero > .shell {
  z-index: 2;
}