/* ==========================================================================
   GIANNOUDI — the frog gathers itself.   This page only.

   Like Maratheftiko and unlike the other four, this is a clip rather than a
   gesture built out of the photograph.  A video model was given a square cut
   from this exact plate and asked to make the frog leap, and 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;
   it costs the same here.

   The square is x 45-195, y 602-752 of the 329 x 908 file — clean black
   label holding the frog and the word "Giannoudi", with the disembodied foot
   at the label's top edge deliberately outside it and nothing else cut in
   half.  Seated back against the plate it lands at 3.7/255, and the model
   held the frame still to 2.5/255 across the whole clip, so the square drops
   into its own hole without a seam.

   This time the model was told, in the prompt, never to let the animal touch
   the edge of the frame — the lesson from Maratheftiko, where four frames at
   the top of the arc came off against an edge that wasn't there.  It obeyed:
   the frog stays inside on every one of the seventy-three frames, and
   nothing is cut.  The brightest pixel on any border of any frame used here
   is 72 against the printed square's own 75.

   None of the leap is used, and neither is most of what leads up to it.  The
   model drew a good leap, but a frog launching itself off the label is a
   bigger event than a bottle page wants, and the twenty-seven frames of
   wind-up before it are not much quieter — by frame fourteen the animal is
   stretched flat with its front leg thrown right out, which at this size
   reads as doing the splits rather than as an animal shifting its weight.

   So what is kept is the first nine frames only — the front leg reaching
   forward and the toes spreading, the body never leaving its crouch — played
   out and then back down the way it came.  Nineteen frames, and at 24fps
   rather than 42 so that a very small movement is given time to be seen
   instead of flicking past.  0.79s.

   Because it ends on the frame it began on it ends on the photograph, exactly
   — 0/255 — which means no dissolve is needed, and it also means the word
   "Giannoudi", which the model drifts about three pixels to the left over the
   clip, is carried back to where it is printed.  Running the return backwards
   is the honest cost of a generated clip that does not land where it started;
   for a reach and a recoil it costs far less than it would for a leap, since
   a reach is symmetrical anyway.

   (The class is still `leap-gia` and the files are still giannoudi-leap.*.
   The names are older than the edit and renaming them would touch the page,
   both files and two assets to no effect the visitor can see.)

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

/* Giannoudi's plate is `object-fit: cover` (product.css:44) rather than the
   `contain` the other seven use — but its frame is 32.8109rem x 90.8rem,
   which is 0.36135 against the file's own 0.36233, so cover matches on height
   and crops four tenths of a pixel off each side.  Below the desktop
   breakpoint the frame is given `aspect-ratio: 329/908` outright and there is
   no crop at all.  Either way the fitted image is exactly a full-height box
   of the file's aspect, centred — the same stage as everywhere else, which is
   what lets the clip be placed in per cent of the file's own coordinates. */
.leap-gia__stage {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  aspect-ratio: 329 / 908;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The square the model was given, back in its own place: 150 x 150px of the
   file at x 45, y 602.  `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. */
.leap-gia__clip {
  position: absolute;
  left: 13.67781%;
  top: 66.29956%;
  width: 45.59271%;
  height: 16.51982%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: opacity;
}

/* Both ends of the clip are the same frame, and that frame is the photograph
   to within 17/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
   other five use, while nothing is moving.  Between leaps the layer is off
   entirely and the label is the photograph itself, measured at 0/255. */
.leap-gia.is-leaping .leap-gia__clip { opacity: 1; }

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