/* ============================================================
   StreamFlix - Main Stylesheet
   Netflix-inspired design system
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  border-radius: 8px;
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-strong {
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

/* Movie card hover effects */
.movie-card {
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.movie-card:hover {
  transform: scale(1.08);
  z-index: 20;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(229, 9, 20, 0.15);
}

/* Carousel */
.carousel-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-container::-webkit-scrollbar { display: none; }

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(
    to top,
    #141414 0%,
    rgba(20, 20, 20, 0.9) 15%,
    rgba(20, 20, 20, 0.5) 40%,
    rgba(20, 20, 20, 0.2) 60%,
    transparent 100%
  );
}

.hero-gradient-side {
  background: linear-gradient(
    to right,
    #141414 0%,
    rgba(20, 20, 20, 0.7) 30%,
    transparent 60%
  );
}

/* Button styles */
.btn-primary {
  background: #E50914;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: #f40612;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Video player */
.video-container {
  position: relative;
  background: #000;
}
.video-controls {
  transition: opacity 0.3s ease;
}

/* Modal backdrop */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
}

/* Light theme overrides */
html:not(.dark) body {
  background: #f5f5f5;
  color: #1a1a1a;
}
html:not(.dark) .glass {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}
html:not(.dark) .glass-strong {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}
html:not(.dark) .hero-gradient {
  background: linear-gradient(to top, #f5f5f5 0%, rgba(245, 245, 245, 0.9) 15%, transparent 100%);
}
html:not(.dark) .hero-gradient-side {
  background: linear-gradient(to right, #f5f5f5 0%, rgba(245, 245, 245, 0.7) 30%, transparent 60%);
}
html:not(.dark) .movie-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
html:not(.dark) .skeleton {
  background: linear-gradient(90deg, #e5e5e5 25%, #f0f0f0 50%, #e5e5e5 75%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* Input styles */
.input-dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.input-dark:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #E50914;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
  outline: none;
}

/* Tooltip */
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.tooltip:hover::after { opacity: 1; }

/* Star rating */
.star-rating .star { cursor: pointer; transition: color 0.2s, transform 0.2s; }
.star-rating .star:hover { transform: scale(1.2); }
.star-rating .star.active { color: #fbbf24; }
.star-rating .star.inactive { color: #4a5568; }

/* Chat bubble animation */
.chat-bubble {
  animation: scaleIn 0.3s ease-out;
}

/* Progress bar */
.progress-bar {
  transition: width 0.3s ease;
}

/* Responsive video grid */
@media (max-width: 640px) {
  .movie-card:hover { transform: scale(1.03); }
}

/* PWA install prompt */
.pwa-prompt {
  animation: slideUp 0.5s ease-out;
}

/* Notification toast */
.toast {
  animation: slideDown 0.4s ease-out, fadeIn 0.4s ease-out;
}
.toast-exit {
  animation: slideUp 0.3s ease-in reverse, fadeIn 0.3s ease-in reverse;
}