/* ================================================
   TinyOA-TagCloud3D —  3D 标签云
   ================================================ */

/* --- 2D 基础状态（移动端）--- */
.pba-home-tpcld-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 0.6rem;
  padding: 1rem 0;
}

.pba-home-tpcld-tags a {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 6rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  transition: all 0.3s ease;
  animation: tag-float 4s ease-in-out infinite alternate;
}

.pba-home-tpcld-tags a:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  animation-play-state: paused;
}

/* 2D 浮动动画 */
.pba-home-tpcld-tags a:nth-child(even) {
  animation-delay: -1s;
  animation-duration: 5s;
}
.pba-home-tpcld-tags a:nth-child(3n) {
  animation-delay: -2s;
  animation-duration: 3.5s;
}

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

/* --- 调色板：8色，自动适配深色模式 --- */
.pba-home-tpcld-tags a:nth-child(8n + 1) {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}
.pba-home-tpcld-tags a:nth-child(8n + 2) {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.pba-home-tpcld-tags a:nth-child(8n + 3) {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.pba-home-tpcld-tags a:nth-child(8n + 4) {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #c4b5fd;
}
.pba-home-tpcld-tags a:nth-child(8n + 5) {
  background: #ffe4e6;
  color: #9f1239;
  border-color: #fda4af;
}
.pba-home-tpcld-tags a:nth-child(8n + 6) {
  background: #e0f2fe;
  color: #0c4a6e;
  border-color: #7dd3fc;
}
.pba-home-tpcld-tags a:nth-child(8n + 7) {
  background: #fce7f3;
  color: #831843;
  border-color: #f9a8d4;
}
.pba-home-tpcld-tags a:nth-child(8n + 8) {
  background: #ecfdf5;
  color: #064e3b;
  border-color: #6ee7b7;
}

@media (prefers-color-scheme: dark) {
  .pba-home-tpcld-tags a:nth-child(8n + 1) {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #3b82f6;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 2) {
    background: #14532d;
    color: #86efac;
    border-color: #22c55e;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 3) {
    background: #451a03;
    color: #fcd34d;
    border-color: #f59e0b;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 4) {
    background: #3b0764;
    color: #c4b5fd;
    border-color: #a855f7;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 5) {
    background: #4c0519;
    color: #fda4af;
    border-color: #f43f5e;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 6) {
    background: #082f49;
    color: #7dd3fc;
    border-color: #0ea5e9;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 7) {
    background: #500724;
    color: #f9a8d4;
    border-color: #ec4899;
  }
  .pba-home-tpcld-tags a:nth-child(8n + 8) {
    background: #022c22;
    color: #6ee7b7;
    border-color: #10b981;
  }
}

/* --- 3D 球体状态（PC，由 JS 添加 .is-3d）--- */
.pba-home-tpcld-tags.is-3d {
  display: block;
  position: relative;
  height: 100%; /* 跟随父元素 dd 的高度 */
  /* overflow: hidden; */
  cursor: grab;
}

.pba-home-tpcld-tags.is-3d:active {
  cursor: grabbing;
}

/* 球体中心锚点（JS 创建的 .tc-sphere） */
.tc-sphere {
  position: absolute;
  left: 42%;
  top: 50%;
  width: 0;
  height: 0;
}

.pba-home-tpcld-tags.is-3d a {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  animation: none !important;
  transition:
    opacity 0.25s,
    box-shadow 0.25s;
  transform-origin: 50% 50%;
}

.pba-home-tpcld-tags.is-3d a:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  z-index: 999 !important;
}

/* 背景光晕（JS 创建的 .tc-glow） */
.tc-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.07) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 提示文字（JS 创建的 .tc-hint） */
.tc-hint {
  position: absolute;
  right: 0; /* 贴右侧 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%);

  writing-mode: vertical-rl; /* 关键：竖排 */
  text-orientation: mixed; /* 中文更自然 */

  font-size: var(--font-size-xs);
  color: #999;
  pointer-events: none;
  opacity: 0.7;
  letter-spacing: 0.1em; /* 竖排建议加大一点间距 */
}