:root {
  --primary-dark: #1a1a2e;
  --primary-darker: #0d0d1a;
  --accent-green: #00ff95;
  --accent-blue: #00e4ff;
  --text-dark: #0b0b0b;
  --text-blue: #1a1a2e;
  --white: #ffffff;
  --light-bg: #f7f7f7;
  --container-width: 1100px;
  --border-radius: 22px;
  --transition: 0.28s;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes rotate180 {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

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

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 180, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0, 255, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 180, 0); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes modalSpring {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Animation Classes */
.animated {
  animation-fill-mode: both;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.slide-in {
  animation: slideIn 0.4s ease-out forwards;
}

.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-float {
  animation: logoFloat 3s ease-in-out infinite;
}

.pulse {
  animation: pulse 2s infinite;
}