@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  50%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatalways {
  50%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.anim {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: 0.7;
  top: 50%;
}

.shake {
  animation: shake 0.8s infinite;
}

.spin {
  animation: spin 2s linear infinite;
}
.floatalways {
  animation: float 3s ease-in-out infinite;
  position:relative;
  cursor: pointer;
}
label img {
  animation: float 3s ease-in-out infinite;
  cursor: pointer;
  display: block;
}

/* When checkbox is checked, apply spin animation */
#animToggle:checked + label img {
  animation: spin 2s linear infinite;
}
.float:hover {
  animation: float 3s ease-in-out infinite;
}
.troll {
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition-property: transform;
  transition-duration: 0.1s; /* rápido para hover */
  transition-timing-function: ease-out;
}
.troll:hover {
  transform: translateX(2000px);
  transition: transform 2s ease-out;
}
.troll:not(:hover) {
  transition-duration: 1s; /* "lento" para volver */
  transition-timing-function: ease-in;
}