/* Decorative feedback only. The native cursor and focus styles remain intact. */
.interaction-cursor,
.interaction-glow,
.interaction-trail,
.interaction-feedback {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  user-select: none;
  color: oklch(97% 0.012 220);
}

.interaction-cursor,
.interaction-trail,
.interaction-feedback {
  mix-blend-mode: difference;
}

.interaction-glow,
.interaction-trail,
.interaction-cursor {
  display: none;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  opacity: 0;
  transition: opacity 120ms cubic-bezier(0.25, 1, 0.5, 1);
}

.interaction-glow {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
}

.interaction-glow > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* The deeper centre reads on paper; the cyan surround reads on midnight sections. */
  background: radial-gradient(circle, oklch(48% 0.13 235 / 0.15), oklch(74% 0.13 220 / 0.14) 25%, oklch(78% 0.12 214 / 0.07) 46%, transparent 70%);
  transform: scale(1);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.interaction-trail {
  width: 0;
  height: 0;
  margin: 0;
  opacity: 1;
}

.interaction-trail-point {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--trail-size);
  height: var(--trail-size);
  margin: calc(var(--trail-size) / -2) 0 0 calc(var(--trail-size) / -2);
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}

.interaction-cursor > span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.6;
  transform: scale(1);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms linear;
}

.interaction-cursor.is-visible, .interaction-glow.is-visible { opacity: 1; }
.interaction-cursor.is-active > span { transform: scale(1.7); opacity: 0.95; }
.interaction-cursor.is-pressed > span { transform: scale(0.78); opacity: 1; }
.interaction-glow.is-active > span { transform: scale(1.16); }
.interaction-glow.is-pressed > span { transform: scale(0.84); }

.interaction-graphic {
  rotate: var(--interaction-rotation, none);
  transform-origin: 50% 50%;
}

.interaction-feedback {
  overflow: hidden;
  contain: layout paint;
}

.interaction-ripple {
  position: absolute;
  display: block;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: oklch(97% 0.012 220 / 0.12);
  transform: translate(-50%, -50%) scale(0.12);
  opacity: 0;
  animation: interaction-ripple 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.interaction-pulse {
  animation: interaction-graphic-pulse 420ms cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes interaction-ripple {
  0% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.12); }
  65% { opacity: 0.3; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes interaction-graphic-pulse {
  0%, 100% { scale: 1; }
  35% { scale: 1.014; }
}

@media (pointer: fine) and (hover: hover) {
  .interaction-cursor, .interaction-glow, .interaction-trail { display: block; }
}

html[data-motion="off"] .interaction-cursor,
html[data-motion="off"] .interaction-glow,
html[data-motion="off"] .interaction-trail,
html[data-motion="off"] .interaction-feedback { display: none; }
html[data-motion="off"] .interaction-graphic { rotate: none; }
html[data-motion="off"] .interaction-pulse { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .interaction-cursor, .interaction-glow, .interaction-trail, .interaction-feedback { display: none; }
  .interaction-graphic { rotate: none; }
  .interaction-pulse { animation: none; }
}

@media (forced-colors: active), print {
  .interaction-cursor, .interaction-glow, .interaction-trail, .interaction-feedback { display: none; }
  .interaction-graphic { rotate: none; }
  .interaction-pulse { animation: none; }
}