/* The approved flower, treated as a neutral projected shadow on each surface. */
.hero,
.intro,
.services,
.approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero { background-color: var(--paper); }

.hero::before,
.intro::before,
.services::before,
.approach::before,
.approach::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: auto;
  aspect-ratio: 1672 / 941;
  background-image: url('../assets/peony-shadow.webp');
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  /* White becomes invisible in multiply; the flower retains its soft grey shadow. */
  filter: grayscale(1) contrast(1.4) brightness(1.24) blur(1px);
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse 50% 55% at 70% 45%, #000 25%, transparent 90%);
  transform-origin: center;
  pointer-events: none;
}

/* A broad, quiet bloom behind the opening typography. */
.hero::before {
  width: clamp(780px, 76vw, 1280px);
  left: -28%;
  top: 20px;
  opacity: .7;
  transform: rotate(-17deg);
}

/* A mirrored impression entering the author section from the right. */
.intro::before {
  width: clamp(780px, 80vw, 1300px);
  right: -27%;
  top: 30%;
  opacity: .7;
  transform: scaleX(-1) rotate(15deg);
}

/* Cropped petals near the lower edge of the warm services surface. */
.services::before {
  width: clamp(740px, 70vw, 1180px);
  left: -27%;
  bottom: -100px;
  opacity: .7;
  transform: rotate(21deg);
}

/* Two different scales on pink, with no visible rectangular bitmap edges. */
.approach::before {
  width: clamp(1060px, 110vw, 1700px);
  right: -18%;
  left: auto;
  top: -90px;
  bottom: auto;
  opacity: .82;
  transform: rotate(-20deg);
}

.approach::after {
  width: clamp(800px, 80vw, 1200px);
  left: -10%;
  bottom: -130px;
  opacity: .55;
  transform: scaleX(-1) rotate(-10deg);
}

@media (max-width: 760px) {
  .hero::before {
    width: 760px;
    left: -430px;
    top: 35px;
    opacity: .6;
    transform: rotate(-14deg);
  }
  .intro::before {
    width: 760px;
    right: -430px;
    top: auto;
    bottom: -25px;
    opacity: .6;
    transform: scaleX(-1) rotate(12deg);
  }
  .services::before {
    width: 740px;
    left: -400px;
    bottom: 10px;
    opacity: .6;
    transform: rotate(17deg);
  }
  .approach::before {
    width: 850px;
    right: -270px;
    top: -25px;
    opacity: .7;
    transform: rotate(-15deg);
  }
  .approach::after {
    width: 780px;
    left: -170px;
    bottom: -50px;
    opacity: .48;
    transform: scaleX(-1) rotate(-8deg);
  }
}