/* ==========================================================================
   Preview — the page embedded in the 16/9 frame of the component's reference
   page.

   The fan, a background, nothing else: this framing is what serves as the
   poster, and it is what is captured for the thumbnail of the library.
   ========================================================================== */

/* Without this, the inner padding adds to the 100 % height and the content
   drifts towards the bottom of the frame. */
html,
body {
  box-sizing: border-box;
  block-size: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

/* The scale is driven by the width, with no ceiling: the layout is then the
   same at every frame size, so one single constant is enough for the framing
   to hold as well in the 700 × 350 thumbnail as in the full-screen frame of
   the reference page.

   124 is the number of "modules" that fit across the width of the frame. It is
   the height that decides, and it is measured, not deduced: at that scale the
   component sits 37 px below the top edge of a 350 px frame and stops 14 px
   before the bottom (see _mesures/6b-cadrage.mjs, which sweeps the constant
   and reads both margins back).

   The imbalance between the two margins is that of the component itself: it
   reserves 6.5 modules above the eyebrow and 2.5 below the dots. Correcting it
   here would amount to showing something other than what is delivered.

   A min() or a clamp() here would break that property: the scale would stop
   being proportional and the framing would drift with the size. */
.fan-carousel {
  --arc-font-size: calc(100vw / 124);

  /* The component fills the frame: it is the page. */
  block-size: 100%;
  min-block-size: 0;
}

/* The frame is decorative and reachable by nobody with the keyboard: a focus
   ring there has nothing to describe. */
.fan-carousel__radio:focus-visible + .fan-carousel__dot {
  outline: none;
}