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

   A carousel, a background, nothing else: this framing is what serves as the
   poster.
   ========================================================================== */

/* 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;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* The scale is driven by the width, with no ceiling: the layout is then the
   same at every frame size, so a 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.

   60 is the number of "body sizes" that fit in the usable width. The pitch of a
   card is 14.3 em, so 60 / 14.3 ≈ 4.2 visible cards — enough for the pivot to
   read on both edges, not enough for the cards to become postage stamps.

   A min() or a clamp() here would break that property: the scale would stop
   being proportional and the centring would drift with the size. */
.depth-carousel {
  --dc-font-size: calc((100vw - 8vmin) / 60);
  --dc-scene-height: 100vh;
  /* The measured background is a very light grey; in an isolated thumbnail it
     turns off-white and the component floats. A barely denser grey gives the
     frame a footing without changing the drawing of the cards. */
  --dc-scene-bg: #eceded;

  /* The edge veil takes 20 % of the scene, which is right at full width but
     eats a third of a thumbnail. Reduced here so that the centre card stays
     crisp. */
  --dc-veil-size: 14%;
}

/* The page is never read: nobody can reach this rail with the keyboard from
   inside a decorative frame. */
.depth-carousel__rail:focus-visible {
  outline: none;
}