/* ============================================================================
   Ambient Background System
   ----------------------------------------------------------------------------
   Section-scoped atmospheric layer: grain + lines + dual glow.
   Designed for zero regression: no layout changes, no logic changes.
   Each section hosts its own <div class="section-noise ..."> as the first
   child. The noise sits behind all other content via a local stacking
   context, so existing positioned/animated elements are untouched.
   ============================================================================ */

/* ---- Stacking scope ------------------------------------------------------ */
/* Give each section a private stacking context so the ambient layer (z-index:-1)
   stays contained within the section without escaping behind the body. */
#home,
#about,
#projects,
#education,
#contact {
  position: relative;
  isolation: isolate;
}

/* ---- Noise container ----------------------------------------------------- */
.section-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.section-noise > * {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

/* ============================================================================
   Layer 1 — Grain
   Fine monochrome noise via inline SVG (cheap, no HTTP request).
   ============================================================================ */
.noise-grain {
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* ============================================================================
   Layer 2 — Lines
   Subtle diagonal hairlines for structure and depth.
   ============================================================================ */
.noise-lines {
  opacity: .05;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0,
    rgba(255, 255, 255, 0.6) 1px,
    transparent 1px,
    transparent 9px
  );
  mix-blend-mode: overlay;
}

/* ============================================================================
   Layer 3 — Glow (two soft orbs per section)
   Only transform/opacity are animated. Blur is static.
   ============================================================================ */
.noise-glow {
  opacity: .08;
  filter: blur(60px);
  border-radius: 50%;
  inset: auto;
  width: 55vmin;
  height: 55vmin;
  mix-blend-mode: screen;
}

.noise-glow-1 {
  top: -10%;
  left: -8%;
  animation: ambient-drift-a 22s ease-in-out infinite;
}

.noise-glow-2 {
  bottom: -12%;
  right: -10%;
  width: 65vmin;
  height: 65vmin;
  animation: ambient-drift-b 28s ease-in-out infinite;
}

@keyframes ambient-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .08; }
  50%      { transform: translate3d(4%, -3%, 0) scale(1.08); opacity: .1; }
}

@keyframes ambient-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .08; }
  50%      { transform: translate3d(-3%, 4%, 0) scale(1.06); opacity: .11; }
}

/* ============================================================================
   Section tinting
   Low-saturation hues per section, consistent with page identity.
   ============================================================================ */

/* Home — deep purple */
.home-noise .noise-glow-1 {
  background: radial-gradient(circle at center, rgba(140, 90, 230, 0.9) 0%, rgba(140, 90, 230, 0) 65%);
}
.home-noise .noise-glow-2 {
  background: radial-gradient(circle at center, rgba(90, 60, 180, 0.9) 0%, rgba(90, 60, 180, 0) 65%);
}

/* About — cool cyan/white */
.about-noise .noise-glow-1 {
  background: radial-gradient(circle at center, rgba(170, 230, 255, 0.9) 0%, rgba(170, 230, 255, 0) 65%);
}
.about-noise .noise-glow-2 {
  background: radial-gradient(circle at center, rgba(220, 240, 255, 0.9) 0%, rgba(220, 240, 255, 0) 65%);
}

/* Projects — green/teal */
.projects-noise .noise-glow-1 {
  background: radial-gradient(circle at center, rgba(80, 200, 140, 0.9) 0%, rgba(80, 200, 140, 0) 65%);
}
.projects-noise .noise-glow-2 {
  background: radial-gradient(circle at center, rgba(60, 180, 170, 0.9) 0%, rgba(60, 180, 170, 0) 65%);
}

/* Education — lavender/magenta */
.education-noise .noise-glow-1 {
  background: radial-gradient(circle at center, rgba(220, 180, 230, 0.9) 0%, rgba(220, 180, 230, 0) 65%);
}
.education-noise .noise-glow-2 {
  background: radial-gradient(circle at center, rgba(200, 140, 210, 0.9) 0%, rgba(200, 140, 210, 0) 65%);
}

/* Contact — warm amber/brown */
.contact-noise .noise-glow-1 {
  background: radial-gradient(circle at center, rgba(240, 180, 110, 0.9) 0%, rgba(240, 180, 110, 0) 65%);
}
.contact-noise .noise-glow-2 {
  background: radial-gradient(circle at center, rgba(170, 110, 70, 0.9) 0%, rgba(170, 110, 70, 0) 65%);
}

/* ============================================================================
   Accessibility & performance
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .noise-glow,
  .noise-glow-1,
  .noise-glow-2 {
    animation: none;
  }
}

/* Lighter cost on small screens: drop grain/lines opacity a touch and
   reduce blur so mobile GPUs stay cool. */
@media (max-width: 640px) {
  .noise-grain { opacity: .025; }
  .noise-lines { opacity: .035; }
  .noise-glow  { filter: blur(40px); opacity: .07; }
}