#splash-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: linear-gradient(135deg, #74f1b77e, #67e0bf);
  font-family: "Poppins", system-ui;
}

/* floating circles */
.bg-circles{
  position:absolute;
  inset:0;
}
.circle{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.14);
  animation: float 8s ease-in-out infinite;
}
.c1{ width:140px; height:140px; left:6%; top:8%; }
.c2{ width:220px; height:220px; left:8%; bottom:6%; }
.c3{ width:100px; height:100px; right:10%; top:12%; }
.c4{ width:70px; height:70px; right:12%; bottom:20%; }
.c5{ width:130px; height:130px; left:50%; top:55%; transform:translateX(-50%); opacity:.25; }

@keyframes float{
  50%{ transform: translateY(-10px); }
}

.splash-center{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  padding:20px;
}

.logo-wrap{
  width:90px;
  height:90px;
  border-radius:50%;
  background: rgba(255,255,255,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}
.logo-wrap img{
  width:50px;
  height:50px;
}

.splash-center h1{
  font-size:38px;
  margin:0 0 10px;
  font-weight:600;
}

.subtitle{
  font-size:14px;
  opacity:.9;
  margin-bottom:22px;
}

/* dotted spinner */
.spinner-dots{
  width:60px;
  height:60px;
  position:relative;
  margin:0 auto;
}
.spinner-dots span{
  position:absolute;
  width:8px;
  height:8px;
  background:#fff;
  border-radius:50%;
  top:50%;
  left:50%;
  transform-origin:-18px center;
  animation:dots 1.1s linear infinite;
}
.spinner-dots span:nth-child(n){
  transform: rotate(calc(45deg * var(--i))) translateX(22px);
}
.spinner-dots span:nth-child(1){--i:0}
.spinner-dots span:nth-child(2){--i:1}
.spinner-dots span:nth-child(3){--i:2}
.spinner-dots span:nth-child(4){--i:3}
.spinner-dots span:nth-child(5){--i:4}
.spinner-dots span:nth-child(6){--i:5}
.spinner-dots span:nth-child(7){--i:6}
.spinner-dots span:nth-child(8){--i:7}

@keyframes dots{
  0%{opacity:.2}
  50%{opacity:1}
  100%{opacity:.2}
}

/* hide animation */
body.content-loaded #splash-overlay{
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease, visibility .4s;
  pointer-events:none;
}