/* ==========================================================================
   EROS — the kiss.   This page only.

   Eros is the only label in the range with two animals on it: a pair of
   crowned frogs in profile, facing each other across the paper with fifteen
   pixels of clear label between their snouts.  Two crowned frogs facing each
   other at that distance are about to do one thing, and the label is called
   Eros, so they do it: they lean in until their lips meet, hold, come apart,
   and a heart appears in the space over their heads.

   This is the one label where the animals themselves move, and that is a
   reversal of the rule the rest of the range is built on — move a printed
   animal and it usually reads as a sticker being slid about.  It survives
   here for three reasons.  The distance is seven pixels each, a tenth of a
   frog; the paper they cross is empty; and what the eye actually watches is
   not either animal but the gap between them closing to nothing.  A gap
   closing is legible at a size where a moving body is not.

   How it is done.  Each frog is a second copy of the plate at exactly the
   size and position of the one beneath it, masked down to its own half of
   the label — never a cut-out bitmap, which would be resampled on its own
   and land a fraction of a pixel off the drawing underneath.  The mask does
   not move; the copy slides under it.  That matters: both masks share one
   hard edge down the midline at x 273, so neither frog can ever paint over
   the other, and the two snouts arrive at that line from opposite sides and
   meet on it.  Everywhere else the masks fade out over eight pixels of blank
   paper, so there is no edge to see.

   The measurements are the drawing's own.  The left frog's ink runs x 164-266
   and the right's x 280-376, both between y 1479 and 1571 of the 546 x 1900
   file.  Their closest approach is fifteen pixels, at rows 1508-1513 — the
   two snouts.  Seven pixels each closes it exactly: at the fully leaned-in
   frame rows 1509 to 1512 have no clear paper left between them at all, and
   not one pixel of overlap.  Each mask is also opaque seven pixels further
   out than its frog's outermost ink, into paper the label leaves blank, so
   what a sliding copy uncovers behind itself is blank paper rather than the
   ink it has just left.  Nothing is erased, patched or reconstructed
   anywhere on this label.

   The heart is the one mark here that is not in the photograph, and it does
   not pretend otherwise: a drawn, scribbled heart supplied for this label,
   laid in the clear slot between the word "Eros" and the two crowns — x
   254-294, y 1464-1498, set inside the largest rectangle in that space that
   is empty on every row so that it keeps clear paper under the word rather
   than hanging off it.  It arrives after the lips part rather than during the kiss, which
   is both better to look at and the only way it fits: while they are leaning
   in, that slot is fourteen pixels narrower.

   One thing about the supplied file was changed, and only one: its ink was
   pure black, which against an engraving reads as a hole rather than a mark.
   Every channel was lifted off a floor of 68 — v becomes 68 + v * 187/255 —
   which leaves the scribble's own tonal variation intact and puts the heart's
   darkest passages at 60 and 67 of 255 where it renders, against the two
   frogs' 55 and 69.  It is now exactly as dark as the engraving gets and no
   darker.

   And it is not placed, it is drawn — the way someone with a pencil would.
   Its silhouette was traced off the supplied file itself (the alpha channel,
   holes filled, contour resampled to two hundred points and smoothed) and
   turned into one closed path that begins at the notch between the two lobes
   and runs anticlockwise, which is the way a right hand draws a heart.  That
   path, stroked fat and eaten forward by its own dash, is half of a mask over
   the drawing: the outline appears first, in 420ms.  The other half is a
   straight edge tilted 22 degrees to lie along the hatching and swept down
   across the shape, which fills the inside in the order the scribble was
   scribbled — one diagonal stroke at a time rather than a shape fading up.
   The two overlap, so it reads as one hand: round, then in.  Nine hundred
   milliseconds altogether.

   At rest the stage is at opacity 0 and both copies sit exactly on top of
   what they are copies of, so this page is the photograph and measurably
   nothing else.

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

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

/* The two masks.  Each is a soft-edged block eight pixels larger than its
   frog on the outside and cut dead straight down the midline on the inside —
   x 146-273 for him, 273-394 for her, y 1469-1581 for both.  They are RGBA
   files whose alpha is the mask; saving a mask as greyscale WebP quietly
   drops the alpha channel and paints a solid rectangle instead. */
.call-eros__him,
.call-eros__her {
  position: absolute;
  inset: 0;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

.call-eros__him {
  -webkit-mask: url('../assets/images/wines/eros/kiss-him-mask.webp') 34.8449% 82.1588% / 23.26007% 5.89474% no-repeat;
          mask: url('../assets/images/wines/eros/kiss-him-mask.webp') 34.8449% 82.1588% / 23.26007% 5.89474% no-repeat;
}

.call-eros__her {
  -webkit-mask: url('../assets/images/wines/eros/kiss-her-mask.webp') 64.2353% 82.1588% / 22.16117% 5.89474% no-repeat;
          mask: url('../assets/images/wines/eros/kiss-her-mask.webp') 64.2353% 82.1588% / 22.16117% 5.89474% no-repeat;
}

/* The copy itself: the plate again, at exactly the stage's size and position,
   so at rest every pixel of it lands on the pixel it was copied from.  Seven
   pixels of the file is 1.28205% of its width, and a percentage translate is
   taken from the element's own width — which is the stage — so the travel
   stays exactly seven file pixels at every screen size. */
.call-eros__himSkin,
.call-eros__herSkin {
  position: absolute;
  inset: 0;
  background: url('../assets/images/wines/eros/plate.webp') center / 100% 100% no-repeat;
  will-change: transform;
}

/* 40 x 34 px of the file at x 254, y 1464.  The clear slot between the word
   and the crowns runs x 249-301, y 1459-1497 and the heart used to fill it —
   which put its top two pixels under the "s" of Eros and read as stuck to it.
   Smaller and set four pixels lower, it now opens seven pixels of paper below
   the word, and still clears both crowns: at y 1498, the lowest row it
   reaches, the channel between them is x 251-303.  The drawing is 276 x 234
   against a 40 x 34 box, the same proportion to within a sixth of a per cent,
   so nothing is stretched.

   An SVG rather than an `<img>`: everything on this stage lives inside
   `.product__plate`, and product.css:44 sizes any image in there to the whole
   plate with `object-fit: cover` — one class and one element against this
   one's single class, so it would win. */
.call-eros__heart {
  position: absolute;
  left: 46.52015%;
  top: 77.05263%;
  width: 7.32601%;
  height: 1.78947%;
  overflow: visible;
}

/* The two halves of the mask.  `--len` is written by js/eros-call.js from the
   path's own measured length, so redrawing the outline can never leave the
   dash out of step with it and stop the stroke short. */
.call-eros__line {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

.call-eros__fill {
  transform: translateY(0);
}

/* ==========================================================================
   The kiss
   ==========================================================================
   7.5s: a second of the label as printed, 700ms leaning in, half a second
   together, 800ms coming apart, the heart drawn from 2.7s to 3.6s and gone by
   6.3s, then 1.2s quiet.  Longer than the three seconds the rest of the range runs at,
   because this one is a sentence rather than a gesture and hurrying it makes
   the two animals look startled.

   She starts leaning 80ms after he does and arrives at the same instant, and
   she is 60ms slower to leave.  Nothing about that is visible frame by frame;
   it is what stops the pair reading as one mechanism with two ends. */
@media (prefers-reduced-motion: no-preference) {
  .call-eros .call-eros__stage    { animation: eros-veil  7.5s linear infinite both; }
  .call-eros .call-eros__himSkin  { animation: eros-him   7.5s linear infinite both; }
  .call-eros .call-eros__herSkin  { animation: eros-her   7.5s linear infinite both; }
  .call-eros .call-eros__heart    { animation: eros-heart 7.5s linear infinite both; }
  .call-eros .call-eros__line     { animation: eros-line  7.5s linear infinite both; }
  .call-eros .call-eros__fill     { animation: eros-fill  7.5s linear infinite both; }

  /* Off screen or tab in the background: hold, do not restart. */
  .call-eros.is-held .call-eros__stage,
  .call-eros.is-held .call-eros__himSkin,
  .call-eros.is-held .call-eros__herSkin,
  .call-eros.is-held .call-eros__heart,
  .call-eros.is-held .call-eros__line,
  .call-eros.is-held .call-eros__fill { animation-play-state: paused; }
}

/* 1000 -> 1700 in, held to 2200, out by 3000. */
@keyframes eros-him {
  0%, 13.3333%  { transform: translateX(0);        animation-timing-function: cubic-bezier(0.45, 0.00, 0.35, 1.00); }
  22.6667%      { transform: translateX(1.28205%); }
  29.3333%      { transform: translateX(1.28205%); animation-timing-function: cubic-bezier(0.35, 0.00, 0.40, 1.00); }
  40.0000%      { transform: translateX(0); }
  100%          { transform: translateX(0); }
}

/* 1080 -> 1700 in, held to 2260, out by 3060. */
@keyframes eros-her {
  0%, 14.4000%  { transform: translateX(0);         animation-timing-function: cubic-bezier(0.45, 0.00, 0.35, 1.00); }
  22.6667%      { transform: translateX(-1.28205%); }
  30.1333%      { transform: translateX(-1.28205%); animation-timing-function: cubic-bezier(0.35, 0.00, 0.40, 1.00); }
  40.8000%      { transform: translateX(0); }
  100%          { transform: translateX(0); }
}

/* The outline, 2700 -> 3120.  A shade slower at the end than at the start:
   hands slow down coming back round to where they began. */
@keyframes eros-line {
  0%, 36.0000%   { stroke-dashoffset: var(--len, 1000); animation-timing-function: cubic-bezier(0.30, 0.00, 0.45, 1.00); }
  41.6000%, 100% { stroke-dashoffset: 0; }
}

/* The hatching, 2960 -> 3600, overlapping the outline by 160ms so the two
   read as one hand rather than two passes. */
@keyframes eros-fill {
  0%, 39.4667%   { transform: translateY(0);     animation-timing-function: cubic-bezier(0.25, 0.00, 0.55, 1.00); }
  48.0000%, 100% { transform: translateY(340px); }
}

/* The drawing is what makes it arrive, so there is no fade in — only out,
   from 5600 to 6300.  Before 2700 the mask is empty and nothing is painted
   whatever this says. */
@keyframes eros-heart {
  0%, 74.6667%  { opacity: 1; }
  84.0000%      { opacity: 0; }
  100%          { opacity: 0; }
}

/* The layer is only on the page while something is moving.  Both copies sit
   exactly on their originals at rest and the heart's mask is empty either
   way, so this changes nothing anyone can see — it is here so that "at rest
   this is the photograph" is true of the compositor as well as of the
   drawing. */
@keyframes eros-veil {
  0%,       13.3200% { opacity: 0; }
  13.3300%, 84.0500% { opacity: 1; }
  84.1000%, 100%     { opacity: 0; }
}

/* Reduced motion: no class is ever added and no stage is ever built, so
   nothing is fetched — not the masks, not the heart — and the two of them
   stay as they are printed, looking at each other. */