/* Dark Purple/Blue Galaxy Lightning Theme */

/* Galaxy background */
body {
  background: 
    radial-gradient(ellipse at top, #1e0a3c 0%, #0a0e27 100%),
    radial-gradient(ellipse at bottom, #0f1729 0%, #000000 100%) !important;
  background-attachment: fixed !important;
  position: relative;
}

/* Animated starfield and nebula effects */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(circle at 30% 40%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(65, 105, 225, 0.15) 0%, transparent 50%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 600px 600px, 800px 800px;
  background-position: 0% 0%, 40% 60%, 80% 20%, 10% 80%, 50% 50%, 0% 0%, 100% 100%;
  animation: galaxyFloat 120s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Lightning effect overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(138, 43, 226, 0.1) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(65, 105, 225, 0.1) 50%, transparent 100%);
  background-size: 200% 200%, 200% 200%;
  animation: lightningPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

@keyframes galaxyFloat {
  0%, 100% { 
    background-position: 0% 0%, 40% 60%, 80% 20%, 10% 80%, 50% 50%, 0% 0%, 100% 100%;
    opacity: 0.8;
  }
  50% { 
    background-position: 100% 100%, 60% 40%, 20% 80%, 90% 20%, 30% 70%, 100% 100%, 0% 0%;
    opacity: 1;
  }
}

@keyframes lightningPulse {
  0%, 100% { 
    opacity: 0.2;
    background-position: 0% 0%, 0% 0%;
  }
  50% { 
    opacity: 0.4;
    background-position: 100% 100%, 100% 100%;
  }
}

/* Global improvements */
* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif !important;
}

/* Make sure content is above background */
main, header, #page, [class*="container"] {
  position: relative;
  z-index: 1;
}

/* Category headers - electric purple/blue */
h2 {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 1.5rem !important;
  background: linear-gradient(90deg, #8a2be2, #4169e1, #8a2be2) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3s linear infinite;
  filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.5));
}

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

/* Service cards - cosmic glass effect */
a[class*="service"], 
div[class*="service"] {
  background: rgba(20, 20, 50, 0.4) !important;
  border: 1px solid rgba(138, 43, 226, 0.3) !important;
  border-radius: 12px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 
    0 4px 20px rgba(138, 43, 226, 0.1),
    inset 0 0 20px rgba(138, 43, 226, 0.05) !important;
  position: relative;
  overflow: hidden;
}

/* Lightning effect on hover */
a[class*="service"]::before, 
div[class*="service"]::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(138, 43, 226, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

a[class*="service"]:hover, 
div[class*="service"]:hover {
  background: rgba(30, 20, 60, 0.7) !important;
  border-color: rgba(138, 43, 226, 0.6) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 
    0 12px 40px rgba(138, 43, 226, 0.4),
    0 0 60px rgba(65, 105, 225, 0.3),
    inset 0 0 30px rgba(138, 43, 226, 0.15) !important;
}

a[class*="service"]:hover::before, 
div[class*="service"]:hover::before {
  opacity: 1;
  left: 100%;
}

/* Search bar - cosmic purple */
input[type="search"],
input[placeholder*="Search"] {
  background: rgba(20, 20, 50, 0.6) !important;
  border: 1px solid rgba(138, 43, 226, 0.4) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(12px) !important;
  color: #e0e0ff !important;
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.1) !important;
}

input[type="search"]:focus,
input[placeholder*="Search"]:focus {
  background: rgba(30, 20, 60, 0.8) !important;
  border-color: rgba(138, 43, 226, 0.8) !important;
  box-shadow: 
    0 0 30px rgba(138, 43, 226, 0.5),
    0 0 15px rgba(65, 105, 225, 0.3),
    inset 0 0 15px rgba(138, 43, 226, 0.2) !important;
}

input[type="search"]::placeholder {
  color: rgba(138, 43, 226, 0.5) !important;
}

/* Status indicators - electric glow */
div[class*="status"] {
  filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.8));
}

/* Documentation/Bookmarks links */
a[href*="http"] {
  background: rgba(20, 20, 50, 0.4) !important;
  border: 1px solid rgba(138, 43, 226, 0.2) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
}

a[href*="http"]:hover {
  background: rgba(30, 20, 60, 0.7) !important;
  border-color: rgba(138, 43, 226, 0.5) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3) !important;
}

/* Scrollbar - cosmic purple */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 10, 30, 0.5);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a2be2, #4169e1);
  border-radius: 5px;
  border: 2px solid rgba(10, 10, 30, 0.5);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.8);
}

/* Top header - cosmic glass */
header {
  backdrop-filter: blur(20px) !important;
  background: rgba(15, 15, 40, 0.7) !important;
  border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
  box-shadow: 0 4px 30px rgba(138, 43, 226, 0.2) !important;
}

/* Widget backgrounds */
div[class*="widget"] {
  background: rgba(20, 20, 50, 0.5) !important;
  border: 1px solid rgba(138, 43, 226, 0.2) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.1) !important;
}

/* Text glow for better visibility */
h3, p, span {
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}