.orbit-section{
  position:relative;
  isolation:isolate;
  min-height:720px;
  height:100vh;
  overflow:hidden;
  color:#214ED9;
  background:#93c7fa url('./assets/backgrounds/background image 2.webp') center center/cover no-repeat;
}
.orbit-trails{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.orbit-bubbles{position:absolute;inset:0;z-index:2}
.orbit-bubble{
  position:absolute;
  display:block;
  width:clamp(101.5px,10.08vw,168px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  text-decoration:none;
  perspective:600px;
}
.orbit-bubble--toys{left:18.3%;top:32.5%}
.orbit-bubble--cages{left:50%;top:17.6%}
.orbit-bubble--accessories{left:80.5%;top:32.5%}
.orbit-bubble--carriers{left:20.6%;top:71.2%}
.orbit-bubble--bags{left:77.6%;top:71.2%}
.bubble-sphere{
  position:relative;
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 24% 16%,rgba(255,255,255,.9) 0 4%,transparent 19%),
    radial-gradient(circle at 76% 80%,rgba(139,210,255,.25),transparent 48%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.36) 78%,rgba(255,255,255,.75) 99%);
  border:1.2px solid rgba(255,255,255,.88);
  box-shadow:inset 0 0 0 2.8px rgba(255,255,255,.19),inset 8.4px 9.8px 16.8px rgba(255,255,255,.58),inset -8.4px -12.6px 17.5px rgba(95,167,230,.18),0 0 7px rgba(255,255,255,.85),0 11.2px 22.4px rgba(34,100,175,.12);
  backdrop-filter:blur(1px) saturate(1.15);
  -webkit-backdrop-filter:blur(1px) saturate(1.15);
  transition:box-shadow .3s ease;
}
.bubble-sphere::before{
  content:"";position:absolute;z-index:3;pointer-events:none;
  left:14%;top:7%;width:54%;height:20%;
  border-top:7.7px solid rgba(255,255,255,.76);
  border-radius:50%;transform:rotate(-22deg);
  filter:blur(1.4px);
}
.bubble-sphere::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  right:7%;bottom:15%;width:15%;height:32%;
  border-right:4.9px solid rgba(255,255,255,.42);
  border-radius:50%;transform:rotate(17deg);filter:blur(1.4px);
}
.bubble-sphere img{
  position:absolute;z-index:2;
  top:8%;left:15%;width:70%;height:62%;
  object-fit:contain;
  filter:drop-shadow(0 5.6px 4.2px rgba(48,103,157,.16));
  transform:translateZ(17.5px);
}
.orbit-bubble--toys img{top:11%;height:58%}
.orbit-bubble--cages img{top:8%;height:60%}
.orbit-bubble--accessories img{left:11%;width:78%;top:11%;height:58%}
.orbit-bubble--carriers img,.orbit-bubble--bags img{top:14%;height:55%}
.bubble-label{
  position:absolute;z-index:4;left:13%;right:13%;bottom:11%;
  display:flex;align-items:center;justify-content:center;
  gap:5.6px;
  color:#214ED9;text-align:center;font-size:clamp(9.1px,.735vw,11.9px);font-weight:700;
  text-shadow:0 1px 1px rgba(255,255,255,.9);
}
.bubble-label span{font-size:1.65em;font-weight:300;line-height:.5;transform:translateY(-1px)}
.orbit-bubble:hover .bubble-sphere,.orbit-bubble:focus-visible .bubble-sphere{animation:bubble-float 2.2s ease-in-out infinite;box-shadow:inset 0 0 0 2.8px rgba(255,255,255,.3),inset 8.4px 9.8px 16.8px rgba(255,255,255,.7),inset -8.4px -12.6px 17.5px rgba(95,167,230,.2),0 0 16.8px rgba(255,255,255,.95),0 16.8px 28px rgba(34,100,175,.22)}
@keyframes bubble-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8.4px) rotate(1deg)}}
.orbit-scroll{
  position:absolute;z-index:3;left:50%;bottom:4%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#214ED9;font-size:9px;font-weight:700;letter-spacing:.2em;white-space:nowrap;
  text-shadow:0 1px 3px rgba(255,255,255,.9);
}
.mouse-icon{width:15px;height:22px;border:1.3px solid currentColor;border-radius:9px;display:flex;justify-content:center;padding-top:3px}
.mouse-icon i{position:relative;display:block;width:1.3px;height:6px;background:currentColor;animation:mouse-arrow 1.5s ease-in-out infinite}
.mouse-icon i::after{content:"";position:absolute;left:-2px;bottom:-1px;width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg)}
.scroll-arrow{font-size:18px;line-height:.5;font-weight:300;animation:mouse-arrow 1.5s ease-in-out infinite}
@keyframes mouse-arrow{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(4px);opacity:1}}
@media(max-width:700px){
  .orbit-section{height:820px;min-height:820px;background:linear-gradient(#91c5f8,#d9ebff)}
  .orbit-section::before{content:"";position:absolute;inset:0;z-index:0;background:url('./assets/backgrounds/background image 2.webp') center 49%/auto 470px no-repeat;mask-image:linear-gradient(to bottom,transparent 12%,#000 27%,#000 70%,transparent 86%);-webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 27%,#000 70%,transparent 86%)}
  .orbit-bubble{width:clamp(79.8px,21.7vw,96.6px)}
  .orbit-bubble--cages{left:50%;top:14%}
  .orbit-bubble--toys{left:18%;top:34%}
  .orbit-bubble--accessories{left:82%;top:34%}
  .orbit-bubble--carriers{left:22%;top:68%}
  .orbit-bubble--bags{left:78%;top:68%}
  .bubble-label{font-size:7.7px;gap:1.4px;left:7%;right:7%}
  .bubble-sphere::before{border-top-width:4.9px}
  .orbit-scroll{bottom:4%;font-size:8px;gap:5px}
}
@media(prefers-reduced-motion:reduce){.orbit-bubble:hover .bubble-sphere,.orbit-bubble:focus-visible .bubble-sphere,.mouse-icon i,.scroll-arrow{animation:none}.orbit-trails animateMotion{display:none}}