/* ==========================================================================
   GRIS — the frog shifts its weight.   This page only.

   Gris carries the same engraving as Palloures — the same animal in the same
   pose, printed white on deep blue here and dark on turquoise there.  It gets
   the one gesture that suits an animal sitting still: it does not go
   anywhere, it just moves its feet.

   Like Maratheftiko and Giannoudi and unlike the four gestures built out of
   the photograph, this is a clip.  A video model was given a square cut from
   this exact plate and asked for the legs alone; every frame in between is
   that model's redrawing of the line work, not the line work.  The note at
   the top of css/maratheftiko-hop.css sets out what that costs.

   What it bought here is unusually clean, and the numbers are worth keeping.
   The square is x 94-234, y 1412-1552 of the 543 x 1900 file — the whole
   animal with a dozen pixels of blank label on every side, the word "Gris"
   five pixels outside the right edge and the disembodied foot at the top of
   the label a hundred and thirty above it.  All four bands of that square are
   empty paper, so the model had nothing but the frog to work with.

   It was given the same frame as both the first and the last image, and it
   obeyed: the clip opens and closes on the printed drawing.  First frame
   against last is 0.4 of 255 mean and 19 at its worst, so it needs no
   ping-pong the way Giannoudi does and no dissolve the way Maratheftiko does
   — it simply comes round.  And nothing is clipped: the brightest pixel on
   any border of any of the seventy-three frames is 139, against the printed
   square's own 144.  The prompt was explicit about never touching an edge,
   the lesson from Maratheftiko.

   Measured on an eight-by-eight grid of the square, the movement sits almost
   entirely in the lower left — the long splayed toes and the front foot —
   and the head, the eye and the back are within two or three levels of still
   throughout.  That is the whole gesture: a resting animal adjusting its
   grip, at fifty css pixels across.

   Everything is scoped to `.stir-gris`, a class js/gris-stir.js puts on the
   hero plate.  To remove the whole thing: delete the two tags in
   wines/gris/index.html.
   ========================================================================== */

/* `.product--bottle` letterboxes its plates (`object-fit: contain`), so the
   shot is fitted to the box's HEIGHT and centred horizontally.  The stage
   reproduces exactly that, which is what lets the clip be placed in per cent
   of the file's own coordinates. */
.stir-gris__stage {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  aspect-ratio: 543 / 1900;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The square the model was given, back in its own place: 140 x 140px of the
   file at x 94, y 1412.  `fill` rather than `cover` because the box and the
   clip are both square in the file's coordinates — there is nothing to crop,
   and cropping would move the label under it. */
.stir-gris__clip {
  position: absolute;
  left: 17.31123%;
  top: 74.31579%;
  width: 25.78269%;
  height: 7.36842%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: opacity;
}

/* Both ends of the clip are the printed drawing to within 21/255 before the
   encoder touches it — close, but a hard cut on fine white line work shows as
   a tick, so it fades over the same 120ms the rest of the range uses, while
   almost nothing is moving.  Between turns the layer is off entirely and the
   label is the photograph itself, measured at 0/255. */
.stir-gris.is-stirring .stir-gris__clip { opacity: 1; }

/* Reduced motion: no class is ever added and no video element is ever built,
   so nothing is fetched and the frog sits as it is printed. */