.hero-skill-bubbles{position:absolute;inset:0;z-index:3;pointer-events:none;user-select:none}
.skill-bubble{position:absolute;left:var(--x);top:var(--y);width:clamp(52px,var(--size),180px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;animation:skill-bubble-float var(--duration,8s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.skill-bubble::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url('assets/decor/skill-bubble.png') center/contain no-repeat;opacity:.34;filter:saturate(1.5);box-shadow:inset 0 0 24px #ffd7b50a}
.skill-bubble>span{position:relative;color:#fff3e0;font-size:clamp(11px,1.05vw,22px);font-weight:700;letter-spacing:.03em;text-shadow:0 2px 7px #000,0 0 15px #0009}
.bubble-1{--x:49%;--y:18%;--size:7.5vw;--delay:-2s}
.bubble-2{--x:56%;--y:35%;--size:5.5vw;--duration:9s;--delay:-5s}
.bubble-3{--x:50%;--y:51%;--size:4.5vw;--delay:-4s}
.bubble-4{--x:42%;--y:64%;--size:9vw;--duration:10s;--delay:-1s}
.bubble-5{--x:83%;--y:29%;--size:7vw;--duration:9s;--delay:-3s}
.bubble-6{--x:92%;--y:26%;--size:4.7vw;--delay:-6s}
.bubble-7{--x:89%;--y:43%;--size:5.2vw;--duration:10s;--delay:-2s}
.bubble-8{--x:55%;--y:72%;--size:6vw;--delay:-5s}
.bubble-9{--x:78%;--y:65%;--size:4.5vw;--duration:9s;--delay:-1s}
.bubble-10{--x:91%;--y:56%;--size:6vw;--delay:-3s}
@keyframes skill-bubble-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(5px,-10px,0)}}
@media(max-width:700px){
 .hero#home{min-height:1460px}
 .hero#home .hero-bottom{top:600px;bottom:auto}
 .hero-skill-bubbles{top:825px;left:7%;right:7%;bottom:auto;height:225px;display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px}
 .skill-bubble{position:relative;left:auto;top:auto;width:60px;flex-shrink:0}
 .skill-bubble>span{font-size:11px;letter-spacing:0}
 .bubble-1,.bubble-4{width:76px}
 .bubble-2,.bubble-8,.bubble-10{width:68px}
 .bubble-3,.bubble-6,.bubble-9{width:49px}
 .bubble-2,.bubble-6{margin-top:16px}
 .bubble-4,.bubble-9{margin-top:-8px}
}
body.still .skill-bubble{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.skill-bubble{animation:none}}
@media(max-width:700px){.hero#home>.dots{top:1070px;bottom:auto}}