@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
}

.gradient-bg {
  background: linear-gradient(135deg, #161823 0%, #2d1f3d 50%, #161823 100%);
}

.glow {
  box-shadow: 0 0 30px rgba(254, 44, 85, 0.3);
}

.video-container:hover .play-overlay {
  opacity: 1;
}

.play-overlay {
  opacity: 0;
  transition: opacity 0.2s;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Added loading state for video container */
.loading-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fe2c55;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
}

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