/* =====================================================
AegisFlow — styles.css
===================================================== */

/* ---------- Google Fonts are loaded in index.html ---------- */

/* ---------- Tailwind custom config (must stay in HTML <script > ) ---------- */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  box-sizing: border-box;
}

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

.font-heading {
  font-family: 'Outfit', sans-serif;
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
  }
  
  50% {
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.3);
  }
}

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

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-8px);
  }
}

/* ---------- Animation utilities ---------- */
.fade-up {
  animation: fadeUp 0.7s ease-out both;
}

.fade-up-d1 {
  animation-delay: 0.1s;
}

.fade-up-d2 {
  animation-delay: 0.2s;
}

.fade-up-d3 {
  animation-delay: 0.3s;
}

.fade-up-d4 {
  animation-delay: 0.4s;
}

.fade-up-d5 {
  animation-delay: 0.5s;
}

.pulse-card {
  animation: pulse-glow 3s ease-in-out infinite;
}

.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* ---------- Glass card ---------- */
.glass-card {
  background: linear-gradient(135deg, rgba(13, 19, 33, 0.8), rgba(26, 35, 64, 0.5));
  border: 1px solid rgba(16, 185, 129, 0.12);
  backdrop-filter: blur(10px);
}

.glass-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

/* ---------- Gradient text ---------- */
.gradient-text {
  background: linear-gradient(135deg, #10B981, #06B6D4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Bar shimmer ---------- */
.bar-shimmer {
  background-size: 200% 100%;
  background-image: linear-gradient(
  90deg,
  transparent 0%,
  rgba(255, 255, 255, 0.08) 50%,
  transparent 100%
  );
  animation: shimmer 3s infinite;
}

/* ---------- Hero grid background ---------- */
.hero-grid {
  background-image: linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---------- Step connector ---------- */
.step-connector {
  position: relative;
}

.step-connector::after {
  content: '';
  position: absolute;
  top: 32px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #10B981, rgba(6, 182, 212, 0.3));
}

.step-connector:last-child::after {
  display: none;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #080C14;
}

::-webkit-scrollbar-thumb {
  background: #1A2340;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #10B981;
}

/* ---------- Nav link underline ---------- */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #10B981;
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}