/* =====================================================================
   Backgrounds
   ===================================================================== */

.bg--3 { 
  min-height: 60vh;
  background: 
    /* black fade top */
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%),
    /* black fade bottom */
    linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%),

    /* aurora gradients */
    radial-gradient(circle at 20% 30%, rgba(0, 200, 255, 0.6), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(0, 255, 180, 0.5), transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(180, 0, 255, 0.5), transparent 50%),
    radial-gradient(circle at 70% 90%, rgba(255, 0, 255, 0.4), transparent 60%),

    /* black fallback */
    #000;

}
.bg--4 { 
  min-height: 60vh;
  background: 
     /* black fade at top */
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%),
    /* black fade at bottom */
    linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%),

    /* aurora blobs */
    radial-gradient(circle at 25% 20%, rgba(255, 220, 150, 0.35), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(80, 255, 200, 0.25), transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(200, 100, 255, 0.35), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(120, 150, 255, 0.25), transparent 60%),

    /* deep teal fallback */
    #0a1a1f;
}
.bg--5 { 
  min-height: 80vh; 
  background: 
    /* black fade top */
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%),
    /* black fade bottom */
    linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%),

    /* aurora glows */
    radial-gradient(circle at 75% 25%, rgba(140, 200, 40, 0.45), transparent 60%), /* green-yellow glow top-right */
    radial-gradient(circle at 20% 90%, rgba(80, 150, 255, 0.45), transparent 55%), /* blue glow bottom-left */

    /* navy base */
    #0a0f14;
}
.bg--6{
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("icons/pexels-bob-price-252175-764880.jpg");
  background-size: cover;
  background-position: center;
}

.bg--7{
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://plus.unsplash.com/premium_photo-1675355675464-2deabb1f893b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center;
}