/* Mirror, after Matthias Hurrle's "It Is All Just a Reflection": the card's
     frame reflects the live sky, with a curved shine, a bright rim at the
     edges, and a highlight that slides as the mouse moves. */
  .mirror {
    position: absolute;
    top: -16px;
    left: -16px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    max-width: none;                /* must always cover the whole card, edges included */
    border-radius: 24px;
    z-index: -2;
    pointer-events: none;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18);
  }
  /* The highlight that slides with the mouse sits on its own layer over the
     mirror, so moving it is a GPU move and the mirror itself is not repainted.
     The script sets the circle's size and position. */
  .mirror-glint {
    position: absolute;
    top: -16px;
    left: -16px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    border-radius: 24px;
    overflow: hidden;
    z-index: -2;
    pointer-events: none;
  }
  .mirror-glint i {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .32), rgba(255, 255, 255, .1) 35%, rgba(255, 255, 255, 0));
    will-change: transform;
  }