/* Frame cycle (js/frame-cycle.js): a stack of same-size frames that wipe
   from one to the next. Nothing slides or fades out: each new frame comes
   in on top of the last, in place, so whatever the frames share
   (Stryker's yellow backdrop and logo) never seems to change.

   The frame splits at --seam: the left side wipes down while the right
   wipes up.

   <a class="hcar_media frame-cycle" style="--seam: 50%">
     <img class="is-current" …> <img …> <img …>
   </a>

   The script turns each <img> into a .fc-frame of two halves, each with
   its own copy of the image. A wipe slides a half in while its image
   slides the other way just as far, so the picture holds still and only
   its edge moves. Moving things (rather than reshaping a clip-path) lets
   the browser run it off the main thread. */

.frame-cycle {
  position: relative;
  --seam: 50%;
}

/* Before the script has built the frames: just the first one */
.frame-cycle > img {
  position: absolute;
  inset: 0;
}
.frame-cycle > img:not(.is-current) {
  visibility: hidden;
}

.frame-cycle > .fc-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  visibility: hidden; /* waiting its turn */
}
.frame-cycle > .fc-frame.is-current {
  visibility: visible;
  z-index: 1;
}
.frame-cycle > .fc-frame.is-in {
  visibility: visible;
  z-index: 2;
  overflow: hidden; /* the halves start outside it */
}

/* Each half reaches 1px past the seam, so no hairline of the frame
   underneath shows between them mid-wipe (both show the same picture
   there, so the overlap can't be seen) */
.fc-half {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.fc-half.is-left {
  clip-path: inset(0 calc(100% - var(--seam) - 1px) 0 0);
}
.fc-half.is-right {
  clip-path: inset(0 0 0 calc(var(--seam) - 1px));
}
.frame-cycle .fc-half > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The wipe: slow start, quick middle, long settle */
.fc-frame.is-in .fc-half,
.fc-frame.is-in .fc-half > img {
  animation: 850ms cubic-bezier(0.83, 0, 0.17, 1) both;
}
.fc-frame.is-in .fc-half.is-left,
.fc-frame.is-in .fc-half.is-right > img {
  animation-name: fc-from-top;
}
.fc-frame.is-in .fc-half.is-right,
.fc-frame.is-in .fc-half.is-left > img {
  animation-name: fc-from-bottom;
}
@keyframes fc-from-top {
  from { translate: 0 -100%; }
}
@keyframes fc-from-bottom {
  from { translate: 0 100%; }
}

/* Reduced motion: the frames swap without the wipe */
@media (prefers-reduced-motion: reduce) {
  .fc-frame.is-in .fc-half,
  .fc-frame.is-in .fc-half > img {
    animation: none;
  }
}