/* ============================================================
   FAMOUS MEDIA Asset Library - Styles
   ============================================================ */

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.1); }
  50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); }
}

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

.animate-fade-in { animation: fade-in 0.4s ease-out; }
.animate-scale-in { animation: scale-in 0.3s ease-out; }

/* Glass morphism sidebar */
.sidebar-glass {
  background: linear-gradient(180deg, rgba(24, 24, 27, 0.9) 0%, rgba(9, 9, 11, 0.95) 100%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(113, 113, 122, 0.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(113, 113, 122, 0.5); }

/* Selection */
::selection { background: rgba(139, 92, 246, 0.3); color: white; }

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

/* Body */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Modal inputs */
.modal-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: rgba(39, 39, 42, 0.8);
  border: 1px solid rgba(63, 63, 70, 0.5);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: #e4e4e7;
  outline: none;
  transition: all 0.2s;
}

.modal-input:focus {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.modal-input::placeholder {
  color: rgba(113, 113, 122, 0.6);
}

/* Hover card lift effect */
.group:hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle grid background */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(236, 72, 153, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
  aside { 
    width: 5rem !important;
  }
  aside ~ div {
    margin-left: 5rem !important;
  }
}

/* Smooth transitions for all interactive elements */
button, a, input, select, textarea {
  transition: all 0.2s ease;
}

/* Focus visible styles */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.5);
  outline-offset: 2px;
}