/* Sort pile: cutouts start heaped in the middle of a pinned stage and, as you scroll, leave the heap two at a time
   on a little hop and land in their own seats of a 3-column grid; each one's caption fades up as it lands.
   Measured from decimals.co/placements ("Scouted, then hired": pile -> class sort), rewritten. The motion lives in
   part.js (scroll-scrubbed transforms); this file is the layout, the seats and the caption timing.

   Markup:
   <section class="spile" data-spile>                         the scroll track (180vh)
     <div class="spile__sticky">                              pinned 100vh stage
       <h2>...</h2>                                           anything above the grid
       <div class="spile__grid">                              3 columns, auto width, centred
         <div class="spile__seat">
           <div class="spile__art"><div class="spile__fly" style="--sw: 108%">...cutout...</div></div>
           <div class="spile__label">caption</div>
         </div>
         <div class="spile__seat spile__seat--open"><div class="spile__art"><i class="spile__open">Your spot?</i></div></div>
         ...
   Knobs (measured defaults):
     --spile-track    180vh                              track height (the pin lasts track - 100vh)
     --spile-art      clamp(110px, 14vh, 168px)          seat size (square)
     --spile-gap-y / --spile-gap-x   clamp(8px,1.6vh,18px) / clamp(32px,6vw,88px)
     --spile-seat     #f2ede5                            seat card colour (inset 7px, radius 2)
     --sw             100%                               per cutout: its width relative to the seat (hangs over it when > 100%)
     --spile-label-in 350ms cubic-bezier(.22,1,.36,1)    caption fade/rise on landing; it leaves in 150ms ease (no ghost
                                                         captions trail a cutout flying back up when you scroll back) */
.spile {
  --spile-track: 180vh;
  --spile-art: clamp(110px, 14vh, 168px);
  --spile-gap-y: clamp(8px, 1.6vh, 18px);
  --spile-gap-x: clamp(32px, 6vw, 88px);
  --spile-seat: #f2ede5;
  --spile-label-in: 350ms cubic-bezier(.22, 1, .36, 1);
  position: relative;
  height: var(--spile-track);
}

.spile__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vh, 40px) clamp(16px, 3vw, 32px) 0;
  text-align: center;
}

.spile__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-content: center;
  gap: var(--spile-gap-y) var(--spile-gap-x);
}

.spile__seat { text-align: center; }

.spile__art {
  position: relative;
  width: var(--spile-art);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* the seat: a paper card a little inside the art box, so a cutout wider than 100% hangs over its edges */
.spile__art::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--spile-seat);
  border-radius: 2px;
}

.spile__fly {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.spile__fly > * { width: var(--sw, 100%); flex: none; }

.spile__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  font-style: italic;
  line-height: 1.3;
  transform: rotate(-3deg);
}

/* caption: tooltip-style asymmetry, slow in on landing, quick out when the scrub rewinds */
.spile__label {
  margin-top: 6px;
  transition: opacity 150ms ease, transform 150ms ease;
}
.spile.is-scrub .spile__label { opacity: 0; transform: translateY(6px); }
.spile.is-scrub .spile__label.is-on {
  opacity: 1;
  transform: none;
  transition: opacity var(--spile-label-in), transform var(--spile-label-in);
}

/* phones (and touch, and reduced motion, set by part.js as .is-static): no pin, the class renders sorted, two up,
   the open seat closes the class as a full-width band */
@media (max-width: 767px) {
  .spile { height: auto; }
  .spile__sticky { position: static; height: auto; padding-bottom: 24px; }
  .spile__grid { grid-template-columns: repeat(2, auto); padding: 24px 0; }
  .spile__seat--open { order: 99; grid-column: 1 / -1; }
  .spile__seat--open .spile__art { width: 100%; aspect-ratio: auto; height: 96px; }
}
.spile.is-static .spile__fly { transform: none !important; }