/* ==========================================================================
   MARATHEFTIKO — the toad hops.   This page only.

   This one is unlike the other four, and it is worth being clear about why.

   Everywhere else on these labels nothing is ever redrawn: only marks the
   illustrator drew as separate things move — Red's three notes, Viognier's
   tongue, Xynisteri's rings — and at rest the page is provably the
   photograph, measured at 0/255.  Here the animal itself moves, and it moves
   because a video model was given a square of this very photograph and asked
   to make the toad jump.  Every frame in between is that model's redrawing of
   the engraving, not the engraving.  That is a different kind of thing, and
   it is on the page because the client asked for it after seeing it.

   What makes it sit on the bottle at all is that the square handed to the
   model was cut from this exact plate — x 296-520, y 1466-1690 of the
   560 x 1900 file, verified back against it at 2.4/255 — and that the model
   held the frame still: the label's background drifts 1.2/255 across the
   whole clip.  So the clip drops back into its own hole in the photograph
   without a seam.

   The whole movement plays: gather, rear up, leave the log, the arc, the
   descent, the landing, the settle.  The first thirteen frames are dropped
   because nothing moves in them.

   Two things had to be decided rather than solved.  For four frames at the
   top of the arc the model carries the animal past the top edge of the
   square, where there is nothing above it to draw, and up to a fifth of its
   back comes off against an edge that isn't there.  Fading that edge was
   tried and is worse — the animal dissolves instead of leaping — and at the
   size this plays, about eighty pixels across, the cut does not read.  So it
   stays.

   And the clip does not end where it began: the toad settles into a more
   upright pose than the printed one, and no amount of trimming changes that.
   So the layer does not cut away at the end, it dissolves over half a second
   while the drawing is still — a slow cross-fade from the model's toad back
   to the printed one, which reads as the animal settling rather than as a
   picture being swapped.  It is the one moment on the whole site where what
   you see is a dissolve between two drawings, and it is the price of playing
   the jump at all.

   Trimming the clip earlier does not help either: from the landing on, every
   frame sits about 5/255 from the printed drawing over its ink — frame 53
   marginally the closest, the last frame barely worse — so the difference is
   the model's pose, not a matter of where you stop.

   The clip ships as VP9 and as H.264, about 125KB and 135KB, because the
   frame it opens on is the photograph and the encoder's error on that frame
   is what you would see as it fades in: 14/255 for the VP9, 31 for the
   H.264.

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

/* `.product--bottle` letterboxes its plates (`object-fit: contain`, set in
   product.css:386), 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 positioned in per cent of the original file's own coordinates. */
.hop-mar__stage {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  aspect-ratio: 560 / 1900;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The square the model was given, back in its own place: 224 x 224px of the
   file at x 296, y 1466.  `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. */
.hop-mar__clip {
  position: absolute;
  left: 52.85714%;
  top: 77.15789%;
  width: 40%;
  height: 11.78947%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: opacity;
}

/* In, fast: the clip opens on the frame the model was given, which is the
   photograph to within a few parts in 255, so 120ms — the same as the other
   four — is enough to cover the encode's error without anything being seen to
   arrive.

   Out, slow: the clip closes on a different pose, so this is a real
   cross-fade between two drawings and it needs the time.  Half a second, over
   a still frame.  Between hops the layer is off entirely and the label is the
   photograph itself, measured at 0/255. */
.hop-mar.is-hopping  .hop-mar__clip { opacity: 1; }
/* Eased hard at both ends rather than linear: a cross-fade between two
   drawings shows both at once around the halfway mark, so the curve lingers
   where one of them dominates and crosses the middle quickly. */
.hop-mar.is-settling .hop-mar__clip {
  transition: opacity 560ms cubic-bezier(0.75, 0, 0.25, 1);
}

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