/* Cursor styles. The style is chosen in the editor (Cursor) and stored as cursorStyle in data/content.json.
   Every style has the same moments: over a link, in a text field, and over a photo (with its caption).
   The cursor is white with a "difference" blend, so it inverts like the name: dark on white, light on dark photos. */

html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

.cursor,
.cursor-trail {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
  transition: opacity 0.2s;
  will-change: transform;
}

.cursor.is-hidden,
.cursor-trail.is-hidden {
  opacity: 0;
}

.cursor-trail {
  display: none;
}

.cursor__dot,
.cursor__frame,
.cursor__arrow,
.cursor-trail::before {
  position: absolute;
  box-sizing: border-box;
  transition: left 0.3s cubic-bezier(0.2, 0.7, 0.1, 1), top 0.3s cubic-bezier(0.2, 0.7, 0.1, 1),
    width 0.3s cubic-bezier(0.2, 0.7, 0.1, 1), height 0.3s cubic-bezier(0.2, 0.7, 0.1, 1), background-color 0.2s,
    border-radius 0.2s, opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.7, 0.1, 1), fill 0.2s;
}

/* Caption over photos (all styles) */
.cursor__label {
  position: absolute;
  left: 14px;
  top: 10px;
  font: 700 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.cursor.is-photo .cursor__label {
  opacity: 1;
  transform: none;
}

/* In a text field every style becomes a slim bar */
.cursor.is-text .cursor__dot {
  display: block;
  left: -1px;
  top: -10px;
  width: 2px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  transform: none;
}

.cursor__frame {
  left: -23px;
  top: -23px;
  width: 46px;
  height: 46px;
  opacity: 0;
  transform: scale(0.6);
  background:
    linear-gradient(currentColor, currentColor) left top / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1px 10px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1px 10px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1px 10px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1px 10px no-repeat;
}

.cursor__arrow {
  display: none;
  left: 0;
  top: 0;
  width: 16px;
  height: 22px;
  overflow: visible;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  transform-origin: 1px 1px;
}

/* ---- Dot: a small dot; a ring over links ---- */
[data-cursor-style='dot'] .cursor__dot {
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

[data-cursor-style='dot'] .cursor.is-link .cursor__dot {
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  background: transparent;
}

[data-cursor-style='dot'] .cursor.is-photo .cursor__dot {
  transform: scale(0.6);
}

[data-cursor-style='dot'] .cursor.is-down .cursor__dot {
  transform: scale(0.5);
}

/* ---- Ring: a thin circle that drifts after a tiny dot ---- */
[data-cursor-style='ring'] .cursor-trail {
  display: block;
}

[data-cursor-style='ring'] .cursor__dot {
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.cursor-trail::before {
  content: '';
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.cursor-trail.is-link::before {
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
}

.cursor-trail.is-photo::before {
  left: -38px;
  top: -38px;
  width: 76px;
  height: 76px;
}

.cursor-trail.is-text::before {
  opacity: 0;
  transform: scale(0.4);
}

.cursor-trail.is-down::before {
  transform: scale(0.85);
}

[data-cursor-style='ring'] .cursor.is-photo .cursor__label {
  left: 46px;
  top: -5px;
}

/* ---- Crosshair: a fine cross; viewfinder corners over photos ---- */
[data-cursor-style='cross'] .cursor__dot {
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

[data-cursor-style='cross'] .cursor.is-link .cursor__dot {
  transform: rotate(45deg);
}

[data-cursor-style='cross'] .cursor.is-photo .cursor__dot {
  transform: scale(0.6);
}

[data-cursor-style='cross'] .cursor.is-photo .cursor__frame {
  opacity: 1;
  transform: none;
}

[data-cursor-style='cross'] .cursor.is-down .cursor__frame {
  transform: scale(0.88);
}

[data-cursor-style='cross'] .cursor.is-photo .cursor__label {
  left: 32px;
  top: -5px;
}

/* ---- Square: graphic and precise ---- */
[data-cursor-style='square'] .cursor__dot {
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  background: currentColor;
}

[data-cursor-style='square'] .cursor.is-link .cursor__dot {
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  background: transparent;
}

[data-cursor-style='square'] .cursor.is-photo .cursor__dot {
  transform: scale(0.6);
}

[data-cursor-style='square'] .cursor.is-down .cursor__dot {
  transform: scale(0.5);
}

/* ---- Fine arrow: a slim outlined arrow that fills in over links ---- */
[data-cursor-style='arrow'] .cursor__dot {
  display: none;
}

[data-cursor-style='arrow'] .cursor__arrow {
  display: block;
}

[data-cursor-style='arrow'] .cursor.is-link .cursor__arrow {
  fill: currentColor;
}

[data-cursor-style='arrow'] .cursor.is-down .cursor__arrow {
  transform: scale(0.85);
}

[data-cursor-style='arrow'] .cursor.is-text .cursor__arrow {
  opacity: 0;
}

[data-cursor-style='arrow'] .cursor.is-photo .cursor__label {
  left: 18px;
  top: 22px;
}

/* ---- Standard: the computer's own cursor, with the caption over photos ---- */
[data-cursor-style='system'] .cursor__dot,
[data-cursor-style='system'] .cursor.is-text .cursor__dot {
  display: none;
}

[data-cursor-style='system'] .cursor.is-photo .cursor__label {
  left: 18px;
  top: 22px;
}

/* Small live demos inside the editor's chooser */
.cursor.is-demo,
.cursor-trail.is-demo {
  position: absolute;
  z-index: 2;
}