/* ==================== Vocsy Loading Animations ==================== */
/* Music & Film themed creative loading states */

/* ---------- Shared ---------- */
.vocsy-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 21, 30, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  animation: vocsyLoadFadeIn 0.35s ease;
}
@keyframes vocsyLoadFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vocsy-loading-overlay.vocsy-loading-inline {
  position: relative;
  background: transparent;
  backdrop-filter: none;
  min-height: 50vh;
  inset: auto;
}

.vocsy-loading-text {
  font-size: 15px;
  color: #b6bdc5;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ==================== 1. Equalizer Bars (Music Visualizer) ==================== */
.vocsy-eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
}
.vocsy-eq span {
  display: block;
  width: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #a259ff 0%, #6c63ff 50%, #0f68fe 100%);
  animation: vocsyEqBounce 1.2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(162, 89, 255, 0.4);
}
.vocsy-eq span:nth-child(1) { height: 20px; animation-delay: 0s; }
.vocsy-eq span:nth-child(2) { height: 35px; animation-delay: 0.15s; }
.vocsy-eq span:nth-child(3) { height: 50px; animation-delay: 0.3s; }
.vocsy-eq span:nth-child(4) { height: 30px; animation-delay: 0.45s; }
.vocsy-eq span:nth-child(5) { height: 45px; animation-delay: 0.6s; }
.vocsy-eq span:nth-child(6) { height: 25px; animation-delay: 0.75s; }
.vocsy-eq span:nth-child(7) { height: 40px; animation-delay: 0.9s; }

@keyframes vocsyEqBounce {
  0%, 100% { transform: scaleY(0.3); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ==================== 2. Spinning Vinyl Record ==================== */
.vocsy-vinyl {
  width: 100px;
  height: 100px;
  position: relative;
}
.vocsy-vinyl-disc {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #1a1a2e 0deg, #2a2a3e 30deg,
    #1a1a2e 60deg, #2a2a3e 90deg,
    #1a1a2e 120deg, #2a2a3e 150deg,
    #1a1a2e 180deg, #2a2a3e 210deg,
    #1a1a2e 240deg, #2a2a3e 270deg,
    #1a1a2e 300deg, #2a2a3e 330deg,
    #1a1a2e 360deg
  );
  animation: vocsyVinylSpin 2s linear infinite;
  box-shadow: 0 0 30px rgba(162, 89, 255, 0.3), inset 0 0 20px rgba(0,0,0,0.5);
  position: relative;
}
.vocsy-vinyl-disc::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a259ff, #6c63ff);
  box-shadow: 0 0 15px rgba(162, 89, 255, 0.5);
}
.vocsy-vinyl-disc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d151e;
}

/* Vinyl grooves */
.vocsy-vinyl-grooves {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,0.02),
    inset 0 0 0 14px rgba(255,255,255,0.03),
    inset 0 0 0 22px rgba(255,255,255,0.02),
    inset 0 0 0 30px rgba(255,255,255,0.03);
  pointer-events: none;
}

@keyframes vocsyVinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Tonearm */
.vocsy-tonearm {
  position: absolute;
  top: -5px;
  right: 10px;
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, #4c5866, #7f8796);
  border-radius: 2px;
  transform-origin: right center;
  animation: vocsyTonearmMove 2s ease-in-out infinite;
}
.vocsy-tonearm::after {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7f8796;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
@keyframes vocsyTonearmMove {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(-2deg); }
}

/* ==================== 3. Floating Music Notes ==================== */
.vocsy-notes {
  position: relative;
  width: 120px;
  height: 80px;
}
.vocsy-note {
  position: absolute;
  font-size: 24px;
  color: #a259ff;
  animation: vocsyNoteFloat 2.5s ease-in-out infinite;
  text-shadow: 0 0 15px rgba(162, 89, 255, 0.6);
}
.vocsy-note:nth-child(1) { left: 10%; animation-delay: 0s; }
.vocsy-note:nth-child(2) { left: 35%; animation-delay: 0.4s; font-size: 18px; color: #6c63ff; }
.vocsy-note:nth-child(3) { left: 60%; animation-delay: 0.8s; font-size: 28px; }
.vocsy-note:nth-child(4) { left: 80%; animation-delay: 1.2s; font-size: 20px; color: #0f68fe; }

@keyframes vocsyNoteFloat {
  0% {
    transform: translateY(60px) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) rotate(15deg);
    opacity: 0;
  }
}

/* ==================== 4. Film Clapperboard ==================== */
.vocsy-clap {
  width: 80px;
  height: 64px;
  position: relative;
}
.vocsy-clap-board {
  width: 80px;
  height: 50px;
  background: #1a1a2e;
  border-radius: 6px;
  border: 2px solid #2a3140;
  position: relative;
  overflow: hidden;
}
.vocsy-clap-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: repeating-linear-gradient(
    -55deg,
    #a259ff 0px, #a259ff 8px,
    #1a1a2e 8px, #1a1a2e 16px
  );
}
.vocsy-clap-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 16px;
  background: repeating-linear-gradient(
    -55deg,
    #6c63ff 0px, #6c63ff 8px,
    transparent 8px, transparent 16px
  );
  transform-origin: left center;
  animation: vocsyClapSnap 1.8s ease-in-out infinite;
  border-radius: 4px 4px 0 0;
  z-index: 1;
}
.vocsy-clap-text {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  color: #7f8796;
  font-weight: 600;
  letter-spacing: 1px;
}

@keyframes vocsyClapSnap {
  0%, 40%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-25deg); }
  25% { transform: rotate(0deg); }
}

/* ==================== 5. Sound Wave Ring ==================== */
.vocsy-wave-ring {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vocsy-wave-ring .vocsy-wave-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #a259ff;
  animation: vocsyWaveExpand 2s ease-out infinite;
}
.vocsy-wave-ring .vocsy-wave-circle:nth-child(1) { animation-delay: 0s; }
.vocsy-wave-ring .vocsy-wave-circle:nth-child(2) { animation-delay: 0.5s; }
.vocsy-wave-ring .vocsy-wave-circle:nth-child(3) { animation-delay: 1s; }

.vocsy-wave-ring .vocsy-wave-icon {
  z-index: 1;
  font-size: 28px;
  color: #a259ff;
  text-shadow: 0 0 20px rgba(162, 89, 255, 0.6);
}

@keyframes vocsyWaveExpand {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
    border-color: #a259ff;
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-color: #6c63ff;
  }
}

/* ==================== 6. Musical Note Bounce (Simple) ==================== */
.vocsy-bounce-note {
  font-size: 42px;
  color: #a259ff;
  animation: vocsyBounceNote 1s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(162, 89, 255, 0.5);
  display: inline-block;
}
@keyframes vocsyBounceNote {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.1); }
}

/* ==================== 7. Skeleton Loading (for lists) ==================== */
.vocsy-skeleton {
  background: linear-gradient(90deg, #1a1f2b 25%, #252c38 50%, #1a1f2b 75%);
  background-size: 200% 100%;
  animation: vocsySkeletonShimmer 1.5s infinite;
  border-radius: 12px;
}
.vocsy-skeleton-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.vocsy-skeleton-img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  flex-shrink: 0;
}
.vocsy-skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.vocsy-skeleton-line {
  height: 12px;
  border-radius: 6px;
}
.vocsy-skeleton-line:nth-child(1) { width: 70%; }
.vocsy-skeleton-line:nth-child(2) { width: 45%; }
.vocsy-skeleton-line:nth-child(3) { width: 30%; height: 10px; }

/* Grid skeleton */
.vocsy-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
  width: 100%;
  grid-column: 1 / -1;
  padding: 0 4px;
}
.vocsy-skeleton-grid-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.vocsy-skeleton-grid-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
}
.vocsy-skeleton-grid-title {
  height: 14px;
  width: 60%;
  margin: 0 10px;
}
.vocsy-skeleton-grid-sub {
  height: 10px;
  width: 40%;
  margin: 0 10px;
}

@keyframes vocsySkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==================== 8. Film Strip Loading ==================== */
.vocsy-filmstrip {
  display: flex;
  gap: 4px;
  overflow: hidden;
  width: 120px;
  height: 60px;
  border-radius: 6px;
  border: 2px solid #2a3140;
}
.vocsy-filmstrip-cell {
  flex-shrink: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(180deg, #1a1a2e 0%, #252c38 50%, #1a1a2e 100%);
  animation: vocsyFilmScroll 2s linear infinite;
  position: relative;
}
.vocsy-filmstrip-cell::before,
.vocsy-filmstrip-cell::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  height: 6px;
  background: #0d151e;
  border-radius: 2px;
}
.vocsy-filmstrip-cell::before { top: 3px; }
.vocsy-filmstrip-cell::after { bottom: 3px; }

.vocsy-filmstrip-cell:nth-child(odd) { background: linear-gradient(180deg, #252c38 0%, #2a3140 50%, #252c38 100%); }

@keyframes vocsyFilmScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-60px); }
}

/* ==================== 9. CD Shimmer ==================== */
.vocsy-cd {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #1a1a2e, #2a2a4e, #1a1a2e, #2a2a4e,
    #1a1a2e, #2a2a4e, #1a1a2e, #2a2a4e
  );
  position: relative;
  animation: vocsyCdSpin 3s linear infinite;
}
.vocsy-cd::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(162, 89, 255, 0.15) 30deg,
    transparent 60deg,
    rgba(108, 99, 255, 0.1) 120deg,
    transparent 150deg,
    rgba(15, 104, 254, 0.12) 210deg,
    transparent 240deg,
    rgba(162, 89, 255, 0.1) 300deg,
    transparent 330deg
  );
  animation: vocsyCdShine 3s linear infinite;
}
.vocsy-cd::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a259ff, #6c63ff);
  box-shadow: 0 0 10px rgba(162, 89, 255, 0.5);
}

@keyframes vocsyCdSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes vocsyCdShine {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

/* ==================== Variant Selectors ==================== */

/* Equalizer variant */
.vocsy-loading-eq .vocsy-eq { display: flex; }

/* Vinyl variant */
.vocsy-loading-vinyl .vocsy-vinyl { position: relative; }

/* Notes variant */
.vocsy-loading-notes .vocsy-notes { position: relative; }

/* Clapper variant */
.vocsy-loading-clap .vocsy-clap { position: relative; }

/* Wave variant */
.vocsy-loading-wave .vocsy-wave-ring { position: relative; }

/* Filmstrip variant */
.vocsy-loading-film .vocsy-filmstrip { position: relative; }

/* CD variant */
.vocsy-loading-cd .vocsy-cd { position: relative; }