/* UniGps intro splash. Pure CSS motion, driven by classes set in splash.js. */
.splash{position:fixed;inset:0;z-index:3000;background:#0b6b3a;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:opacity .38s ease,transform .38s ease}
.splash[hidden]{display:none}
.sp-mark{position:relative;display:flex;flex-direction:column;align-items:center}
.sp-pin{position:relative;width:76px;height:96px}
.sp-pin svg{position:relative;width:100%;height:100%;display:block;transform-origin:50% 100%}
.sp-ring{position:absolute;left:50%;bottom:-6px;width:56px;height:18px;margin-left:-28px;border:2px solid rgba(255,255,255,.55);border-radius:50%;opacity:0}
.sp-word{margin-top:18px;font-size:34px;font-weight:800;letter-spacing:-.6px;line-height:1}
.sp-word b{font-weight:800;color:#f2b134}
.sp-lines{position:absolute;left:0;right:0;bottom:calc(16vh + env(safe-area-inset-bottom,0px));height:120px;text-align:center}
.sp-line{position:absolute;left:0;right:0;margin:0;font-size:clamp(26px,7.4vw,40px);font-weight:800;letter-spacing:-.5px;line-height:1.15;padding:0 24px;overflow:hidden}
.sp-line span{display:inline-block;transform:translateY(110%);opacity:0}
.sp-line .hl{color:#f2b134}
.sp-l2{font-size:clamp(24px,6.6vw,36px);max-width:440px;margin:0 auto!important}
.sp-line .eyes{font-weight:400}
.sp-skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:.04em;opacity:0}
/* motion */
.splash.go .sp-pin svg{animation:sp-drop .55s cubic-bezier(.3,1.6,.5,1) both,sp-breathe 1.6s ease-in-out .7s infinite}
.splash.go .sp-ring{animation:sp-ping 1.6s ease-out .45s infinite}
.splash.go .sp-word{animation:sp-up .45s ease-out .3s both}
.splash.full .sp-l1 span{transform:scale(.3);animation:sp-pop .38s cubic-bezier(.3,1.7,.5,1) both,sp-wordout .3s ease-in 1.95s forwards}
.splash.full .sp-l1 .eyes{animation:sp-pop .38s cubic-bezier(.3,1.7,.5,1) both,sp-wiggle .7s ease-in-out 1.15s both,sp-wordout .3s ease-in 1.95s forwards}
.splash.full .sp-l2 span{animation:sp-word .42s cubic-bezier(.2,.8,.2,1) both}
.splash.full .sp-skip{animation:sp-fade .4s ease .9s both}
.splash.out{opacity:0;transform:scale(1.04);pointer-events:none}
@keyframes sp-drop{from{transform:translateY(-40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes sp-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes sp-up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-word{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-wordout{to{transform:translateY(-110%);opacity:0}}
@keyframes sp-pop{from{transform:scale(.3) translateY(20%);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-wiggle{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.15)}40%{transform:rotate(12deg) scale(1.15)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes sp-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .splash,.splash *{animation:none!important;transition:opacity .2s linear!important}
  .splash .sp-l1 span,.splash .sp-l2 span{transform:none!important}
  .splash.full .sp-l2 span{opacity:1}
  .splash.out{transform:none}
}

/* Colourful UniGPs.ng wordmark on the green splash */
.sp-word{letter-spacing:-.4px}
.sp-word .bw-u,.sp-word .bw-gp{color:#fff}
.sp-word .bw-s{color:#f2b134}
.sp-word .bw-dot{color:rgba(255,255,255,.72)}
.sp-word .bw-ng{color:#9fe8c4}