/* The site cursor (see cursor.js). Only applies once the script has added
   html.has-site-cursor, which it does only for a fine, hovering pointer. */
html.has-site-cursor, html.has-site-cursor * { cursor: none !important; }
html.has-site-cursor.site-cursor-text input, html.has-site-cursor.site-cursor-text textarea,
html.has-site-cursor.site-cursor-text [contenteditable="true"] { cursor: text !important; }
html.has-site-cursor iframe { cursor: auto !important; }

.site-cursor-dot, .site-cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none;
  transition: opacity .2s ease;
}
html.site-cursor-hidden .site-cursor-dot, html.site-cursor-hidden .site-cursor-ring,
html.site-cursor-text .site-cursor-ring { opacity: 0; }
.site-cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
}
.site-cursor-ring__in {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%;
  font: 500 14px/1 'IBM Plex Sans', system-ui, sans-serif; color: #000; white-space: nowrap;
  transition: width .45s cubic-bezier(.2, 1.6, .4, 1), height .45s cubic-bezier(.2, 1.6, .4, 1),
    background-color .3s, border-color .3s, scale .2s;
}
/* Over something with its own label: open up, in green. */
.site-cursor-ring.is-link .site-cursor-ring__in { width: 56px; height: 56px; border-color: #00ff73; }
/* Over something without words: fill with its colour and say one. */
.site-cursor-ring.has-label .site-cursor-ring__in {
  width: 84px; height: 84px; background: var(--cursor-accent, #00ff73); border-color: var(--cursor-accent, #00ff73);
  /* A 1px black ring around the fill (the same weight as the site's dividers and button borders), so the label separates from what's under it. */
  box-shadow: 0 0 0 1px #000;
}
.site-cursor-ring.has-label .site-cursor-ring__in span { animation: site-cursor-label .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes site-cursor-label { from { opacity: 0; scale: .4; } }
.site-cursor-ring.is-down .site-cursor-ring__in { scale: .75; }
/* Horizon: charging a gravity well collapses the ring onto the dot. */
html.site-cursor-holding .site-cursor-ring__in {
  width: 18px; height: 18px; border-color: #00ff73; scale: calc(1 - var(--charge, 0) * .4);
}
@media (prefers-reduced-motion: reduce) {
  .site-cursor-ring__in { transition: background-color .2s, border-color .2s; }
  .site-cursor-ring.has-label .site-cursor-ring__in span { animation: none; }
}

/* Play areas (data-cursor="play": the games, the particles, the portrait):
   the dot and a small ring that stays close, both outlined in black, so they
   read over any scene (a blended dot vanished on Snake's mid-grey rock). */
html.site-cursor-play .site-cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; mix-blend-mode: normal;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7);
}
html.site-cursor-play .site-cursor-ring__in {
  width: 32px; height: 32px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .45);
}

/* Touch: no hover (cursor.js removes :hover rules there); cards answer a
   press instead, a small sink while the finger is down. */
@media (hover: none) {
  .wcard, .tlcard, .edu-card, .h4-card, .l3-chapcard, .l3-next__card, [data-card] { transition: transform .14s ease-out; -webkit-tap-highlight-color: transparent; }
  .wcard:active, .tlcard:active, .edu-card:active, .h4-card:active, .l3-chapcard:active, .l3-next__card:active, [data-card]:active { transform: scale(.985); }
}