/* 6.390 theme song player (see announcements/_presemester.md) */

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.theme-song-box {
  max-width: 500px;
  margin: 15px auto;
  padding: 15px;
  background: linear-gradient(135deg, #f8f8f8 0%, #e8e8f0 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.theme-song-box audio {
  width: 100%;
  margin-bottom: 10px;
}

#lyrics-container {
  height: 60px;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lyrics-text {
  transition: opacity 0.3s ease;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(198,22,141,1) 0%, rgba(102,45,145,1) 50%, rgba(0,161,199,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dancing-text span {
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  animation: bounce 0.5s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(198,22,141,1) 0%, rgba(102,45,145,1) 50%, rgba(0,161,199,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dancing-text span:nth-child(1) { animation-delay: 0s; }
.dancing-text span:nth-child(2) { animation-delay: 0.08s; }
.dancing-text span:nth-child(3) { animation-delay: 0.16s; }
.dancing-text span:nth-child(4) { animation-delay: 0.24s; }
.dancing-text span:nth-child(5) { animation-delay: 0.32s; }

.dancing-dots span {
  display: inline-block;
  font-size: 20px;
  animation: bounce 0.6s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(198,22,141,1) 0%, rgba(102,45,145,1) 50%, rgba(0,161,199,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dancing-dots .group { display: inline-block; margin: 0 8px; }
.dancing-dots .group span:nth-child(3n+1) { animation-delay: 0s; }
.dancing-dots .group span:nth-child(3n+2) { animation-delay: 0.15s; }
.dancing-dots .group span:nth-child(3n) { animation-delay: 0.3s; }

.dancing-long span {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  animation: bounce 0.5s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(198,22,141,1) 0%, rgba(102,45,145,1) 50%, rgba(0,161,199,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dancing-long span:nth-child(1) { animation-delay: 0s; }
.dancing-long span:nth-child(2) { animation-delay: 0.03s; }
.dancing-long span:nth-child(3) { animation-delay: 0.06s; }
.dancing-long span:nth-child(4) { animation-delay: 0.09s; }
.dancing-long span:nth-child(5) { animation-delay: 0.12s; }
.dancing-long span:nth-child(6) { animation-delay: 0.15s; }
.dancing-long span:nth-child(7) { animation-delay: 0.18s; }
.dancing-long span:nth-child(8) { animation-delay: 0.21s; }
.dancing-long span:nth-child(9) { animation-delay: 0.24s; }
.dancing-long span:nth-child(10) { animation-delay: 0.27s; }
.dancing-long span:nth-child(11) { animation-delay: 0.30s; }
.dancing-long span:nth-child(12) { animation-delay: 0.33s; }
.dancing-long span:nth-child(13) { animation-delay: 0.36s; }
.dancing-long span:nth-child(14) { animation-delay: 0.39s; }
.dancing-long span:nth-child(15) { animation-delay: 0.42s; }
.dancing-long span:nth-child(16) { animation-delay: 0.45s; }
.dancing-long span:nth-child(17) { animation-delay: 0.48s; }
.dancing-long span:nth-child(18) { animation-delay: 0.51s; }
.dancing-long span:nth-child(19) { animation-delay: 0.54s; }
.dancing-long span:nth-child(20) { animation-delay: 0.57s; }
.dancing-long span:nth-child(21) { animation-delay: 0.60s; }
.dancing-long span:nth-child(22) { animation-delay: 0.63s; }
.dancing-long span:nth-child(23) { animation-delay: 0.66s; }
.dancing-long span:nth-child(24) { animation-delay: 0.69s; }
.dancing-long span:nth-child(25) { animation-delay: 0.72s; }