/* Adam pull-gear · CSS-only, 16 frames × 6 fps = 2.667 second loop.
   Reuse .adam-pull-gear and the sixteen image children anywhere in the site.
   Background is transparent (chroma-keyed from #f8f7f4) so the page background
   shows through. Frame 16 is a duplicate of frame 1 for seamless looping.
   Reverse playback: frame 16 starts the cycle, frame 1 ends it. */
.adam-pull-gear {
  position: relative;
  display: block;
  width: min(38vw, 320px);
  aspect-ratio: 1;
  pointer-events: none;
}

.adam-pull-gear__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: adam-pull-gear-frame 2.66667s steps(16) infinite both;
  will-change: opacity;
}

/* A hard cut is intentional: it reads as a hand-flipped sketchbook,
   while the individual frames provide the organic wobble. */
@keyframes adam-pull-gear-frame {
  0%, 6.249% { opacity: 1; }
  6.25%, 100% { opacity: 0; }
}

/* Reverse playback — negative offsets place each frame on the same
   running timeline but in mirrored sequence (frame 16 first, frame 1 last). */
.adam-pull-gear__frame:nth-child(1)  { animation-delay: -2.5s; }
.adam-pull-gear__frame:nth-child(2)  { animation-delay: -2.33333s; }
.adam-pull-gear__frame:nth-child(3)  { animation-delay: -2.16667s; }
.adam-pull-gear__frame:nth-child(4)  { animation-delay: -2s; }
.adam-pull-gear__frame:nth-child(5)  { animation-delay: -1.83333s; }
.adam-pull-gear__frame:nth-child(6)  { animation-delay: -1.66667s; }
.adam-pull-gear__frame:nth-child(7)  { animation-delay: -1.5s; }
.adam-pull-gear__frame:nth-child(8)  { animation-delay: -1.33333s; }
.adam-pull-gear__frame:nth-child(9)  { animation-delay: -1.16667s; }
.adam-pull-gear__frame:nth-child(10) { animation-delay: -1s; }
.adam-pull-gear__frame:nth-child(11) { animation-delay: -0.83333s; }
.adam-pull-gear__frame:nth-child(12) { animation-delay: -0.66667s; }
.adam-pull-gear__frame:nth-child(13) { animation-delay: -0.5s; }
.adam-pull-gear__frame:nth-child(14) { animation-delay: -0.33333s; }
.adam-pull-gear__frame:nth-child(15) { animation-delay: -0.16667s; }
.adam-pull-gear__frame:nth-child(16) { animation-delay: 0s; }

/* Current lab-stage placement. The component itself has no layout opinion. */
.adam-pull-gear--lab {
  z-index: 1;
  width: min(52vw, 460px);
}

@media (prefers-reduced-motion: reduce) {
  .adam-pull-gear__frame { animation: none; opacity: 0; }
  .adam-pull-gear__frame:nth-child(1) { opacity: 1; }
}