/*
 * style.css
 * This stylesheet provides a subtle, animated particle background.
 * No other layout changes are included.
 */

body {
  /* A light, pinkish-grey base color for the background */
  background-color: #FAF7F3;
  
  /* * Create particles using multiple radial gradients.
   * Each gradient acts as a layer of particles. We have:
   * - Small, semi-transparent pink circles
   * - Larger, semi-transparent pink circles
   * - Small, semi-transparent white circles
   * - etc.
   */
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(26, 2, 11, 0.2) 0%, transparent 3%),
    radial-gradient(circle at 80% 10%, rgba(32, 22, 26, 0.2) 0%, transparent 4%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 2%),
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 3%),
    radial-gradient(circle at 90% 90%, rgba(0, 0, 0, 0.1) 0%, transparent 5%);

  /* * Set the size of each background layer. 
   * Larger sizes mean fewer, bigger particles on the screen.
   */
  background-size: 
    30em 30em,
    40em 40em,
    20em 20em,
    35em 35em,
    50em 50em;
    
  /* Apply the animation */
  animation: drift 45s linear infinite alternate;
}

/* Keyframes for the particle drift animation */
@keyframes drift {
  from {
    /* Starting position for each background layer */
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    /* * Ending position for each layer. 
     * By moving each layer differently, we create a parallax effect where particles
     * appear to drift at different speeds and in different directions.
     */
    background-position: 100em 50em, 80em -40em, -60em 30em, 40em -70em, -50em 90em;
  }
}

/* Ensure main content appears above the animated background */
main, nav, footer, header, section {
  position: relative;
  z-index: 1;
}