/* ==========================================================================
   PALLOURES — the eye closes.   This page only.

   The seven other labels all move outward: Red's notes rise off the paper,
   Viognier's tongue strikes, Xynisteri's rings spread, Eros draws a heart,
   Maratheftiko's toad leaps, Giannoudi's frog reaches and draws itself back.
   This one does not move at all.  It blinks, and that is the whole gesture —
   a range of eight animals that all do something needs one that is simply
   sitting there being alive.

   The measurements.  Palloures' plate is a 560 x 1900 file that renders at
   201 css px wide on a 1440 desktop, so one file pixel is 0.358 css px and
   the frog is 61 x 48 css px in total.  The eye inside it is seventeen file
   pixels across — between 5.5 and 8.1 css px at every width the site is built
   for.  Nothing on this label is ever big.

   What that leaves is not a shape but a value.  As printed the eye is a
   bright ring around a dark iris with a lit slit in the middle of it, set in
   a brow that is much darker; at seven pixels the shape is illegible but the
   bright ring is not, because a small light thing going out is one of the few
   signals an eye reads instantly at any size.  So the blink is built as the
   extinguishing of that ring rather than as an eyelid one could examine.

   The lid is drawn, not copied.  There is no closed eye anywhere in this
   photograph to borrow, and — the rule set out at the top of css/eros-call.css
   — where the illustrator drew no such mark, a new one has to be made
   honestly rather than faked out of the animal.  Copying skin from elsewhere
   on the frog was tried first and thrown away: every part of this animal is
   drawn in lines, so every patch big enough to cover the eye brings a line
   with it, and a borrowed line lying across a shut eye reads as a scratch.

   So it is two flat tones, and they were chosen by measurement rather than by
   eye.  Downscaled to the size it actually renders at, the eye is six pixels
   by five; the band of head immediately above it comes out at 83.7 of 255 and
   the band immediately below at 107.6, and the printed eye itself averages
   93.7 between them.  #405658 to #547372, top to bottom, puts the shut eye at
   95.0 — the same weight as the open one, sitting between its own neighbours
   the way the socket does.  Nothing brightens, nothing darkens; the ring and
   the lit slit inside it simply stop being there.

   It slides rather than grows.  A block the size of the eye sits directly
   above it, clipped away by an ellipse cut to the bright ring, and
   translates down into view — which is what an eyelid does, and which keeps
   the lid's leading edge a real edge at a real width instead of a gradient
   being squashed by a scale.

   Timing is the whole difference between an animal and a rendering fault.
   140ms down, 60ms held shut, 180ms back up.  Faster than that at seven
   pixels and it reads as the screen glitching; this reads as a decision.  The
   loop is 9s rather than 3s so it can hold three blinks — one at 2.2s, one at
   5.2s, and at 8.0s a double, the second following 120ms behind the first.
   Nothing else on the page keeps a rhythm that even, and a double blink is
   the thing no glitch does.

   At rest the stage is at opacity 0 and the lid is outside its own clip, so
   this page is the photograph and measurably nothing else.

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

/* `.product--bottle` letterboxes its plates (`object-fit: contain`), so the
   shot is fitted to the box's HEIGHT and centred horizontally — at every
   width the site is built for this plate's box is wider than 560/1900, so it
   is always the height that limits.  The stage reproduces exactly that, which
   is what lets the eye be placed in per cent of the file's own coordinates. */
.blink-pal__stage {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  aspect-ratio: 560 / 1900;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}

/* The bright ring, x 168-185 and y 1450-1465 of the file, and not a pixel
   more: the dark outer ring around it is left alone, so the socket stays drawn
   on the head and only what is inside it closes.  Cut with `clip-path` rather
   than `overflow` so the rim is antialiased against the engraving underneath
   instead of stepping. */
.blink-pal__eye {
  position: absolute;
  left: 30.00000%;
  top: 76.31579%;
  width: 3.03571%;
  height: 0.78947%;
  clip-path: ellipse(50% 50% at 50% 50%);
}

/* Parked one full height above the eye, therefore entirely outside the clip:
   nothing of it is painted until it moves. */
.blink-pal__lid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(to bottom, #405658 0%, #547372 100%);
  transform: translateY(-100%);
  will-change: transform;
}

/* ==========================================================================
   The blink
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .blink-pal .blink-pal__stage { animation: pal-veil 9s linear infinite both; }
  .blink-pal .blink-pal__lid   { animation: pal-blink 9s linear infinite both; }

  /* Off screen or tab in the background: hold, do not restart. */
  .blink-pal.is-held .blink-pal__stage,
  .blink-pal.is-held .blink-pal__lid { animation-play-state: paused; }
}

/* Down fast and up slower, the way a lid actually goes.  The percentages are
   9s: 2200/2340/2400/2580, then 5200/5340/5400/5580, then 8000/8140/8200/8380
   and 8500/8640/8700/8880 for the double. */
@keyframes pal-blink {
  0%        { transform: translateY(-100%); }
  24.4444%  { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.40, 0.00, 0.85, 0.90); }
  26.0000%  { transform: translateY(0); }
  26.6667%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.20, 0.10, 0.45, 1.00); }
  28.6667%  { transform: translateY(-100%); }

  57.7778%  { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.40, 0.00, 0.85, 0.90); }
  59.3333%  { transform: translateY(0); }
  60.0000%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.20, 0.10, 0.45, 1.00); }
  62.0000%  { transform: translateY(-100%); }

  88.8889%  { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.40, 0.00, 0.85, 0.90); }
  90.4444%  { transform: translateY(0); }
  91.1111%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.20, 0.10, 0.45, 1.00); }
  93.1111%  { transform: translateY(-100%); }
  94.4444%  { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.40, 0.00, 0.85, 0.90); }
  96.0000%  { transform: translateY(0); }
  96.6667%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.20, 0.10, 0.45, 1.00); }
  98.6667%  { transform: translateY(-100%); }
  100%      { transform: translateY(-100%); }
}

/* The layer is only on the page while the lid is inside its clip.  The lid is
   parked outside it 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 pal-veil {
  0%,       24.4000% { opacity: 0; }
  24.4100%, 28.6800% { opacity: 1; }
  28.6900%, 57.7300% { opacity: 0; }
  57.7400%, 62.0100% { opacity: 1; }
  62.0200%, 88.8400% { opacity: 0; }
  88.8500%, 98.6800% { opacity: 1; }
  98.6900%, 100%     { opacity: 0; }
}

/* Reduced motion: no class is ever added and no stage is ever built, so the
   frog simply sits there with its eye open, as printed. */