:root {
  --bg-dark: #050713;
  --accent-pink: #ec4899;
  --accent-purple: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-green: #10b981;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background-color: var(--bg-dark); }

.ambient-glow {
  position: fixed;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(140px);
  opacity: 0.3;
  animation: float-glow 12s infinite alternate ease-in-out;
}

.glow-1 { top: -15%; left: -10%; background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); }
.glow-2 { bottom: -15%; right: -10%; background: radial-gradient(circle, #ec4899 0%, transparent 70%); }

@keyframes float-glow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, 4%) scale(1.08); }
}

.grid-overlay {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 1;
}

.center-container {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glass-orb-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  animation: rotate-ring 25s linear infinite;
}

.pulse-ring {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid rgba(236, 72, 153, 0.2);
  animation: pulse-expand 3s ease-out infinite;
}

@keyframes rotate-ring { 100% { transform: rotate(360deg); } }
@keyframes pulse-expand {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

.glass-orb {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), rgba(18, 22, 41, 0.8));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-spark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  box-shadow: 0 0 25px #ec4899, 0 0 40px #8b5cf6;
  animation: spark-beat 2s ease-in-out infinite alternate;
}

@keyframes spark-beat {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 1; }
}