/* Custom styles for OPT-IMG */

/* Modern navigation styles */
nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

/* Glass effect navigation container */
nav .backdrop-blur-xl {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

nav .backdrop-blur-xl:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Smooth scrolling for navigation links */
html {
  scroll-behavior: smooth;
}

/* Navigation link hover effects */
nav a:hover {
  transform: translateY(-1px);
}

/* Enhanced glass effect on hover for nav links */
nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Mobile menu button styling */
#mobile-menu-btn {
  background: white;
  border: 2px solid #f59e0b; /* amber-500 */
  border-radius: 8px;
  padding: 8px;
  transition: all 0.3s ease;
}

#mobile-menu-btn:hover {
  background: #fef3c7; /* amber-100 */
  border-color: #d97706; /* amber-600 */
  transform: scale(1.05);
}

#mobile-menu-btn:focus {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* Mobile menu animation */
#mobile-menu {
  transition: all 0.3s ease-in-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Upload area effects */
#drop {
  transition: all 0.3s ease;
}

#drop:hover {
  transform: translateY(-2px);
}

/* Results section effects */
#result .bg-slate-800\/40 {
  transition: all 0.3s ease;
}

#result .bg-slate-800\/40:hover {
  transform: translateY(-2px);
  background: rgba(30, 41, 59, 0.5);
}

/* Backdrop blur support for older browsers */
@supports not (backdrop-filter: blur(12px)) {
  nav {
    background: rgba(15, 23, 42, 0.95);
  }
  
  #mobile-menu {
    background: rgba(30, 41, 59, 0.95);
  }
}

/* Enhanced gradient text effect for main heading */
h1 {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Subtle animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#drop {
  animation: fadeInUp 0.6s ease-out;
}

/* Button hover effects */
button {
  position: relative;
  overflow: hidden;
}

button::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: left 0.5s;
}

button:hover::before {
  left: 100%;
}

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

/* Enhanced asset preview styles */
.asset-preview {
  transition: all 0.2s ease;
}

.asset-preview:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}