/* === NEBULA BACKGROUND === */
.slidev-layout {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #1b2735, #090a0f);
}

.slidev-layout::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 180deg,
    #800020,
    #0066cc,
    #b22222,
    #0f0f1a,
    #800020
  );
  animation: nebula-shift 60s linear infinite;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}

@keyframes nebula-shift {
  0%   { transform: rotate(0deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1.2); }
}

/* === HUD CIRCLES === */
.hud-element {
  position: absolute;
  border: 1px solid rgba(0, 255, 255, 0.08);
  border-radius: 50%;
  animation: pulse-ring 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hud-element.circle-small {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
}

.hud-element.circle-big {
  width: 180px;
  height: 180px;
  top: 60%;
  left: 75%;
  animation-delay: 2s;
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.06; }
  50%      { transform: scale(1.2); opacity: 0.12; }
}

/* === HUD SCANNING LINES === */
.hud-lines::before,
.hud-lines::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100vw;
  background: linear-gradient(
    to right,
    rgba(0, 102, 204, 0) 0%,
    rgba(0, 102, 204, 0.12) 50%,
    rgba(0, 102, 204, 0) 100%
  );
  animation: scanline 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hud-lines::before {
  top: 25%;
}

.hud-lines::after {
  top: 75%;
  animation-delay: 10s;
}

@keyframes scanline {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* === SAFEGUARDING MAIN CONTENT === */
.slidev-layout > * {
  position: relative;
  z-index: 1;
}