/* ===== Fancy Tag Cloud - 華麗標籤雲 ===== */

/* ---------- 側邊欄標籤雲 ---------- */
.card-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.card-tag-cloud a {
  display: inline-block !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  line-height: 1.7 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border: 1px solid transparent;
  z-index: 1;
}

/* ---- 亮色模式 ---- */
.card-tag-cloud a {
  background: linear-gradient(135deg, rgba(120, 120, 180, 0.08), rgba(180, 120, 200, 0.08));
  border-color: rgba(160, 140, 200, 0.2);
  text-shadow: none;
}

.card-tag-cloud a:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-color: rgba(160, 120, 220, 0.5);
  box-shadow:
    0 4px 15px rgba(160, 120, 220, 0.2),
    0 0 20px rgba(160, 120, 220, 0.08);
  background: linear-gradient(135deg, rgba(120, 120, 200, 0.15), rgba(200, 120, 220, 0.15));
}

/* ---- 深色模式 - 霓虹風格 ---- */
[data-theme='dark'] .card-tag-cloud a {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 為每個標籤分配不同的霓虹色系（用 nth-child） */
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+1) {
  border-color: rgba(255, 107, 107, 0.25);
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.15);
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+2) {
  border-color: rgba(78, 205, 196, 0.25);
  text-shadow: 0 0 12px rgba(78, 205, 196, 0.15);
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+3) {
  border-color: rgba(199, 128, 255, 0.25);
  text-shadow: 0 0 12px rgba(199, 128, 255, 0.15);
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+4) {
  border-color: rgba(255, 196, 87, 0.25);
  text-shadow: 0 0 12px rgba(255, 196, 87, 0.15);
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+5) {
  border-color: rgba(108, 180, 255, 0.25);
  text-shadow: 0 0 12px rgba(108, 180, 255, 0.15);
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+6) {
  border-color: rgba(255, 154, 206, 0.25);
  text-shadow: 0 0 12px rgba(255, 154, 206, 0.15);
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+7) {
  border-color: rgba(130, 255, 176, 0.25);
  text-shadow: 0 0 12px rgba(130, 255, 176, 0.15);
}

/* 深色 hover - 霓虹光暈 */
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+1):hover {
  border-color: rgba(255, 107, 107, 0.6);
  box-shadow:
    0 0 8px rgba(255, 107, 107, 0.2),
    0 0 20px rgba(255, 107, 107, 0.1),
    inset 0 0 12px rgba(255, 107, 107, 0.05);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.12), rgba(255, 107, 107, 0.04));
  color: #ff6b6b !important;
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+2):hover {
  border-color: rgba(78, 205, 196, 0.6);
  box-shadow:
    0 0 8px rgba(78, 205, 196, 0.2),
    0 0 20px rgba(78, 205, 196, 0.1),
    inset 0 0 12px rgba(78, 205, 196, 0.05);
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.12), rgba(78, 205, 196, 0.04));
  color: #4ecdc4 !important;
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+3):hover {
  border-color: rgba(199, 128, 255, 0.6);
  box-shadow:
    0 0 8px rgba(199, 128, 255, 0.2),
    0 0 20px rgba(199, 128, 255, 0.1),
    inset 0 0 12px rgba(199, 128, 255, 0.05);
  background: linear-gradient(135deg, rgba(199, 128, 255, 0.12), rgba(199, 128, 255, 0.04));
  color: #c780ff !important;
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+4):hover {
  border-color: rgba(255, 196, 87, 0.6);
  box-shadow:
    0 0 8px rgba(255, 196, 87, 0.2),
    0 0 20px rgba(255, 196, 87, 0.1),
    inset 0 0 12px rgba(255, 196, 87, 0.05);
  background: linear-gradient(135deg, rgba(255, 196, 87, 0.12), rgba(255, 196, 87, 0.04));
  color: #ffc457 !important;
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+5):hover {
  border-color: rgba(108, 180, 255, 0.6);
  box-shadow:
    0 0 8px rgba(108, 180, 255, 0.2),
    0 0 20px rgba(108, 180, 255, 0.1),
    inset 0 0 12px rgba(108, 180, 255, 0.05);
  background: linear-gradient(135deg, rgba(108, 180, 255, 0.12), rgba(108, 180, 255, 0.04));
  color: #6cb4ff !important;
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+6):hover {
  border-color: rgba(255, 154, 206, 0.6);
  box-shadow:
    0 0 8px rgba(255, 154, 206, 0.2),
    0 0 20px rgba(255, 154, 206, 0.1),
    inset 0 0 12px rgba(255, 154, 206, 0.05);
  background: linear-gradient(135deg, rgba(255, 154, 206, 0.12), rgba(255, 154, 206, 0.04));
  color: #ff9ace !important;
}
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+7):hover {
  border-color: rgba(130, 255, 176, 0.6);
  box-shadow:
    0 0 8px rgba(130, 255, 176, 0.2),
    0 0 20px rgba(130, 255, 176, 0.1),
    inset 0 0 12px rgba(130, 255, 176, 0.05);
  background: linear-gradient(135deg, rgba(130, 255, 176, 0.12), rgba(130, 255, 176, 0.04));
  color: #82ffb0 !important;
}

[data-theme='dark'] .card-tag-cloud a:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

/* 微妙的入場動畫 */
.card-tag-cloud a {
  animation: tagFadeSlideIn 0.4s ease both;
}

.card-tag-cloud a:nth-child(1)  { animation-delay: 0s; }
.card-tag-cloud a:nth-child(2)  { animation-delay: 0.02s; }
.card-tag-cloud a:nth-child(3)  { animation-delay: 0.04s; }
.card-tag-cloud a:nth-child(4)  { animation-delay: 0.06s; }
.card-tag-cloud a:nth-child(5)  { animation-delay: 0.08s; }
.card-tag-cloud a:nth-child(6)  { animation-delay: 0.10s; }
.card-tag-cloud a:nth-child(7)  { animation-delay: 0.12s; }
.card-tag-cloud a:nth-child(8)  { animation-delay: 0.14s; }
.card-tag-cloud a:nth-child(9)  { animation-delay: 0.16s; }
.card-tag-cloud a:nth-child(10) { animation-delay: 0.18s; }
.card-tag-cloud a:nth-child(11) { animation-delay: 0.20s; }
.card-tag-cloud a:nth-child(12) { animation-delay: 0.22s; }
.card-tag-cloud a:nth-child(13) { animation-delay: 0.24s; }
.card-tag-cloud a:nth-child(14) { animation-delay: 0.26s; }
.card-tag-cloud a:nth-child(15) { animation-delay: 0.28s; }
.card-tag-cloud a:nth-child(n+16) { animation-delay: 0.30s; }

@keyframes tagFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* hover 時微微發光的底部光條 */
.card-tag-cloud a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme='dark'] .card-tag-cloud a:nth-child(7n+1)::after { background: rgba(255, 107, 107, 0.6); }
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+2)::after { background: rgba(78, 205, 196, 0.6); }
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+3)::after { background: rgba(199, 128, 255, 0.6); }
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+4)::after { background: rgba(255, 196, 87, 0.6); }
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+5)::after { background: rgba(108, 180, 255, 0.6); }
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+6)::after { background: rgba(255, 154, 206, 0.6); }
[data-theme='dark'] .card-tag-cloud a:nth-child(7n+7)::after { background: rgba(130, 255, 176, 0.6); }

.card-tag-cloud a::after {
  background: rgba(160, 120, 220, 0.5);
}

.card-tag-cloud a:hover::after {
  width: 60%;
}

/* ---- active 按下效果 ---- */
.card-tag-cloud a:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: 0.1s !important;
}