/* ==========================================================================
   Starfish Group — story.css
   The transformation story: three sections and one decorative layer over all
   of them.

   THE COMPOSITION IS THE START OF A TRAJECTORY, NOT A RESTING PLACE.
   Everything here sets where an object BEGINS. Where it travels lives in
   assets/js/story.js, and the two are designed together — a base position
   chosen on its own puts the object somewhere wrong for most of its run.

   THE STACKING. An illustration has to pass IN FRONT OF a section's colour
   field, or it vanishes the moment it crosses a boundary, and BEHIND every
   headline, photograph and control. Three things must hold at once:

     .story          owns the stacking context, so none of this leaks out
     the sections    must NOT create stacking contexts of their own, or their
                     content would be trapped underneath the layer
     .story__layer   z-index 1: above the backgrounds, below the content
     content         z-index 2

   The sections inside therefore carry position:relative with no z-index.
   Adding one back will silently put the objects on top of the copy.
   ========================================================================== */

.story {
  position: relative;
  z-index: 0;
  /* Horizontal only, and on the WRAPPER rather than on any section. The
     objects begin well outside the left and right edges, so something has to
     stop them widening the document — but clipping a section would cut them
     off at exactly the boundary they exist to cross. */
  /* CLIPPED ON BOTH AXES. It was overflow-y: visible so an object could cross
     an internal section seam — but the seams that matter are all INSIDE this
     box, and leaving the vertical axis open let the threadfin climb out of the
     top of it and swim across the dark hero. Clipping here means an object
     that runs past the first or last section slides behind it instead, which
     is the same behaviour the cake has at the top of product development. */
  overflow: clip;
}

.story__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Everything a visitor reads or clicks outranks the objects. */
.story .shell,
.story .develop__inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   THE OBJECTS
   Deliberately oversized, and anchored well outside the frame. None of the
   three is fully visible at the moment it first appears.
   -------------------------------------------------------------------------- */
.obj {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* SIZE AND TRAJECTORY ARE ONE DECISION. Each object translates a share of ITS
   OWN height, so a smaller object covers less ground for the same percentage.
   The fish and crab are back at their original sizes by request; their scroll
   ranges in story.js were shortened to compensate, otherwise the same -95%
   would read as a tenth of the range and look glued again. */


/* Crab stick — the cross-section object, anchored to the right edge. */
/* Anchored lower than the other two. It has to still be on screen when
   product development arrives, and an object placed high has already climbed
   away by then however much you lag it. */
/* ANCHORED FROM THE BOTTOM, IN PIXELS. The layer's bottom edge is the bottom
   of product development, which is where this object does its work — so an
   offset from there is stable no matter what is inserted above it. As a
   percentage of the layer (58%) it moved every time the page grew: adding the
   map section pushed product development 684px down the page but the crab only
   397px, so it ended up 591px ABOVE the section it is supposed to be bridging
   into, stranded in sourcing. */
.obj--crab { top: auto; bottom: 720px; right: -12vw; width: clamp(360px, 30vw, 520px); }

/* Sits mostly on the sourcing side and dips over the seam into product
   development rather than straddling it evenly. The value is measured, not
   chosen: it is what puts the ball's centre about 150px above the boundary at
   the moment that boundary crosses the middle of the screen. */
/* Sits in the open middle of product development — between the copy column on
   the left and the crab coming down the right — rather than cropped by an
   edge like the other two. Smaller than them for the same reason: it fills a
   gap instead of entering from outside. */


/* --------------------------------------------------------------------------
   RESPONSIVE
   Recomposed, not scaled down. Each object gets a different anchor and a
   different share of the screen; the trajectories are re-tuned to match in
   story.js through gsap.matchMedia.
   -------------------------------------------------------------------------- */
@media (max-width: 1205px) {
  .obj--crab { top: auto; bottom: 690px; right: -16vw; width: 42vw; }
}


@media (max-width: 767px) {
  .obj--crab { top: auto; bottom: 630px; right: -28vw; width: 66vw; }
}

@media (prefers-reduced-motion: reduce) {
  /* story.js writes no transform at all in this mode, so these are final
     compositions rather than starting points — pulled inside the frame so each
     object still reads as a deliberate off-grid placement. */
  .obj--crab { top: auto; bottom: 770px; right: -6vw; }
}