/* Dark Mode Enhanced Styles for Esprit Créatif */

/* Smooth transitions for dark mode */
* {
  transition-property: background-color, border-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Dark mode base colors */
.dark {
  color-scheme: dark;
}

/* Card hover effects in dark mode */
.dark .card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .card:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border-color: rgba(242, 236, 212, 0.2);
  box-shadow: 0 25px 50px -12px rgba(242, 236, 212, 0.1);
}

/* Glassmorphism in dark mode */
.dark .glass {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Input fields in dark mode */
.dark input,
.dark textarea,
.dark select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(242, 236, 212, 0.5);
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Hero patterns in dark mode */
.dark .hero-pattern {
  background-image: radial-gradient(
      circle at 20% 50%,
      rgba(242, 236, 212, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(242, 236, 212, 0.06) 0%,
      transparent 50%
    );
}

/* Gradient text enhanced */
.dark .gradient-text {
  background: linear-gradient(135deg, #f2ecd4 0%, #ffd700 50%, #f2ecd4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated gradient in dark mode */
.dark .animated-gradient {
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

/* Button effects in dark mode */
.dark .btn-primary {
  background: linear-gradient(135deg, #f2ecd4 0%, #e6d5a0 100%);
  box-shadow: 0 10px 30px rgba(242, 236, 212, 0.3);
}

.dark .btn-primary:hover {
  box-shadow: 0 15px 40px rgba(242, 236, 212, 0.4);
  transform: translateY(-2px);
}

/* Image overlays in dark mode */
.dark .img-overlay::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
}

/* Scrollbar in dark mode */
.dark::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.dark::-webkit-scrollbar-thumb {
  background: #f2ecd4;
}

.dark::-webkit-scrollbar-thumb:hover {
  background: #e6d5a0;
}

/* Decorative blurs in dark mode */
.dark .decoration-blur {
  background: radial-gradient(
    circle,
    rgba(242, 236, 212, 0.15) 0%,
    transparent 70%
  );
  filter: blur(60px);
}

/* Enhanced shadows in dark mode */
.dark .shadow-enhanced {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(242, 236, 212, 0.1);
}

/* Hover glow effect */
.dark .hover-glow:hover {
  box-shadow: 0 0 30px rgba(242, 236, 212, 0.3);
}

/* Text selection in dark mode */
.dark ::selection {
  background: rgba(242, 236, 212, 0.3);
  color: white;
}

/* Border glow effect */
.dark .border-glow {
  border: 1px solid rgba(242, 236, 212, 0.2);
  box-shadow: inset 0 0 20px rgba(242, 236, 212, 0.05);
}

/* Navigation hover effects in dark mode */
.dark .nav-link:hover {
  background: rgba(242, 236, 212, 0.1);
}

/* Badge styles in dark mode */
.dark .badge {
  background: rgba(242, 236, 212, 0.1);
  border: 1px solid rgba(242, 236, 212, 0.2);
  color: #f2ecd4;
}

/* Section backgrounds in dark mode */
.dark section {
  background-attachment: fixed;
}

/* Loading animation in dark mode */
.dark .loading {
  border-color: rgba(242, 236, 212, 0.2);
  border-top-color: #f2ecd4;
}

/* Tooltip in dark mode */
.dark .tooltip {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(242, 236, 212, 0.3);
  color: white;
  backdrop-filter: blur(10px);
}

/* Card border glow on hover */
.dark .card:hover {
  box-shadow: 0 0 0 1px rgba(242, 236, 212, 0.1),
    0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(242, 236, 212, 0.05);
}

/* Pulsating glow animation */
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(242, 236, 212, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(242, 236, 212, 0.4);
  }
}

.dark .animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Shimmer effect for dark mode */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.dark .shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.01) 0%,
    rgba(242, 236, 212, 0.1) 50%,
    rgba(255, 255, 255, 0.01) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 3s infinite;
}

/* Enhanced backdrop blur */
.dark .backdrop-enhanced {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}