/* blink-swap: one picture frame that swaps through its pictures with a small scale "blink" between each.
   Measured from Alture's studio header (IX2 a-72): frame holds 750ms, shrinks 1 -> .95 over 200ms (cubic in),
   the picture is swapped at the smallest point, the frame grows back .95 -> 1 over 200ms (cubic out).
   Timing lives in part.js (data-bswap-hold / data-bswap-blink); size and look are knobs here. */
.bswap {
  --bswap-scale: .95;            /* how far the frame dips at the swap (Alture .95) */
  --bswap-ratio: 1 / 1.2;        /* frame shape (Alture header 1 / 1.2) */
  --bswap-radius: 18px;          /* corner radius (Alture 2vh = 18px at 900 tall) */
  --bswap-bg: #d9d6cf;           /* shows only before the first picture paints */
  position: relative;
  display: block;
  aspect-ratio: var(--bswap-ratio);
  border-radius: var(--bswap-radius);
  overflow: clip;
  background: var(--bswap-bg);
  transform-origin: 50% 50%;
  will-change: transform;
}
/* every picture fills the frame; only the current one is shown (the source toggles display; visibility keeps
   the others decoded so the swap never waits on an image) */
.bswap > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  visibility: hidden;
}
.bswap > .is-on,
.bswap:not(.is-live) > :first-child { visibility: visible; }