.lab-cursor {
  --cursor-x: -100px;
  --cursor-y: -100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: none;
  width: 48px;
  height: 48px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(
    calc(var(--cursor-x) - 3px),
    calc(var(--cursor-y) - 3px),
    0
  );
  transition: opacity 120ms ease-out;
  will-change: transform;
}

.lab-cursor.is-visible {
  opacity: 1;
}

.lab-cursor__body,
.lab-cursor__base,
.lab-cursor__energy,
.lab-cursor__diode {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lab-cursor__body {
  transform-origin: 8% 8%;
  transition: transform 150ms cubic-bezier(.2, .8, .2, 1);
}

.lab-cursor__base {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.lab-cursor__energy,
.lab-cursor__diode {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 310% 310%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.lab-cursor__energy {
  background-image:
    linear-gradient(
      145deg,
      rgba(20, 178, 255, .16) 4%,
      rgba(20, 178, 255, .34) 22%,
      #2ae7ff 36%,
      #c7ff34 44%,
      #66f8ff 51%,
      rgba(30, 194, 255, .28) 66%,
      rgba(30, 194, 255, .1) 82%
    );
  -webkit-mask-image: url("web/cursor-circuit-mask-128.png");
  mask-image: url("web/cursor-circuit-mask-128.png");
  filter:
    drop-shadow(0 0 2px rgba(30, 222, 255, .9))
    drop-shadow(0 0 5px rgba(30, 222, 255, .38));
  animation:
    lab-circuit-flow 1.45s linear infinite,
    lab-circuit-breathe 920ms ease-in-out infinite alternate;
}

.lab-cursor__diode {
  background-image:
    radial-gradient(
      circle,
      #f2ff9a 0 12%,
      #b8ff24 30%,
      rgba(98, 255, 67, .78) 48%,
      rgba(93, 255, 50, 0) 72%
    );
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: url("web/cursor-diode-mask-128.png");
  mask-image: url("web/cursor-diode-mask-128.png");
  filter:
    drop-shadow(0 0 3px rgba(180, 255, 32, .92))
    drop-shadow(0 0 7px rgba(116, 255, 39, .48));
  animation: lab-diode-pulse 1.18s ease-in-out infinite;
}

.lab-cursor.is-interactive .lab-cursor__body {
  transform: scale(1.08);
}

.lab-cursor.is-interactive .lab-cursor__energy {
  animation-duration: .82s, .62s;
}

.lab-cursor.is-pressed .lab-cursor__body {
  transform: scale(.88);
}

.lab-cursor.is-pressed .lab-cursor__energy {
  animation-duration: .42s, .36s;
  filter:
    drop-shadow(0 0 3px rgba(46, 239, 255, 1))
    drop-shadow(0 0 8px rgba(175, 255, 46, .65));
}

html.ailab-embedded,
html.ailab-embedded body {
  background-color: transparent !important;
  background-image: none !important;
}

@keyframes lab-circuit-flow {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes lab-circuit-breathe {
  from {
    opacity: .48;
  }
  to {
    opacity: 1;
  }
}

@keyframes lab-diode-pulse {
  0%,
  100% {
    opacity: .5;
    transform: scale(.92);
  }
  52% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (hover: hover) and (pointer: fine) {
  html.lab-cursor-enabled,
  html.lab-cursor-enabled * {
    cursor: none !important;
  }

  .lab-cursor {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-cursor__energy,
  .lab-cursor__diode {
    animation: none;
  }

  .lab-cursor__energy {
    background-position: 48% 48%;
    opacity: .82;
  }

  .lab-cursor__diode {
    opacity: .9;
  }
}