/* ============================================================
   BEAT 03c · THE BALL LOCK
   ------------------------------------------------------------
   Twenty-five photographs, one ball. Every frame is scaled so
   the ball measures the same on screen and translated so its
   centre sits on the centre of the window — the ball is the
   fixed point and the match moves around it.

   TWO LAYERS PER FRAME, ONE LOCK.
     · the photograph, clipped to a TALL rectangle
     · the subject, cut out of that same photograph at the same
       pixel dimensions, NOT clipped
   So the window holds the grass and the boots, and the body
   carries on past its top edge. The cutouts come from
   explorations/getty-ball-lock/tools/cutout.py; because they
   are the same size as the file they came from, one transform
   places both and they cannot drift apart.

   THE RECTANGLE is tall — 2.4 x 6.2 ball-diameters — and the
   ball sits 90% of the way down it rather than at its centre.
   That is what the pictures can give: a centred ball asks for
   grass below it that is not in the file and leaves 29 usable
   frames, a low ball asks for body above it and leaves 562.

   THE PICTURE IS NEVER SCALED BY THE TRANSITION. What moves is
   a CIRCLE opening out of the ball, over the whole frame rather
   than the window, so the body that has broken out of the
   rectangle is uncovered with it.

   js/ball-lock.js owns the clock; this file owns the room.
   ============================================================ */

.k-lock {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--kdb-space-loose) var(--kdb-page-margin);
  background: var(--kdb-surface-ground);
  /* THE ONLY EDGE THE BODY MEETS. The cut-out subject runs well
     past the window - that is the beat - and across the deck it
     reaches about ten ball diameters wide, where the window is
     2.4. Clipping that at the stage put a hard vertical line
     through the man. The clip moves out here instead: the body
     is free inside the section and stops at the page, which
     also keeps it from ever giving the document a sideways
     scrollbar. */
  overflow: hidden;
}

/* The stage is taller and wider than the rectangle, because it
   has to hold a man standing out of it. The ball sits low in it
   for the same reason — the body goes up. */
.k-lock__stage {
  position: relative;
  /* WIDE ENOUGH FOR THE MAN, not just for the window. The stage
     was sized to the rectangle plus a shoulder and clipped
     everything past it, so the cut-out subject - the whole point
     of the beat, the body that breaks the frame - was sliced off
     down a hard vertical line at the stage's own edge. The
     widest cut-out runs about 6.6 ball diameters across and the
     window is 2.4, so the room has to be nearly three times the
     picture. The ball's size is set by the stage's HEIGHT here,
     so widening the room changes nothing about the lock: the
     window stays the size it was and the body simply fits. */
  width: min(46vw, 34rem);
  height: min(62vh, 34rem);
  /* Not here - see .k-lock. The stage sets where the ball is and
     how big it is; it does not decide how much man there may
     be. */
  overflow: visible;
}

/* The mask is written in px by js/ball-lock.js, because it grows
   about the ball rather than about the middle of this box and
   the ball is nowhere near the middle. */
.k-lock__frame {
  position: absolute;
  inset: 0;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
}

/* The window. Placed in px by js/ball-lock.js so its centre is
   the ball's anchor; the photograph inside it is clipped by it. */
.k-lock__rect {
  position: absolute;
  overflow: hidden;
}

/* Both layers carry the same transform. transform-origin 0 0 so
   the lock's translate and scale compose without fighting. */
.k-lock__frame img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* The cut-out subject rides above the window and is not clipped
   by it — this is the part that breaks the frame. */
.k-lock__cut {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.k-lock__mark {
  position: absolute;
  border: 1px solid var(--kdb-text-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.k-lock__edge {
  position: absolute;
  outline: 1px solid var(--kdb-text-primary);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.k-lock.is-marked .k-lock__mark,
.k-lock.is-marked .k-lock__edge { opacity: .38; }

.k-lock__cap {
  position: absolute;
  left: 0;
  bottom: calc(var(--kdb-space-snug) * -1);
  transform: translateY(100%);
  margin: 0;
  font-size: var(--kdb-size-micro);
  font-weight: var(--kdb-wght-medium);
  letter-spacing: var(--kdb-track-caps-wide);
  text-transform: uppercase;
  color: var(--kdb-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  /* A burst is a strobe to anyone who asked for less motion.
     One photograph, held. */
  .k-lock__frame { display: none; }
  .k-lock__frame:first-child { display: block; clip-path: none; }
}

@media (max-width: 900px) {
  .k-lock__stage { width: min(62vw, 18rem); height: min(60vh, 30rem); }
}