/* Custom animations and effects that Tailwind can't handle */
@keyframes progressAnimation {
  0% {
    width: 0%;
  }
  20% {
    width: 15%;
  }
  40% {
    width: 35%;
  }
  60% {
    width: 55%;
  }
  80% {
    width: 80%;
  }
  100% {
    width: 100%;
  }
}

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

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

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Custom classes */
.loading-container {
  background-image: url('cover.png');
}

.loading-container::before {
  content: '';
  @apply absolute inset-0 bg-black bg-opacity-20 z-10;
}

.progress-bar {
  background: linear-gradient(90deg, #8cc152, #52c4b0, #4fc3f7);
  background-size: 200% 100%;
  animation:
    progressAnimation 3s ease-in-out forwards,
    shimmer 2s infinite;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

.slide-in {
  animation: slideIn 0.8s ease-out;
}

.fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}