@keyframes spinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes driftA {
  0%   { transform: translate(0px,0px) scale(1); }
  50%  { transform: translate(40px,-50px) scale(1.08); }
  100% { transform: translate(0px,0px) scale(1); }
}
@keyframes driftB {
  0%   { transform: translate(0px,0px) scale(1); }
  50%  { transform: translate(-40px,35px) scale(1.05); }
  100% { transform: translate(0px,0px) scale(1); }
}

#abs-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#abs-bg-img {
  position: absolute;
  inset: 0;
  background-image: image-set(
    url('/images/background-800w-q70.webp') 1x,
    url('/images/background-1200w-q75.webp') 1.5x,
    url('/images/background-1600w-q80.webp') 2x
  );
  background-size: cover;
  background-position: center;
}
#abs-blob1 {
  position: absolute;
  top: -15%; left: -10%;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,80,0.22) 0%, transparent 65%);
  animation: driftA 22s ease-in-out infinite;
}
#abs-blob2 {
  position: absolute;
  bottom: -15%; right: -10%;
  width: 65vw; height: 65vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,100,255,0.16) 0%, transparent 65%);
  animation: driftB 28s ease-in-out infinite;
}
#abs-blob3 {
  position: absolute;
  top: 20%; left: 35%;
  width: 45vw; height: 45vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,160,0.10) 0%, transparent 65%);
  animation: driftA 34s ease-in-out infinite reverse;
}
#abs-r1w {
  position: absolute;
  top: 50%; left: 50%;
  width: 75vw; height: 75vw;
  margin-left: -37.5vw; margin-top: -37.5vw;
  transform: rotate3d(1,0.3,0,62deg);
}
#abs-r1 {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0,220,100,0.30);
  animation: spinCW 60s linear infinite;
}
#abs-r2w {
  position: absolute;
  top: 50%; left: 50%;
  width: 55vw; height: 55vw;
  margin-left: -27.5vw; margin-top: -27.5vw;
  transform: rotate3d(0.5,1,0.2,55deg);
}
#abs-r2 {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(40,120,255,0.30);
  animation: spinCCW 45s linear infinite;
}
#abs-r3w {
  position: absolute;
  top: 50%; left: 50%;
  width: 95vw; height: 95vw;
  margin-left: -47.5vw; margin-top: -47.5vw;
  transform: rotate3d(0.8,0.5,0.3,48deg);
}
#abs-r3 {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0,180,160,0.22);
  animation: spinCW 90s linear infinite;
}
#abs-r4w {
  position: absolute;
  top: 50%; left: 50%;
  width: 35vw; height: 35vw;
  margin-left: -17.5vw; margin-top: -17.5vw;
  transform: rotate3d(1,0.2,0.5,70deg);
}
#abs-r4 {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0,220,100,0.22);
  animation: spinCCW 32s linear infinite;
}
#abs-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(100,200,140,0.09) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.5;
}
#abs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(2,8,18,0.18) 0%, rgba(2,10,14,0.22) 100%);
}