* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #060a14;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #fff;
  position: relative;
  cursor: none;
}

/* Sterne */
.stars span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: twinkle 3s infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .08; }
  50%      { opacity: .7;  }
}

/* Canvas */
#network {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* Cursor */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 12px #a78bfa, 0 0 30px rgba(167,139,250,.4);
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  transition: transform .1s, box-shadow .3s;
}
.cursor.pulse {
  transform: translate(-50%, -50%) scale(3);
  box-shadow: 0 0 20px #a78bfa, 0 0 60px rgba(167,139,250,.6);
}

/* Headline */
.headline {
  position: relative; z-index: 3;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255,255,255,.9);
  margin-bottom: 1.6rem;
  animation: rise .9s cubic-bezier(.2,.8,.3,1) both;
  pointer-events: none;
}

/* Progress */
.progress {
  position: relative; z-index: 3;
  width: min(320px, 70vw);
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  animation: rise .9s cubic-bezier(.2,.8,.3,1) .15s both;
  pointer-events: none;
}
.progress-fill {
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8);
  animation: load 3.5s ease-in-out infinite;
}
@keyframes load {
  0%   { width: 8%;  margin-left: 0; }
  50%  { width: 45%; margin-left: 25%; }
  100% { width: 8%;  margin-left: 92%; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hint */
.hint {
  position: absolute;
  bottom: 3.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
  animation: fade-hint 2s 1.5s both;
  pointer-events: none;
}
@keyframes fade-hint {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Footer */
.footer {
  position: absolute;
  bottom: 1.8rem; z-index: 3;
  font-size: .85rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .3px;
  animation: rise .9s cubic-bezier(.2,.8,.3,1) .3s both;
}
.footer a {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.footer a:hover { color: #7dd3fc; }