.joyful-btn {
  /* Базовые стили и скругление */
  padding: 16px 36px;
  font-size: 24px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #ffffff;
  border: none;
  border-radius: 50px; /* Закруглённые углы */
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;

  /* Переливающийся градиентный фон */
  background: linear-gradient(45deg, #ff007f, #7f00ff, #00f0ff, #ff007f);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;

  /* Мягкая тень в обычном состоянии */
  box-shadow: 0 4px 15px rgba(127, 0, 255, 0.3);
  
  /* Плавный переход для всех состояний */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Эффект "радости" и свечения при наведении */
.joyful-btn:hover {
  transform: scale(1.08) translateY(-2px); /* Кнопка увеличивается и приподнимается */
  animation: gradientShift 2s linear infinite; /* Переливание становится быстрее */
  
  /* Яркое пульсирующее свечение */
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.6), 
              0 0 40px rgba(255, 0, 127, 0.4);
}

/* Реакция на щелчок (клик) мышкой */
.joyful-btn:active {
  transform: scale(0.95) translateY(1px); /* Кнопка сжимается */
  box-shadow: 0 2px 8px rgba(127, 0, 255, 0.5);
  transition: all 0.1s ease; /* Быстрый отклик на клик */
}

/* Анимация перелива градиента */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}