/* home hero: concept B gradient, floating game icons, rounded arch into the page. Only loaded by index.html (class "arch" on the hero). */
.hero.arch{background:linear-gradient(160deg,#20D9FF 0%,#4aa8ff 45%,#7b5cff 100%) center/cover fixed}
.hero.arch .container{padding-bottom:clamp(110px,14vw,190px)}
/* the white arch that "scoops" the hero into the page */
.hero.arch::after{content:"";position:absolute;z-index:2;left:-6%;right:-6%;bottom:-2px;height:clamp(70px,9vw,140px);background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}

/* floating game icons */
.float-ico{position:absolute;z-index:0;display:block;width:var(--s,110px);aspect-ratio:1;border-radius:24%;object-fit:cover;
 filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));
 rotate:var(--r,0deg);pointer-events:none;
 animation:ico-pop .6s cubic-bezier(.3,1.5,.5,1) var(--pd,1.9s) both,ico-float 6s ease-in-out var(--fd,2.5s) infinite}
@keyframes ico-pop{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes ico-float{0%,100%{translate:0 0}50%{translate:0 -16px}}
.float-ico.i1{--s:clamp(100px,14vw,200px);--r:-10deg;left:2%;top:24%;--pd:.6s;--fd:1.2s}
.float-ico.i2{--s:clamp(100px,14vw,200px);--r:9deg;right:2%;top:20%;--pd:.72s;--fd:1.3s}
.float-ico.i3{--s:clamp(80px,10.5vw,150px);--r:7deg;left:3%;bottom:24%;--pd:.84s;--fd:1.45s}
.float-ico.i4{--s:clamp(80px,10.5vw,150px);--r:-8deg;right:3%;bottom:22%;--pd:.96s;--fd:1.55s}
/* phones: the title fills the width, so the icons go in the free bands above and below it instead of beside it */
@media(max-width:767px){
 .float-ico.i1,.float-ico.i2{--s:84px}
 .float-ico.i3,.float-ico.i4{--s:64px}
 .float-ico.i1{left:5%;top:17%}
 .float-ico.i2{right:5%;top:15%}
 .float-ico.i3{left:8%;bottom:13%}
 .float-ico.i4{right:8%;bottom:11%}
}
@media(prefers-reduced-motion:reduce){.float-ico{animation:none}}