/* The cursor: the computer's own cursor, drawn in the colours of the site (assets/img/cursor/, 1x and
   2x, so it stays sharp and moves without any delay). An arrow (graphite with a cream edge), a hand
   (cream with a graphite edge) on what you can click, and where a click opens something (an element
   with data-cursor="open", or "close" for what is open: the homepage's cards) a big lilac hand.
   Rings go out from its fingertip, or come in on what is open (assets/cursor.js): a tap, without
   words. With a mouse only; the rings not with reduced motion. */

/* the arrow, everywhere */
html.cr-on {
  cursor: url(img/cursor/arrow.png) 7 3, auto;
  cursor: -webkit-image-set(url(img/cursor/arrow.png) 1x, url(img/cursor/arrow@2x.png) 2x) 7 3, auto;
  cursor: image-set(url(img/cursor/arrow.png) 1x, url(img/cursor/arrow@2x.png) 2x) 7 3, auto;
}

/* the hand, on what you can click */
html.cr-on :is(a[href], button:not(:disabled), [role=button], [role=switch], summary, label, select, input[type=checkbox], input[type=radio], input[type=submit], input[type=button]) {
  cursor: url(img/cursor/hand.png) 13 1, pointer !important;
  cursor: -webkit-image-set(url(img/cursor/hand.png) 1x, url(img/cursor/hand@2x.png) 2x) 13 1, pointer !important;
  cursor: image-set(url(img/cursor/hand.png) 1x, url(img/cursor/hand@2x.png) 2x) 13 1, pointer !important;
}

/* the big lilac hand, where a click opens something */
html.cr-on :is([data-cursor="open"], [data-cursor="close"]) {
  cursor: url(img/cursor/hand-big.png) 28 2, pointer !important;
  cursor: -webkit-image-set(url(img/cursor/hand-big.png) 1x, url(img/cursor/hand-big@2x.png) 2x) 28 2, pointer !important;
  cursor: image-set(url(img/cursor/hand-big.png) 1x, url(img/cursor/hand-big@2x.png) 2x) 28 2, pointer !important;
}

/* in there, what has its own click keeps the small hand, and the screen the arrow */
html.cr-on :is([data-cursor="open"], [data-cursor="close"]) :is(a[href], button:not(:disabled), [role=button], [role=switch], label) {
  cursor: url(img/cursor/hand.png) 13 1, pointer !important;
  cursor: -webkit-image-set(url(img/cursor/hand.png) 1x, url(img/cursor/hand@2x.png) 2x) 13 1, pointer !important;
  cursor: image-set(url(img/cursor/hand.png) 1x, url(img/cursor/hand@2x.png) 2x) 13 1, pointer !important;
}

html.cr-on [data-cursor="default"] {
  cursor: url(img/cursor/arrow.png) 7 3, auto !important;
  cursor: -webkit-image-set(url(img/cursor/arrow.png) 1x, url(img/cursor/arrow@2x.png) 2x) 7 3, auto !important;
  cursor: image-set(url(img/cursor/arrow.png) 1x, url(img/cursor/arrow@2x.png) 2x) 7 3, auto !important;
}

/* typing: the ordinary text cursor */
html.cr-on :is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]), textarea, [contenteditable=""], [contenteditable="true"]) {
  cursor: text !important;
}

/* ------------------------------------------------------------ the rings at the big hand's fingertip */

.cr {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.cr i,
.cr b {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

.cr i {
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border: 2.5px solid var(--third, #c9b6f5);
  /* a graphite hairline on both sides, so the ring shows on yellow too */
  box-shadow: 0 0 0 1px rgba(37, 35, 36, 0.4), inset 0 0 0 1px rgba(37, 35, 36, 0.4);
}

/* where the finger lands */
.cr b {
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  background: var(--third, #c9b6f5);
  box-shadow: 0 0 0 1px rgba(37, 35, 36, 0.35);
}

.cr[data-state="open"] i {
  animation: cr-out 1.6s ease-out infinite;
}

.cr[data-state="open"] i + i {
  animation-delay: 0.22s;
}

.cr[data-state="open"] b {
  animation: cr-tap 1.6s ease-out infinite;
}

/* on what is open: the rings come in, to the finger */
.cr[data-state="close"] i {
  animation: cr-in 1.6s cubic-bezier(0.5, 0, 0.75, 0.3) infinite;
}

.cr[data-state="close"] i + i {
  animation-delay: 0.22s;
}

.cr[data-state="close"] b {
  animation: cr-tap 1.6s ease-out 0.75s infinite;
}

@keyframes cr-out {
  0% { opacity: 0; transform: scale(0.12); }
  10% { opacity: 1; transform: scale(0.32); }
  55% { opacity: 0.85; }
  82%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes cr-in {
  0% { opacity: 0; transform: scale(1); }
  20% { opacity: 0.9; }
  62% { opacity: 1; transform: scale(0.15); }
  68%, 100% { opacity: 0; transform: scale(0.12); }
}

/* a quick press under the finger */
@keyframes cr-tap {
  0% { opacity: 0.95; transform: scale(0.3); }
  18% { opacity: 0.9; transform: scale(1); }
  40%, 100% { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .cr {
    display: none;
  }
}

@media print {
  .cr {
    display: none;
  }
}