/* ==========================================================================
   XYNISTERI — the water moves.   This page only.

   The Xynisteri engraving already contains its own animation: the frog sits
   half sunk with concentric rings drawn around it, which is a picture of a
   surface that has just been disturbed.  So nothing is invented — the rings
   are simply allowed to carry on outwards.

   The frog itself does not move, and that is the point.  Everything on these
   eight labels is one drawing; move the animal's body and it reads as a
   sticker being slid about, whatever technique is used to slide it.  Move a
   mark the illustrator drew as a separate thing — these rings, Red's three
   notes, Viognier's tongue — and it reads as the drawing coming alive.

   Nothing is erased and nothing is redrawn.  The printed rings stay exactly
   where they are; what moves is a second copy of the whole photograph, masked
   down to the ripples and grown outwards from the point the frog sits on
   while it fades.  Because the layer starts and ends at zero opacity, the
   label at rest is not a reconstruction of the photograph — it is the
   photograph, untouched.

   Everything is scoped to `.ripple-xyn`, a class js/xynisteri-ripple.js puts
   on the hero plate.  To remove the whole thing: delete the two tags in
   wines/xynisteri/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
   layer be positioned in per cent of the original file's own coordinates. */
.ripple-xyn__stage {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  aspect-ratio: 561 / 1900;
  transform: translateX(-50%);
  pointer-events: none;
}

/* A second copy of the plate at exactly the size and position of the one
   beneath it, masked down to the ripples — never a cut-out bitmap, which
   would be resampled on its own and land a fraction of a pixel off the edge
   underneath.  Only the mask is small, and a soft mask has no edge to
   misplace.

   Grown about 69.162% / 83.579% of the file: the point on the water the frog
   is sitting in, which is where the disturbance came from and therefore the
   only centre the rings can honestly spread from. */
.ripple-xyn__ring {
  position: absolute;
  inset: 0;
  background: url('../assets/images/wines/xynisteri/plate.webp') center / 100% 100% no-repeat;
  -webkit-mask: url('../assets/images/wines/xynisteri/ripple-mask.webp') 75.7212% 84.5905% / 25.8467% 2.3158% no-repeat;
          mask: url('../assets/images/wines/xynisteri/ripple-mask.webp') 75.7212% 84.5905% / 25.8467% 2.3158% no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  transform-origin: 69.162% 83.579%;
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================================================
   The ripple
   ==========================================================================
   Two rings, one behind the other, then the pond is still again.  Each ring
   spreads for 1.44s of a 3s cycle and the second follows just over half a
   second behind, so they overlap the way real ones do; the last second is
   quiet, because water that never settles is a screensaver.

   The cycle used to be 9.2s and the spread with it.  A ring crossing that
   distance in 1.44s is nearer the truth anyway — the slow version was a
   thing water does not do.

   A ring never appears — it grows out of the printed rings at zero opacity
   and is gone before it reaches the edge of what was drawn, so there is no
   frame in which something arrives or leaves. */
@media (prefers-reduced-motion: no-preference) {
  .ripple-xyn .ripple-xyn__ring {
    animation: xyn-ripple var(--ripple-loop, 3s) linear infinite both;
  }
  .ripple-xyn .ripple-xyn__ring--2 { animation-delay: 0.55s; }

  /* Off screen or tab in the background: hold, do not restart. */
  .ripple-xyn.is-held .ripple-xyn__ring { animation-play-state: paused; }
}

@keyframes xyn-ripple {
  0%          { transform: scale(1);    opacity: 0; }
  8%          { opacity: 0.5; }
  32%         { opacity: 0.34; }
  48%         { transform: scale(1.55); opacity: 0; }
  /* held out and invisible until the cycle comes round, so the reset back to
     the printed size happens on a frame nobody can see */
  100%        { transform: scale(1.55); opacity: 0; }
}

/* Reduced motion: no class is ever added, so the pond is simply as printed. */