/* A live clock over the product page's hero shot.

   The hero is a still — the App Store dashboard screenshot inside an iPad Pro
   bezel — and its left half is Wallflower's wall clock, frozen at Monday the
   20th, 10:09. This lays a real one over that square: the reader's own time,
   moving, and today's date in the date window, in the language of the page.

   The clock is the one thing in that screenshot a browser can redraw exactly.
   It is a dozen numbers, on a ground of pure black, in the system font — no gradient, no material, no blur. Anything else
   in the shot would look redrawn, which is why nothing else is.

   It is a gimmick and is built as one: this file and wallflower-clock.js are
   the whole of it, opted into from the product page's front matter. Deleting
   the two files and those two lines removes it without a trace.

   There is almost nothing here because the clock is drawn rather than styled:
   it is a canvas, cleared and repainted whole every frame. wallflower-clock.js
   carries the geometry, the ink and the reason it has to be a canvas. What is
   left here is where the square goes.

   WHERE THE SQUARE IS. Measured off the source screenshot (2752×2064): the
   dial's centre is (704, 811.5) and its layout radius is exactly 590px. That
   is the radius of the square the clock lays out in, not of any ink — the
   outermost ink, an hour tick's tip, sits at 0.95 R. Mapped through the crop
   in Scripts/make-device-shots.sh, which puts the cut-out at 94,95 of the
   cropped 2936×2249 artwork, it becomes the percentages below: shares of the
   shipped image's box, exactly as `.device video` in index.css is, so the fit
   holds at any width.

   The square holds nothing but the clock — the weather and calendar lines
   start below it, "Living Room" well to the right — and the dial's ground is
   #000000 exactly. So an opaque black square hides the frozen clock outright
   and nothing has to be erased around the old hands.

   NO FILTER, anywhere in here. Safari rasterizes a filter into a rectangle
   once a composited video layer is in play, and the dashboard loop is further
   down this page; the comment on `#main .device` in index.css has the whole
   story. Nor is there a shadow under the hands: on a black ground one shows
   only in the sliver where a hand crosses a tick, which is not worth what it
   would cost. */

#main .device .wallflower-clock {
    position: absolute;
    left: 7.084%;
    top: 14.075%;
    width: 40.190%;
    height: 52.476%;
    /* Over the frame, which index.css puts on z-index 1. */
    z-index: 2;
    /* It is a picture of a clock, not a clock. */
    pointer-events: none;
}