/* Homepage-only decoration.
   Keeps the approved pre-polish layout intact and adds light, non-interactive bubbles. */
.customer-home .hero-bubble{
  display:block;
  opacity:.42;
  border:1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 31% 27%,rgba(255,255,255,.88) 0 8%,transparent 9%),
    radial-gradient(circle at 38% 38%,rgba(102,190,249,.42),rgba(49,142,232,.14) 50%,transparent 72%);
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.44),
    0 8px 24px rgba(41,126,209,.08);
  animation:artHomeBubbleFloat 7s ease-in-out infinite;
  will-change:transform;
}

.customer-home .hero-bubble.b1{animation-duration:7.4s;animation-delay:-1.1s}
.customer-home .hero-bubble.b2{animation-duration:6.1s;animation-delay:-3.2s}
.customer-home .hero-bubble.b3{animation-duration:8.2s;animation-delay:-4.5s}
.customer-home .hero-bubble.b4{animation-duration:5.8s;animation-delay:-2.1s}
.customer-home .hero-bubble.b5{animation-duration:6.7s;animation-delay:-5.3s}

@keyframes artHomeBubbleFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-12px,0) scale(1.035)}
}

@media(max-width:680px){
  .customer-home .hero-bubble{opacity:.3;animation-duration:8s}
  .customer-home .hero-bubble.b1{width:48px;height:48px;right:54%;bottom:58px}
  .customer-home .hero-bubble.b2{width:25px;height:25px;right:48%;bottom:127px}
  .customer-home .hero-bubble.b3{width:32px;height:32px;right:4%;top:64px}
  .customer-home .hero-bubble.b4{width:18px;height:18px;right:12%;top:124px}
  .customer-home .hero-bubble.b5{width:13px;height:13px;right:19%;top:91px}
}

@media(prefers-reduced-motion:reduce){
  .customer-home .hero-bubble{animation:none;will-change:auto}
}