/* Blue spheres visual layer and animations */
.sphere-layer{
  position:absolute;
  top:0;left:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  overflow:hidden;
}
.sphere{position:absolute;border-radius:50%;filter:blur(18px);opacity:0.95;mix-blend-mode:screen}
.s1{width:180px;height:180px;left:10%;top:5%;background:radial-gradient(circle at 30% 30%, #7fc3ff 0%, #2b8cff 30%, rgba(43,140,255,0.06) 60%, transparent 100%);transform:translateZ(0)}
.s2{width:140px;height:140px;left:78%;top:12%;background:radial-gradient(circle at 40% 40%, #6bb0ff 0%, #1d6fe0 45%, transparent 90%)}
.s3{width:110px;height:110px;left:38%;bottom:6%;background:radial-gradient(circle at 50% 50%, #a6d8ff 0%, #4ca8ff 40%, transparent 90%)}
.s4{width:80px;height:80px;left:72%;bottom:12%;background:radial-gradient(circle at 50% 50%, #cfe9ff 0%, #7fbfff 50%, transparent 90%)}
.s5{width:160px;height:160px;left:22%;top:35%;background:radial-gradient(circle at 40% 40%, #7ad1ff 0%, #3a9dff 35%, transparent 90%)}
.s6{width:90px;height:90px;left:60%;top:40%;background:radial-gradient(circle at 50% 50%, #a3e0ff 0%, #4faeff 40%, transparent 90%)}
.s7{width:130px;height:130px;left:15%;top:65%;background:radial-gradient(circle at 35% 35%, #89c8ff 0%, #2d79e5 45%, transparent 90%)}
.s8{width:70px;height:70px;left:85%;top:55%;background:radial-gradient(circle at 50% 50%, #c9f0ff 0%, #7ec7ff 50%, transparent 90%)}
.s9{width:100px;height:100px;left:50%;top:80%;background:radial-gradient(circle at 50% 50%, #b2e3ff 0%, #5ab0ff 40%, transparent 90%)}
.s10{width:140px;height:140px;left:30%;top:80%;background:radial-gradient(circle at 40% 40%, #8dcfff 0%, #3b8eea 40%, transparent 90%)}

/* floating animation */
@keyframes floaty{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-28px) rotate(8deg)}
  100%{transform:translateY(0) rotate(0)}
}
.s1{animation:floaty 5.5s ease-in-out infinite}
.s2{animation:floaty 6.2s ease-in-out infinite;animation-delay:1.1s}
.s3{animation:floaty 5s ease-in-out infinite;animation-delay:-0.75s}
.s4{animation:floaty 7s ease-in-out infinite;animation-delay:-1.4s}
.s5{animation:floaty 6.8s ease-in-out infinite;animation-delay:-0.9s}
.s6{animation:floaty 5.8s ease-in-out infinite;animation-delay:-0.4s}
.s7{animation:floaty 6.5s ease-in-out infinite;animation-delay:-0.2s}
.s8{animation:floaty 5.2s ease-in-out infinite;animation-delay:-1.1s}
.s9{animation:floaty 6.0s ease-in-out infinite;animation-delay:-0.7s}
.s10{animation:floaty 6.9s ease-in-out infinite;animation-delay:-1.3s}