/* =========================
   GLOBAL BACKGROUND SYSTEM
========================= */

body{
  position: relative;
  background: #060607;
  color: var(--text);
  overflow-x: hidden;
}

/* =========================
   BASE GRADIENT LAYER
========================= */

body::before{
  content:"";
  position: fixed;
  inset:0;
  z-index:-3;

  background:
    radial-gradient(circle at 20% 20%, rgba(212,175,55,0.12), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(37,99,235,0.12), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(168,85,247,0.10), transparent 50%),
    linear-gradient(180deg,#050506,#0b0b0d 40%,#050506 100%);
}

/* =========================
   ANIMATED GLOW BLOBS
========================= */

body::after{
  content:"";
  position: fixed;
  width: 600px;
  height: 600px;
  top: -150px;
  left: -150px;
  z-index:-2;

  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
  filter: blur(120px);

  animation: floatGlow 18s ease-in-out infinite alternate;
}

@keyframes floatGlow{
  0%{
    transform: translate(0,0) scale(1);
  }
  50%{
    transform: translate(300px,200px) scale(1.2);
  }
  100%{
    transform: translate(600px,50px) scale(1);
  }
}

/* =========================
   SECOND GLOW (RIGHT SIDE)
========================= */

.bg-glow{
  position: fixed;
  width: 500px;
  height: 500px;
  bottom: -120px;
  right: -120px;
  z-index:-2;

  background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 70%);
  filter: blur(120px);

  animation: floatGlow2 22s ease-in-out infinite alternate;
}

@keyframes floatGlow2{
  0%{
    transform: translate(0,0) scale(1);
  }
  50%{
    transform: translate(-250px,-150px) scale(1.15);
  }
  100%{
    transform: translate(-400px,-50px) scale(1);
  }
}

/* =========================
   NOISE TEXTURE (PREMIUM)
========================= */

.noise{
  position: fixed;
  inset:0;
  z-index:-1;
  opacity: 0.04;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* =========================
   SECTION GLASS EFFECT
========================= */

section{
  position: relative;
  z-index: 1;
}

/* =========================
   GLASS BACKGROUND CARDS
========================= */

.glass{
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* =========================
   SCROLL FADE EFFECT
========================= */

.fade-section{
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.fade-section.active{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media(max-width:768px){

  body::after{
    width: 300px;
    height: 300px;
    filter: blur(80px);
  }

  .bg-glow{
    width: 300px;
    height: 300px;
    filter: blur(80px);
  }

  .noise{
    opacity: 0.03;
  }

}

#bgCanvas{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  pointer-events: none;
}