/* Chromatic Energy design system */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-brand: #6366f1;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

code, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.glow-violet {
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.15), 0 0 48px rgba(99, 102, 241, 0.08);
}

.glow-violet-sm {
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.12);
}

.gradient-text {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-subtle {
  background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-badge {
  background: linear-gradient(90deg, #8b5cf6, #6366f1, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
  transition: all 0.2s;
}
.btn-primary:hover {
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.35);
  filter: brightness(1.1);
}

.btn-ghost {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.card-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.card-glass-highlight {
  background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(99,102,241,0.03) 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.section-glow {
  position: relative;
}
.section-glow::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.06) 0%, transparent 70%);
  pointer-events: none;
}

input:focus, select:focus {
  border-color: #6366f1 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Scroll-triggered animations */
.scroll-hidden { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fade-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes orbit {
    from { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
    to { transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); }
  }
  @keyframes pulse-border {
    0%, 100% { border-color: rgba(139, 92, 246, 0.2); }
    50% { border-color: rgba(139, 92, 246, 0.4); }
  }

  .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
  .animate-fade-in-left { animation: fade-in-left 0.6s ease-out forwards; }
  .animate-fade-in-right { animation: fade-in-right 0.6s ease-out forwards; }
  .animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
  .animate-hero { animation: hero-fade-in 0.7s ease-out forwards; opacity: 0; }

  .animate-delay-100 { animation-delay: 100ms; }
  .animate-delay-200 { animation-delay: 200ms; }
  .animate-delay-300 { animation-delay: 300ms; }
  .animate-delay-400 { animation-delay: 400ms; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hidden { opacity: 1; }
  .animate-hero { opacity: 1; }
}