/* Bare page, made to be embedded as an <iframe> in a 16/9 frame. The
   component in its telling state, a background, nothing else.

   Four traps, all dealt with here:

   1. box-sizing on html and body, otherwise the inner padding adds to the
      100 % height and the content drifts down;
   2. the cards are out of flow and weigh nothing in the centring: the globe is
      shrunk to leave room for them, rather than compensated with a margin;
   3. the scale follows the width, with no ceiling, so the layout is the same
      at every size and a single constant is enough;
   4. the wait before capturing is done on the computed opacity, not on a delay
      (see _mesures/affiche.mjs). */

html,
body {
  box-sizing: border-box;
  block-size: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #171717;
}

.globe-pins {
  block-size: 100%;
  min-block-size: 0;

  /* With no ceiling: the composition is identical from 320 to 1600 px wide. */
  --gp-corps: calc(100vw / 78);

  /* The globe leaves room for the two cards, which do not count in the
     centring since they are out of flow. */
  --gp-remplissage: 0.72;

  /* Fixed composition: Europe and Africa facing us, Paris at the top left,
     Cape Town at the bottom right. */
  --gp-depart: 34deg;
  --gp-inclinaison: 14deg;

  /* Nothing is frozen here: the preview is a living view, the globe drifts
     and can be grabbed. The thumbnail, however, is captured under
     prefers-reduced-motion, which stops the drift at exactly --gp-depart and
     makes the capture reproducible without touching the component. */
}