#nws-loader{
  position:fixed;
  inset:0;
  background:#0b0f14;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:99999;
  font-family:Arial, sans-serif;
}

.scene{
  position:relative;
  width:300px;
  height:220px;
  text-align:center;
}

/* Letters */
.letter{
  position:absolute;
  font-size:64px;
  font-weight:900;
  color:#fff;
  opacity:0;
}

/* N from left */
.n{
  left:-80px;
  top:70px;
  animation:nMove 1.2s forwards;
}

/* W from top */
.w{
  left:120px;
  top:-100px;
  animation:wFall 1.2s forwards;
}

/* S from floor crack */
.s{
  left:220px;
  bottom:10px;
  animation:sRise 1.2s forwards;
}

/* Crack floor */
.crack{
  position:absolute;
  bottom:0;
  left:80px;
  width:140px;
  height:4px;
  background:#444;
  opacity:0;
  animation:crackShow 1s 1s forwards;
}

/* Rings */
.rings{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  opacity:0;
  animation:ringsShow 1s 2.4s forwards;
}

.ring{
  width:18px;
  height:18px;
  border-radius:50%;
  animation:spin 1.2s linear infinite;
}

.r1{background:#ff4d4d}
.r2{background:#00e5ff}
.r3{background:#7cff00}

/* Brand text */
.brand{
  margin-top:140px;
  font-size:20px;
  font-weight:700;
  letter-spacing:1px;
  opacity:0;
  background:linear-gradient(90deg,#ff4d4d,#00e5ff,#7cff00);
  -webkit-background-clip:text;
  color:transparent;
  animation:brandShow 1s 3s forwards;
}

/* Animations */
@keyframes nMove{
  to{left:60px;opacity:1}
}

@keyframes wFall{
  to{top:70px;opacity:1}
}

@keyframes sRise{
  from{transform:translateY(30px)}
  to{opacity:1}
}

@keyframes crackShow{
  to{opacity:1}
}

@keyframes ringsShow{
  to{opacity:1}
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

@keyframes brandShow{
  to{opacity:1}
}