/* Ambient light stays decorative: dark reading zones, brighter edges and no extra renderer. */
.site-backdrop {
  background: #06111e;
}

.aurora-field {
  inset: -12%;
  opacity: .74;
}

.aurora-blue {
  left: 37%;
  top: -19%;
  width: 84%;
  height: 92%;
  background: radial-gradient(ellipse, #1275c087, #123c7954 36%, transparent 69%);
  animation-duration: 23s;
}

.aurora-violet {
  left: -43%;
  top: 30%;
  width: 79%;
  height: 92%;
  opacity: .72;
  background: radial-gradient(ellipse, #5a37b77a, #34226c40 39%, transparent 70%);
  animation-duration: 29s;
}

.aurora-cyan {
  left: 56%;
  top: 41%;
  width: 76%;
  height: 81%;
  background: radial-gradient(ellipse, #06839580, #0c4b6254 35%, transparent 70%);
  animation-duration: 26s;
}

.backdrop-shade {
  background:
    radial-gradient(ellipse at 35% 38%, #050d17a6, #07111b47 49%, transparent 81%),
    linear-gradient(90deg, #050c1666, #050c163d 28%, #050c160d 77%, #050c1655),
    linear-gradient(180deg, #04101d26, transparent 43%, #04101d55);
}

.backdrop-grid {
  opacity: .36;
  background-size: 100px 100px;
  background-image:
    linear-gradient(#89d7fb0e 1px, transparent 1px),
    linear-gradient(90deg, #89d7fb0e 1px, transparent 1px);
  mask-image: linear-gradient(115deg, transparent 5%, #0002 37%, #000b 78%, #000);
}

.ambient-canvas {
  opacity: .43;
  mask-image: linear-gradient(90deg, #0008, #0004 31%, #000b 70%, #000);
}

/* Static halos give every section its own light without continuous offscreen work. */
.section {
  position: relative;
  isolation: isolate;
  border-top-color: #85d2f023;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 94% 25%, #0c80a422, transparent 53%);
}

.section:nth-of-type(odd)::before {
  background: radial-gradient(ellipse at 5% 75%, #40409a24, transparent 58%);
}

.section.services-section::before {
  background:
    radial-gradient(ellipse at 97% 8%, #1088b02e, transparent 51%),
    radial-gradient(ellipse at 3% 100%, #3a2e8226, transparent 52%);
}

.section.projects-section::before {
  background: radial-gradient(ellipse at 50% 55%, #17628929, transparent 70%);
}

.section.automation-section::before {
  background:
    radial-gradient(ellipse at 9% 57%, #137d6422, transparent 46%),
    radial-gradient(ellipse at 84% 35%, #1769b733, transparent 60%);
}

.section.about::before {
  background: radial-gradient(ellipse at 97% 68%, #18557529, transparent 58%);
}

.section.contact::before {
  background:
    radial-gradient(ellipse at 19% 100%, #4545a138, transparent 60%),
    radial-gradient(ellipse at 90% 3%, #10a6c035, transparent 57%);
}

.site-backdrop.is-paused .aurora {
  animation-play-state: paused;
  will-change: auto;
}

@media (max-width: 760px) {
  .aurora-field { opacity: .57; }
  .aurora-blue { left: 18%; top: -16%; width: 113%; }
  .aurora-violet { left: -65%; top: 44%; opacity: .58; }
  .aurora-cyan { left: 31%; top: 49%; width: 104%; }
  .backdrop-grid { opacity: .23; background-size: 86px 86px; }
  .ambient-canvas { display: none; }
  .section::before { opacity: .7; }
  .backdrop-shade {
    background: linear-gradient(90deg, #06111e80, #06111e33 72%, #06111e4d);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none !important; will-change: auto; }
  .aurora-field, .backdrop-grid { transform: none; }
  .ambient-canvas { display: none; }
}

body.reduced-motion .aurora { animation: none !important; will-change: auto; }
body.reduced-motion .aurora-field,
body.reduced-motion .backdrop-grid { transform: none; }
body.reduced-motion .ambient-canvas { display: none; }