/*
================================================================================
  FINAL, SIMPLE & UNIQUE BACKGROUNDS (REVISED SET)
================================================================================
  A clean, simple set of backgrounds based on your direct feedback.
*/

/* --- 1. Default (Pulsing Grid - FIXED) --- */
/* The background now pulses on a separate layer, preventing scrollbars. */
@keyframes default-pulse {
  0%   { background-color: #080808; transform: scale(1); }
  50%  { background-color: #1a1a1a; transform: scale(1.02); } /* Fades to grey, zooms slightly */
  100% { background-color: #080808; transform: scale(1); }
}

.default-bg {
  /* The body no longer has the background image or animation */
  background-color: #080808;
  position: relative; /* Required for the pseudo-element */
}

.default-bg::before {
  content: '';
  position: fixed; /* Sticks to the viewport, behind content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Places it behind all your text and sections */
  
  /* All background and animation styles are moved here */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: default-pulse 8s ease-in-out infinite;
}

/* --- 2. Matrix Grid (Scrolling) --- */
/* The working, visible green grid that slowly scrolls. */
@keyframes matrix-grid-scroll {
  from { background-position: 0 0; }
  to { background-position: 50px 50px; }
}
.matrix-grid-bg {
  background-color: #000;
  background-image:
    repeating-linear-gradient(to right, rgba(0, 255, 0, 0.4) 0, rgba(0, 255, 0, 0.4) 1px, transparent 1px, transparent 50px),
    repeating-linear-gradient(to bottom, rgba(0, 255, 0, 0.4) 0, rgba(0, 255, 0, 0.4) 1px, transparent 1px, transparent 50px);
  animation: matrix-grid-scroll 20s linear infinite;
}
.matrix-grid-bg * { text-shadow: 0 0 5px #000; }

/* --- 3. Starfield (Moving in Space) --- */
/* A simple, multi-layered scrolling starfield for a "cyberspace" feel. */
@keyframes move-stars { to { background-position: -1000px 500px; } }
.starfield-bg {
  background-color: #000008;
  background-image:
    radial-gradient(1px 1px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px, rgba(255,255,255,0.4), transparent);
  background-repeat: repeat;
  background-size: 150px 150px, 300px 300px;
  animation: move-stars 100s linear infinite;
}
.starfield-bg * { text-shadow: 0 0 5px #000; }

/* --- 4. Deep Space (Depth with Shadow) --- */
/* A pure black background with an inner shadow to create a sense of depth. */
.deep-space-bg {
  background-color: #000;
  box-shadow: inset 0 0 100px 30px rgba(0, 0, 0, 0.7);
}

/* --- 5. Circuit Board (Static) --- */
/* A simple, non-animated circuit board pattern. */
.circuit-board-bg {
  background-color: #001a00;
  background-image:
    linear-gradient(rgba(0, 255, 0, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
  background-size: 75px 75px, 75px 75px, 25px 25px, 25px 25px;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0;
}
.circuit-board-bg * { text-shadow: 0 0 5px #000; }

/* --- 6. Scrolling Code (NEW) --- */
/* An illusion of scrolling lines of code, like a terminal feed. */
@keyframes scrolling-code {
  from { background-position: 0 0; }
  to { background-position: 0 -200px; } /* Scrolls upwards */
}
.scrolling-code-bg {
  background-color: #05080a; /* Dark blue-grey */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 5px, /* Gaps between lines */
    rgba(255, 255, 255, 0.1) 5px,
    rgba(255, 255, 255, 0.1) 10px /* The "text" lines */
  );
  background-size: 100% 200px;
  animation: scrolling-code 25s linear infinite;
}
.scrolling-code-bg * { text-shadow: 0 0 5px #000; }