.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  background: rgba(8,8,8,0.86);
  backdrop-filter: blur(10px);
}

.page-loader.active {display: grid;}

.dna-helix {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 48px;
}

.dna-helix span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: dna-wave 1s ease-in-out infinite alternate;
}

.dna-helix span:nth-child(odd) {background: var(--purple, #8B5CF6);}

.dna-helix span:nth-child(even) {background: var(--purple-light, #A78BFA);}

.dna-helix span:nth-child(1) { animation-delay: 0s; }
.dna-helix span:nth-child(2) { animation-delay: .1s; }
.dna-helix span:nth-child(3) { animation-delay: .2s; }
.dna-helix span:nth-child(4) { animation-delay: .3s; }
.dna-helix span:nth-child(5) { animation-delay: .4s; }
.dna-helix span:nth-child(6) { animation-delay: .5s; }
.dna-helix span:nth-child(7) { animation-delay: .6s; }

@keyframes dna-wave {
  from {transform: scaleY(1) translateY(0);}

  to {transform: scaleY(3.5) translateY(-6px);}
}