/* Kelid night sky: drifting gold and white stars, slow nebulae, a key-shaped constellation
   and the odd shooting star. Shared by the landing page and the mini app. Pure CSS, and
   everything that moves is a transform or opacity so phones keep it on the GPU. */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#1B1640 0%,#110F2C 45%,#0B0C1F 100%)}
.sky i{position:absolute;display:block}

/* nebulae */
.sky .neb{inset:-20%;background:
  radial-gradient(38% 30% at 18% 12%,rgba(123,78,255,.42),transparent 70%),
  radial-gradient(30% 26% at 86% 30%,rgba(217,184,102,.22),transparent 70%),
  radial-gradient(40% 30% at 62% 92%,rgba(176,62,190,.24),transparent 70%),
  radial-gradient(26% 22% at 8% 70%,rgba(64,110,255,.18),transparent 70%);
  animation:neb 48s ease-in-out infinite alternate}
@keyframes neb{to{transform:translate3d(3%,-2%,0) scale(1.08) rotate(4deg)}}

/* star fields: tiles of dots that drift down by exactly one tile, so the loop is seamless */
.sky .st{left:0;right:0;top:-400px;bottom:0;background-repeat:repeat;will-change:transform}
.sky .s1{background-size:211px 211px;animation:d1 90s linear infinite,tw 4.5s ease-in-out infinite alternate;background-image:
  radial-gradient(1px 1px at 23px 41px,#fff,transparent),radial-gradient(1px 1px at 97px 13px,rgba(255,255,255,.8),transparent),
  radial-gradient(1px 1px at 151px 88px,#fff,transparent),radial-gradient(1px 1px at 61px 137px,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 189px 171px,#fff,transparent),radial-gradient(1px 1px at 131px 199px,rgba(255,255,255,.6),transparent),
  radial-gradient(1.2px 1.2px at 7px 181px,#F0D893,transparent)}
.sky .s2{background-size:293px 293px;animation:d2 140s linear infinite,tw 6s 1.5s ease-in-out infinite alternate;background-image:
  radial-gradient(1.5px 1.5px at 47px 71px,#F0D893,transparent),radial-gradient(1.4px 1.4px at 211px 31px,#fff,transparent),
  radial-gradient(1.5px 1.5px at 263px 187px,#fff,transparent),radial-gradient(1.6px 1.6px at 119px 239px,#E9C979,transparent),
  radial-gradient(1.3px 1.3px at 171px 139px,rgba(255,255,255,.9),transparent)}
.sky .s3{background-size:397px 397px;animation:d3 200s linear infinite,tw 3.2s .6s ease-in-out infinite alternate;background-image:
  radial-gradient(2.2px 2.2px at 83px 109px,#FFF4D2,transparent),radial-gradient(2px 2px at 317px 263px,#F0D893,transparent),
  radial-gradient(1.8px 1.8px at 233px 41px,#fff,transparent),radial-gradient(10px 10px at 83px 109px,rgba(240,216,147,.25),transparent),
  radial-gradient(9px 9px at 317px 263px,rgba(240,216,147,.2),transparent)}
@keyframes d1{to{transform:translate3d(0,211px,0)}}
@keyframes d2{to{transform:translate3d(0,293px,0)}}
@keyframes d3{to{transform:translate3d(0,397px,0)}}
@keyframes tw{from{opacity:1}to{opacity:.45}}

/* the brand's own constellation: a key drawn in gold stars */
.sky .key{position:absolute;width:min(34vw,220px);height:auto;bottom:6%;left:2%;opacity:.5;animation:kg 7s ease-in-out infinite alternate}
.sky .key line{stroke:rgba(240,216,147,.35);stroke-width:1}
.sky .key circle{fill:#F6E3A6}
.sky .key .b{animation:tw 2.6s ease-in-out infinite alternate}
.sky .key .b2{animation:tw 3.4s .8s ease-in-out infinite alternate}
@keyframes kg{to{opacity:.85;transform:translate3d(0,-8px,0)}}

/* shooting stars */
.sky .shoot{top:12%;left:110%;width:160px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#FFF4D2,rgba(240,216,147,.6) 30%,transparent);transform:rotate(-24deg);opacity:0;animation:shoot 11s 3s linear infinite}
.sky .shoot.b{top:48%;animation-duration:17s;animation-delay:9s}
@keyframes shoot{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(-24deg)}
  2%{opacity:1}
  9%{opacity:0;transform:translate3d(-130vw,58vw,0) rotate(-24deg)}
  100%{opacity:0;transform:translate3d(-130vw,58vw,0) rotate(-24deg)}}

@media (prefers-reduced-motion:reduce){.sky *{animation:none!important}}