/* General page style */
body {
  background: black;
  color: lime;
  font-family: monospace;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Suspicious face elements */
.face {
  position: absolute;
  font-size: 2em;
  user-select: none;
}

/* Floating background quotes */
.floating-quote {
  position: absolute;
  color: rgba(200, 200, 200, 0.8);
  font-size: 1.2em;
  font-family: monospace;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease-in-out;
  will-change: transform, opacity;
}

/* Mouse entity */
#mouse-entity {
  position: absolute;
  width: 20px;
  height: 20px;
  background: lime;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference; /* pops against background */
}

.mouse-trail {
  position: absolute;
  width: 8px;
  height: 8px;
  background: lime; /* same as faces */
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  z-index: 5000;
}

.fire-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: lime;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  z-index: 5000;
  animation: fireMove 0.7s linear forwards;
}

@keyframes fireMove {
  0% { transform: translate(0,0) scale(1); opacity: 0.8; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}