/* Ambient background glow — a couple of soft, blurred teal glow dots that
   drift slowly on their own, styled after the existing cursor-follow glow
   (.cursor-glow in effects.css) but self-animating instead of mouse-driven.
   Fixed to the viewport so it shows through any light section on any page. */

.glow-layer{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.glow-dot{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(19,180,157,.16), transparent 70%);
  animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate;
}
.glow-dot.g1{ width:420px; height:420px; top:6%; left:8%; animation-name:glowFloat1; animation-duration:28s; }
.glow-dot.g2{ width:520px; height:520px; top:58%; left:72%; animation-name:glowFloat2; animation-duration:36s; }
.glow-dot.g3{ width:360px; height:360px; top:78%; left:18%; animation-name:glowFloat3; animation-duration:32s; }

@keyframes glowFloat1{ 0%{transform:translate(0,0)} 100%{transform:translate(130px,90px)} }
@keyframes glowFloat2{ 0%{transform:translate(0,0)} 100%{transform:translate(-150px,-80px)} }
@keyframes glowFloat3{ 0%{transform:translate(0,0)} 100%{transform:translate(100px,-120px)} }

@media (prefers-color-scheme: dark){
  .glow-dot{ background:radial-gradient(circle, rgba(19,180,157,.30), transparent 70%); }
}
@media (prefers-reduced-motion: reduce){
  .glow-dot{ animation:none; }
}