/* Skryje systémový kurzor pouze na desktopu */
@media (hover: hover) and (pointer: fine) {
  body, * {
    cursor: none !important;
  }
}

/* Společné vlastnosti pro kuličky */
.cursor-main,
.cursor-follow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease-out;
  z-index: 999999; /* vždy nad vším */
}

/* Hlavní kulička */
.cursor-main {
  width: 12px;
  height: 12px;
  background-color: #0693e3;
}

/* Following kulička */
.cursor-follow {
  width: 12px;
  height: 12px;
  background-color: rgba(6, 147, 227, 0.5);
}

/* Hover efekt – zvětšení pouze following kuličky */
.cursor-hover .cursor-follow {
  transform: translate(-50%, -50%) scale(2.5);
}

/* Animace kliknutí – main zmenšení, following zvětšení */
.cursor-click-main {
  animation: clickMainAnim 0.2s forwards;
}

.cursor-click-follow {
  animation: clickFollowAnim 0.3s forwards;
}

@keyframes clickMainAnim {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.6); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes clickFollowAnim {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(3); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0.5; }
}