/* Elements shared by the home page and the case study template. */

/* Monospaced eyebrow/label face. Size, tracking and colour are set by the
   element's own rule; this only carries the family. */
.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ---------------------------------------------------------------- cursor -- */

/* Custom dot cursor. Position is driven by a transform set from JS; the
   modifiers below carry the per-page treatment. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition:
    opacity .3s,
    width .35s cubic-bezier(.16, 1, .3, 1),
    height .35s cubic-bezier(.16, 1, .3, 1),
    margin .35s cubic-bezier(.16, 1, .3, 1);
}

/* Home page: hollow ring whose border colour is swapped from JS. It starts
   dark for the light hero and inverts across the dark work section. */
.cursor--outline {
  border: 1px solid #1F1F1F;
  background: transparent;
}

/* Case study: solid dot that inverts whatever sits under it. */
.cursor--blend {
  background: #E3E3E3;
  mix-blend-mode: difference;
}

/* Applied while hovering any link or button. */
.cursor.is-large {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
}