first commit

styles/background.css

@@ -0,0 +1,100 @@
+/* === 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;
+}