/* style.css - Base styles and reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(145deg, #0e0a1f 0%, #1a0f2e 50%, #0e0a1f 100%);
  color: #ffffff;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Dynamic animated background */
.bg-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-glow::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatGlow 15s ease-in-out infinite alternate;
}

.bg-glow::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(75, 0, 130, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatGlow 18s ease-in-out infinite alternate-reverse;
}


/* Grid pattern overlay */
.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(138, 43, 226, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 43, 226, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  animation: gridPulse 10s ease-in-out infinite;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  100% { transform: translate(-5%, 5%) scale(1.1); opacity: 0.7; }
}

@keyframes particleFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
  50% { transform: translate(30px, -20px) scale(1.1); opacity: 0.4; }
  100% { transform: translate(-20px, 15px) scale(0.9); opacity: 0.2; }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

/* Starfield background */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 160px 20px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 200px 60px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 240px 90px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 280px 30px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 320px 70px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 360px 40px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 400px 80px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 440px 20px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 480px 60px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 520px 90px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 560px 30px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 600px 70px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 640px 40px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 680px 80px, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 720px 20px, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(1px 1px at 760px 60px, rgba(255, 255, 255, 0.6) 1px, transparent 2px);
  background-size: 800px 800px;
  background-repeat: repeat;
  animation: starfieldMove 100s linear infinite;
}

.starfield::after {
  background-image: 
    radial-gradient(1px 1px at 10px 50px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 50px 10px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 80px 80px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 120px 30px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 150px 60px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 190px 10px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 220px 70px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 260px 40px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 290px 90px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 330px 20px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 370px 50px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 410px 80px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 450px 30px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 490px 60px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 530px 10px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 570px 70px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 610px 40px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 650px 90px, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(1px 1px at 690px 20px, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(2px 2px at 730px 50px, rgba(255, 255, 255, 0.5) 1px, transparent 2px);
  background-size: 800px 800px;
  background-repeat: repeat;
  animation: starfieldMove 120s linear infinite reverse;
  opacity: 0.7;
}

@keyframes starfieldMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-400px, -400px);
  }
}