/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   Four framing traps, all dealt with here:

   1. box-sizing on html and body: without it the padding adds to the 100%
      height and the content drifts downwards.
   2. The notch in the corner is absolutely positioned and weighs nothing in
      the centring — but it is contained in the scene, which is in flow and
      takes the full height. Nothing to make up for here.
   3. The scale is keyed to the width, with no cap: the grid is 85 em wide
      (3 × 27 + 2 × 2) and the scene 50 em tall. With 100vw / 89 the scene comes
      to 50/89 = 0.5618 × 100vw, which is exactly the height of a 16:9 frame
      (0.5625). A single constant therefore frames everything, at any size —
      which a min() or a clamp() would break.
   4. The component has no entrance animation, and this page does not load its
      script: there is nothing to wait for before the capture.
   ========================================================================== */

@font-face {
  font-family: "Rotating drum";
  src: url("ServiceDrum-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Rotating drum Narrow";
  src: url("ServiceDrumNarrow-900-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background: #f2f2f2;
}

/* --------------------------------------------------------------------------
   One single scale. The rules below sit in an `@media all` so that they come
   AFTER the component's responsive breakpoints at equal specificity: without
   that, at 390 px wide the frame would switch to a single column even though it
   is still 16:9.
   -------------------------------------------------------------------------- */

@media all {
  .rotating-drum {
    padding: 0;
    background: transparent;
  }

  .rotating-drum {
    /* Two terms, no cap. The grid is 85 em wide and the scene 50 em tall: the
       first term frames to the width, the second to the height, and the smaller
       one wins. At 16:9 the two nearly coincide (89 × 9/16 = 50.06), so the
       frame on the sheet is filled in both width and height; at 2:1, the
       thumbnail's ratio, the height is in charge. This is not the min(1rem, …)
       we forbid ourselves: there is no fixed value here, the scale stays
       proportional at every size and a single constant frames each ratio. */
    --sd-font-size: min(calc(100vw / 89), calc(100vh / 50));
    --sd-stage-height: calc(50 * var(--sd-font-size));
    --sd-pad: 0px;
  }

  .rotating-drum__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .rotating-drum__stage {
    grid-area: 1 / 2 / 3 / 3;
    max-width: var(--sd-column);
  }

  .rotating-drum__card-title {
    font-size: calc(3 * var(--sd-font-size));
  }

  .rotating-drum__card:nth-of-type(1),
  .rotating-drum__card:nth-of-type(2),
  .rotating-drum__card:nth-of-type(3),
  .rotating-drum__card:nth-of-type(4) {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   The resting angle, and nothing more.

   The drum turns here because apercu.html loads rotating-drum.js with
   data-drive="time": it is the component itself that animates, not this
   stylesheet. That mode exists for contexts where nothing scrolls — a preview
   frame, a modal window, a fixed panel — where the progress of the scene is a
   constant and where "scroll" mode would leave the drum still.

   What remains here is the starting point: 90°, the component's resting angle,
   the one where a blade faces you exactly. The script starts from that value, so
   the first frame displayed is exactly the one on the poster, with no jump at
   start-up — and it is also the one you get under prefers-reduced-motion, where
   the script starts nothing at all. The bench photographs the thumbnail under
   that preference: the capture can be replayed.
   -------------------------------------------------------------------------- */

.rotating-drum__drum {
  --sd-angle: 90deg;
}