/* ==========================================================================
   Starfish Group — develop.css
   Section 04: one material becoming many things.

   The most expressive section on the page. Three objects at three depths,
   each cut by a different edge — the composition is the argument. A grid of
   product cards here would say the opposite of what the copy says.
   ========================================================================== */

.develop {
  position: relative;
  /* NOT ivory. Sourcing above it is ivory, and two identical grounds meeting
     gave the two sections no boundary at all — the reason the change of
     chapter was invisible. */
  /* Back to ivory. */
  background: var(--ivory);
  padding-block: var(--s-140);

  /* THE SECTION CLIPS ITS OWN ARTWORK. The cake is meant to look like it is
     coming out from BEHIND the section above rather than lying on top of it,
     and the story layer cannot do that — it paints above every section
     background by design, which is exactly what lets the fish and the crab
     cross a seam. Clipping here is what hides the part that has not emerged
     yet. It also makes the pink ball's overhang explicit: it was already
     invisible below the section, painted over by .plant, and now it is cut
     deliberately rather than by accident. */
  overflow: clip;
}

.develop__inner { position: relative; z-index: 1; }

/* PIXELS, NOT ch. ch resolves against this element's own 16px body font, so
   34ch came out around 270px — nowhere near enough for a 56px headline, which
   broke "Your market is different. Your product can be too." into four short
   lines with a column of white space beside them. The <br> in the markup now
   decides the break and this just has to be wide enough to honour it. */
.develop__copy { max-width: min(640px, 52%); }

.develop__heading { margin-top: var(--s-20); }

.develop__body {
  max-width: 42ch;
  margin-top: var(--s-24);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.develop__cta { margin-top: var(--s-40); }


/* Three depths: one large and close, one mid, one small and far. */

@media (max-width: 900px) {
  .develop { padding-block: var(--s-80); }
  .develop__copy { max-width: none; }
  /* The art overrides for this width live with the other art rules further
     down. Up here they lost to the base rule, which is written after them */
}

/* --------------------------------------------------------------------------
   STATIC COMPANIONS
   The travelling objects live in the story layer above; these two belong to
   this section and do not move. They exist to build the composition around the
   crab as it passes through — one cropped by the left edge, one by the bottom.

   z-index 0: above this section's own background, below its copy at 2, and
   below the story layer at 1 so a travelling object passes in front of them.
   -------------------------------------------------------------------------- */
.develop__art {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* THE CAKE — anchored to the TOP EDGE OF THIS SECTION, not to the story
   layer. On the layer its anchor was a percentage of a box three sections
   tall, and that box nearly doubles in height at the 900px breakpoint: it put
   the cake 239px above this section at 1440 but 1115px above it at 900, which
   is not product development at all, it is the middle of sourcing. Measured
   against its own width instead, the object sits in the same place relative
   to the section at every width.

   -0.62 hides roughly 63% of it at the start of the scroll range. story.js
   then moves it DOWN 90% of its height as the section passes, so it emerges
   from behind the boundary rather than being parked there, and finishes just
   inside the section.

   The multiplier is set by the crab, which has to stay just below this object.
   Both shrink with the viewport, but the crab travels 130% of ITS height while
   this travels 90% of a smaller one, so the gap between them narrows as the
   screen does: -0.69 was comfortable at 1440 and put the cake 8px BELOW the
   crab at 1280. */
.develop__art--gap {
  --gap-w: clamp(275px, 24vw, 390px);
  top: calc(var(--gap-w) * -0.62);
  left: 52%;
  width: var(--gap-w);
  /* Declared here as well as in the tween: story.js writes nothing under
     prefers-reduced-motion, and the lean is part of the composition. */
  transform: rotate(-7deg);
}

.develop__art--tofu { top: 46%; left: -7%;  width: min(300px, 21vw); transform: rotate(-4deg); }
/* Moved off centre. The travelling ball now occupies the middle gap, and the
   two stacked on the same spot read as one object with a fringe rather than
   two. This one takes the lower left, below the call to action. */
.develop__art--pink { bottom: -18%; left: 26%; width: min(300px, 22vw); transform: rotate(3deg); }

@media (max-width: 900px) {
  /* One companion, not two — the copy runs the full width here. */
  .develop__art--tofu { display: none; }
  .develop__art--pink { bottom: -10%; left: auto; right: -22%; width: 46vw; }

  /* THIS USED TO BE AT THE TOP OF THE FILE, WHERE IT DID NOTHING. Same
     specificity as the base rule and written before it, so the base rule won
     and the cake stayed at its desktop 275px on a 390px screen — wider than
     the headline, which then ran across it. It is 46vw here as intended, and
     it starts further left so the crab stick coming down the right edge has
     somewhere to pass. */
  .develop__art--gap { --gap-w: 46vw; left: 38%; }
}

/* ONE OBJECT ON A PHONE, AND IT IS THE ONE PASSING THROUGH.

   At 900px the tofu goes for the reason written above: the copy runs the
   full width, so there is no margin left for things to float in. At 390 that
   is true twice over. The headline is four lines deep and reaches 370px of a
   390px screen, and the cake sat behind the whole first line while the crab
   stick came down the right edge into the same corner — two objects and a
   headline competing for one square.

   The cake goes rather than the crab stick, which is the opposite of what
   the section owning it would suggest. The crab is the object that crosses
   from sourcing into this section; it is doing the one job that cannot be
   done anywhere else, and it arrives above the headline rather than behind
   it. The cake is a companion, and a companion is what a small screen has
   no room for. The pink ball stays: it sits under the call to action, clear
   of every line of type. */
@media (max-width: 767px) {
  .develop__art--gap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The anchor above is where the cake STARTS, most of it still behind the
     section boundary, and story.js is what brings it out. Nothing is written
     to the element in this mode, so that anchor would leave 89% of it hidden
     permanently — a sliver of pastry above the heading. This is the position
     the animated version finishes at: -0.78 of its width plus the 0.88 the
     tween travels. Change one and the other has to follow. */
  .develop__art--gap { top: calc(var(--gap-w) * 0.1); }
}