/* DJ PIARNU - Animations */

/* Keyframes */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.8), 0 0 60px rgba(139, 92, 246, 0.4);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes vinyl-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes equalizer {
  0%, 100% {
    height: 20%;
  }
  50% {
    height: 100%;
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Animation Classes */
.animate-fade-in {
  animation: fade-in 0.5s ease forwards;
}

.animate-slide-up {
  animation: slide-up 0.5s ease forwards;
}

.animate-scale-in {
  animation: scale-in 0.5s ease forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Hover Animations */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
}

/* Vinyl Record Animation */
.vinyl-record {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, #333 10%, transparent 10%),
    radial-gradient(circle at center, #222 20%, transparent 20%),
    radial-gradient(circle at center, #111 30%, transparent 30%),
    repeating-radial-gradient(circle at center, #000 0px, #111 2px, #000 4px);
  position: relative;
  animation: vinyl-spin 3s linear infinite;
}

.vinyl-record::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: var(--accent-purple);
  border-radius: 50%;
}

/* Equalizer Bars */
.equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
}

.equalizer-bar {
  width: 4px;
  background: var(--gradient-purple);
  border-radius: 2px;
  animation: equalizer 0.8s ease-in-out infinite;
}

.equalizer-bar:nth-child(1) { animation-delay: 0s; }
.equalizer-bar:nth-child(2) { animation-delay: 0.1s; }
.equalizer-bar:nth-child(3) { animation-delay: 0.2s; }
.equalizer-bar:nth-child(4) { animation-delay: 0.3s; }
.equalizer-bar:nth-child(5) { animation-delay: 0.4s; }

/* Glow Effects */
.glow-purple {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.glow-cyan {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

.glow-pink {
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.4);
}

.glow-text {
  text-shadow: 0 0 10px currentColor;
}

/* Loading Animation */
.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Page Transitions */
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-exit {
  opacity: 1;
}

.page-exit-active {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Typing Effect for Chat */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  width: fit-content;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--accent-purple);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan), var(--accent-pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

/* Card Hover Effect */
.card-interactive {
  position: relative;
  overflow: hidden;
}

.card-interactive::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: 0.5s;
}

.card-interactive:hover::before {
  left: 100%;
}

/* Celebration Animation */
@keyframes celebrate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.celebrate {
  animation: celebrate 0.5s ease;
}

/* Progress Bar Animation */
.progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-purple);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-card) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

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