/* ====== Relevant CSS ====== */
.scene, .a3d {
  display: grid;
}

.scene {
  /* prevent scrollbars */
  overflow: hidden;
  /* for 3D look; smaller = more extreme effect */
  perspective: 35em;
  mask: linear-gradient(90deg, #0000, red 20% 80%, #0000);
}

.a3d {
  place-self: center;
  /* don't flatten 3D transformed children 
   * of this parent having its own 3D transform */
  transform-style: preserve-3d;
  animation: ry 32s linear infinite;
}

/* simplest y axis rotation */
@keyframes ry {
  to {
    rotate: y 1turn;
  }
}
.card {
  /* base card width, you may change this */
  --w: 17.5em;
  /* compute base angle corresponding to a card */
  --ba: 1turn/var(--n);
  /* in the future: sibling-count() */
  grid-area: 1/1;
  width: var(--w);
  aspect-ratio: 7/10;
  object-fit: cover;
  border-radius: 1.5em;
  /* don't want to see back of cards in front of screen plane */
  backface-visibility: hidden;
  /* need to use a transform chain here, cannot use separate 
   * rotate & translate properties because they'd be applied 
   * in wrong order (translate, then rotate) for what we need */
  transform: rotatey(calc(var(--i)*var(--ba))) translatez(calc(-1*(.5*var(--w) + .5em)/tan(.5*var(--ba))));
}

/* ====== General page prettifying and layout ====== */
html, body {
  display: grid;
}

html {
  height: 100%;
}

body {
  background: #191D88;
}