/**
 * STYLE-BACKGROUND.CSS
 * Manages the website background styling:
 * - Sets up the gradient background for the entire site
 * - Implements the mouse-following spotlight effect
 * - Configures the radial gradient for the spotlight
 * - Ensures proper positioning and z-index for layering
 */

/* style-background.css */

/* Apply background to html instead of body */
html {
  min-height: 100%; /* Ensure at least full viewport height */
  margin: 0;
  background-image: linear-gradient(to bottom, #e0e0e0, #b2b2b2);
  background-attachment: fixed; /* Keep the background fixed when scrolling */
  background-repeat: no-repeat; /* Prevent the background from repeating */
  font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', 'Futura', 'Trebuchet MS', Arial, sans-serif;
  scroll-behavior: smooth;
  position: relative; /* Added for positioning the spotlight */
  /* overflow: hidden; */ /* Removed to allow scrollbars */
}

/* Ensure body takes full height */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the body is at least as tall as the viewport */
}


/* Spotlight effect */
#mouseSpotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks to pass through */
  background: radial-gradient(
    circle 800px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0) 80%
  );
  /* Removed the transition as animation is handled via JavaScript */
  /* transition: background 0.1s ease-out; */
  z-index: -1; /* Ensure it's on top of other elements */
}