/* Базовые стили для облака тегов */
.tag-cloud {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;

  /* Анимация появления всего облака */
  animation: showCloud 0.8s ease-out forwards;

  /* Дополнительные стили для контейнера */
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Адаптивность контейнера */
@media (max-width: 768px) {
  .tag-cloud {
    padding: 15px;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .tag-cloud {
    padding: 10px;
    gap: 5px;
  }
}

.tag {
  background: #f5f5f5;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
  color: var(--tag-color, #333);

  /* Начальная позиция для анимации */
  opacity: 0;
  transform: translateY(20px);

  /* Индивидуальная анимация каждого тега */
  animation: appearTag 0.6s ease-out forwards;
  animation-delay: 0s; /* будет переопределено для каждого элемента */

  /* Дополнительные стили для тегов */
  cursor: pointer;
  font-weight: 500;
}

/* Эффект при наведении */
.tag:hover {
  background: #e5e5e5;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Адаптивность внутри самого тега */
@media (max-width: 768px) {
  .tag {
    font-size: calc(1em + 0.2vw);
  }
}

/* Ключевые кадры анимации */
@keyframes showCloud {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes appearTag {
  0%   { opacity: 0; transform: translateY(20px); }
  60%  { opacity: 0.8; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Цветовые варианты и задержки для 30 тегов */
/* Каждому тегу задаётся свой цвет и задержка */
.tag:nth-child(1)  { --tag-color: #ff6b6b;  animation-delay: 0.1s; }
.tag:nth-child(2)  { --tag-color: #6a0dad;  animation-delay: 0.2s; }
.tag:nth-child(3)  { --tag-color: #2d72d6;  animation-delay: 0.3s; }
.tag:nth-child(4)  { --tag-color: #15a958;  animation-delay: 0.4s; }
.tag:nth-child(5)  { --tag-color: #f6d23f;  animation-delay: 0.5s; }
.tag:nth-child(6)  { --tag-color: #ff9f43;  animation-delay: 0.6s; }
.tag:nth-child(7)  { --tag-color: #8334f7;  animation-delay: 0.7s; }
.tag:nth-child(8)  { --tag-color: #34c758;  animation-delay: 0.8s; }
.tag:nth-child(9)  { --tag-color: #f7b734;  animation-delay: 0.9s; }
.tag:nth-child(10) { --tag-color: #8334f7;  animation-delay: 1.0s; }

.tag:nth-child(11) { --tag-color: #ff6b6b;  animation-delay: 1.1s; }
.tag:nth-child(12) { --tag-color: #6a0dad;  animation-delay: 1.2s; }
.tag:nth-child(13) { --tag-color: #2d72d6;  animation-delay: 1.3s; }
.tag:nth-child(14) { --tag-color: #15a958;  animation-delay: 1.4s; }
.tag:nth-child(15) { --tag-color: #f6d23f;  animation-delay: 1.5s; }
.tag:nth-child(16) { --tag-color: #ff9f43;  animation-delay: 1.6s; }
.tag:nth-child(17) { --tag-color: #8334f7;  animation-delay: 1.7s; }
.tag:nth-child(18) { --tag-color: #34c758;  animation-delay: 1.8s; }
.tag:nth-child(19) { --tag-color: #f7b734;  animation-delay: 1.9s; }
.tag:nth-child(20) { --tag-color: #8334f7;  animation-delay: 2.0s; }

.tag:nth-child(21) { --tag-color: #ff6b6b;  animation-delay: 2.1s; }
.tag:nth-child(22) { --tag-color: #6a0dad;  animation-delay: 2.2s; }
.tag:nth-child(23) { --tag-color: #2d72d6;  animation-delay: 2.3s; }
.tag:nth-child(24) { --tag-color: #15a958;  animation-delay: 2.4s; }
.tag:nth-child(25) { --tag-color: #f6d23f;  animation-delay: 2.5s; }
.tag:nth-child(26) { --tag-color: #ff9f43;  animation-delay: 2.6s; }
.tag:nth-child(27) { --tag-color: #8334f7;  animation-delay: 2.7s; }
.tag:nth-child(28) { --tag-color: #34c758;  animation-delay: 2.8s; }
.tag:nth-child(29) { --tag-color: #f7b734;  animation-delay: 2.9s; }
.tag:nth-child(30) { --tag-color: #8334f7;  animation-delay: 3.0s; }

/* Размеры тегов для эффекта облака (модуль 5) */
.tag:nth-child(5n+1) { font-size: 1.5em; }
.tag:nth-child(5n+2) { font-size: 1.3em; }
.tag:nth-child(5n+3) { font-size: 1.2em; }
.tag:nth-child(5n+4) { font-size: 1.15em; }
.tag:nth-child(5n)   { font-size: 1.1em; }