.tag-cloud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(2px);
}

@keyframes snowFall {
  0% {
    transform: translateX(calc(-10% + var(--x-start))) translateY(-20%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(10% + var(--x-offset) + var(--x-drift))) translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 调整动画延迟时间 */
.tag:nth-child(1) { --delay: 0s; }
.tag:nth-child(2) { --delay: 1s; }
.tag:nth-child(3) { --delay: 2s; }
.tag:nth-child(4) { --delay: 3s; }
.tag:nth-child(5) { --delay: 4s; }
.tag:nth-child(6) { --delay: 5s; }
.tag:nth-child(7) { --delay: 6s; }
.tag:nth-child(8) { --delay: 7s; }
.tag:nth-child(9) { --delay: 8s; }
.tag:nth-child(10) { --delay: 9s; }
.tag:nth-child(11) { --delay: 10s; }
.tag:nth-child(12) { --delay: 11s; }
.tag:nth-child(1) { --x-start: 0; --x-offset: 5vw; --x-drift: 2vw; }
.tag:nth-child(2) { --x-start: 5vw; --x-offset: 10vw; --x-drift: -3vw; }
.tag:nth-child(3) { --x-start: -5vw; --x-offset: 15vw; --x-drift: 4vw; }
.tag:nth-child(4) { --x-start: 10vw; --x-offset: 20vw; --x-drift: -2vw; }
.tag:nth-child(5) { --x-start: -10vw; --x-offset: 25vw; --x-drift: 3vw; }
.tag:nth-child(6) { --x-start: 15vw; --x-offset: 30vw; --x-drift: -4vw; }
.tag:nth-child(7) { --x-start: -15vw; --x-offset: 35vw; --x-drift: 2vw; }
.tag:nth-child(8) { --x-start: 20vw; --x-offset: 40vw; --x-drift: -3vw; }
.tag:nth-child(9) { --x-start: -20vw; --x-offset: 45vw; --x-drift: 4vw; }
.tag:nth-child(10) { --x-start: 25vw; --x-offset: 50vw; --x-drift: -2vw; }
.tag:nth-child(11) { --x-start: -25vw; --x-offset: 55vw; --x-drift: 3vw; }
.tag:nth-child(12) { --x-start: 30vw; --x-offset: 60vw; --x-drift: -4vw; }
.tag {
  position: absolute;
  font-size: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  color: white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  white-space: nowrap;
  animation: snowFall 8s linear infinite;
  animation-delay: var(--delay);
  opacity: 0;
  will-change: transform;
}

/* 为不同标签设置不同参数 */
.tag:nth-child(1) { --delay: 0s; --x-offset: 10vw; }
.tag:nth-child(2) { --delay: 1s; --x-offset: 20vw; }
.tag:nth-child(3) { --delay: 2s; --x-offset: 15vw; }
.tag:nth-child(4) { --delay: 3s; --x-offset: 25vw; }
.tag:nth-child(5) { --delay: 4s; --x-offset: 5vw; }
.tag:nth-child(6) { --delay: 5s; --x-offset: 30vw; }
.tag:nth-child(7) { --delay: 6s; --x-offset: 10vw; }
.tag:nth-child(8) { --delay: 7s; --x-offset: 20vw; }
.tag:nth-child(9) { --delay: 8s; --x-offset: 15vw; }
.tag:nth-child(10) { --delay: 9s; --x-offset: 25vw; }
.tag:nth-child(11) { --delay: 10s; --x-offset: 5vw; }
.tag:nth-child(12) { --delay: 11s; --x-offset: 30vw; }
/* 彩虹色标签 */
.tag:nth-child(4n+1) { background: linear-gradient(45deg, #ff9a9e, #fad0c4); }
.tag:nth-child(4n+2) { background: linear-gradient(45deg, #a18cd1, #fbc2eb); }
.tag:nth-child(4n+3) { background: linear-gradient(45deg, #84fab0, #8fd3f4); }
.tag:nth-child(4n+4) { background: linear-gradient(45deg, #f6d365, #fda085); }

@keyframes fly {
  0% {
    transform: translateX(-100%) translateY(calc(var(--y) * 100vh));
    opacity: 0;
  }
  10% { 
    opacity: 1;
    transform: translateX(-10%) translateY(calc(var(--y) * 100vh + var(--offset)));
  }
  50% {
    transform: translateX(50%) translateY(calc(var(--y) * 100vh - var(--offset)));
  }
  90% { 
    opacity: 1;
    transform: translateX(110%) translateY(calc(var(--y) * 100vh + var(--offset)));
  }
  100% {
    transform: translateX(120vw) translateY(calc(var(--y) * 100vh));
    opacity: 0;
  }
}

/* 为不同标签设置不同位置和动画延迟 */
.tag:nth-child(odd) { --offset: 50px; }
.tag:nth-child(even) { --offset: -50px; }

.tag:nth-child(1) { --y:0.1; animation-delay: 0s; }
.tag:nth-child(2) { --y:0.3; animation-delay: 1s; }
.tag:nth-child(3) { --y:0.5; animation-delay: 2s; }
.tag:nth-child(4) { --y:0.7; animation-delay: 3s; }
.tag:nth-child(5) { --y:0.9; animation-delay: 4s; }
.tag:nth-child(6) { --y:0.2; animation-delay: 5s; }
.tag:nth-child(7) { --y:0.4; animation-delay: 6s; }
.tag:nth-child(8) { --y:0.6; animation-delay: 7s; }
.tag:nth-child(9) { --y:0.8; animation-delay: 8s; }
.tag:nth-child(10) { --y:0.15; animation-delay: 9s; }
.tag:nth-child(11) { --y:0.35; animation-delay: 10s; }
.tag:nth-child(12) { --y:0.65; animation-delay: 11s; }
/* 为每个标签分配独特颜色 */
.tag:nth-child(1) { background: linear-gradient(45deg, #FF9A8B, #FF6B95); }
.tag:nth-child(2) { background: linear-gradient(45deg, #4FACFE, #00F2FE); }
.tag:nth-child(3) { background: linear-gradient(45deg, #A6C1EE, #FBC2EB); }
.tag:nth-child(4) { background: linear-gradient(45deg, #84FAB0, #8FD3F4); }
.tag:nth-child(5) { background: linear-gradient(45deg, #F6D365, #FDA085); }
.tag:nth-child(6) { background: linear-gradient(45deg, #A18CD1, #FBC2EB); }
.tag:nth-child(7) { background: linear-gradient(45deg, #5FFBF1, #86A8E7); }
.tag:nth-child(8) { background: linear-gradient(45deg, #D8B5FF, #1EAE98); }
.tag:nth-child(9) { background: linear-gradient(45deg, #FFECD2, #FCB69F); }
.tag:nth-child(10) { background: linear-gradient(45deg, #FF9A9E, #FAD0C4); }
.tag:nth-child(11) { background: linear-gradient(45deg, #30CFD0, #330867); }
.tag:nth-child(12) { background: linear-gradient(45deg, #FDCBF1, #E6DEE9); }