* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #fff7ed;
  font-family: Arial, sans-serif;
  overflow: hidden;
  cursor: pointer;
}

/* Demo content */
.demo {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ff7a00;
  user-select: none;
}

.robot {
  font-size: 100px;
  animation: robotFloat 2s ease-in-out infinite;
}

.demo h1 {
  margin-top: 15px;
  font-size: 32px;
}

.demo p {
  margin-top: 8px;
  color: #999;
}

/* Robot floating */
@keyframes robotFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Click energy ring */
.click-ring {
  position: fixed;

  width: 20px;
  height: 20px;

  border: 4px solid #ff8a00;
  border-radius: 50%;

  pointer-events: none;
  z-index: 9998;

  transform: translate(-50%, -50%) scale(0);

  animation: ringEffect 0.55s ease-out forwards;
}

@keyframes ringEffect {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* Small robot particles */
.robot-particle {
  position: fixed;

  font-size: 25px;

  pointer-events: none;
  z-index: 9999;

  transform: translate(-50%, -50%);

  animation: robotParticle 0.9s ease-out forwards;
}

@keyframes robotParticle {
  0% {
    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotate(0deg)
      scale(0.3);

    opacity: 0;
  }

  15% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate(
        calc(var(--x) * 0.2),
        calc(var(--y) * 0.2)
      )
      rotate(40deg)
      scale(1.2);
  }

  100% {
    transform:
      translate(-50%, -50%)
      translate(var(--x), var(--y))
      rotate(var(--rotate))
      scale(0.7);

    opacity: 0;
  }
}

/* Small orange spark */
.spark {
  position: fixed;

  width: 7px;
  height: 7px;

  background: #ff8a00;
  border-radius: 50%;

  pointer-events: none;
  z-index: 9997;

  box-shadow:
    0 0 8px #ff8a00,
    0 0 15px #ffb347;

  animation: sparkEffect 0.7s ease-out forwards;
}

@keyframes sparkEffect {
  from {
    transform: translate(-50%, -50%)
               translate(0, 0)
               scale(1);

    opacity: 1;
  }

  to {
    transform: translate(-50%, -50%)
               translate(var(--x), var(--y))
               scale(0);

    opacity: 0;
  }
}