#tixteeLoader{
  position:fixed; inset:0; z-index:99999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
#tixteeLoader.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.loader {
  display: flex;
  align-items: center;
}

.bar {
  display: inline-block;
  width: 3px;
  height: 20px;
  background-color: rgba(255, 255, 255, .5);
  border-radius: 10px;
  animation: scale-up4 1s linear infinite;
}

.bar:nth-child(2) {
  height: 35px;
  margin: 0 5px;
  animation-delay: .25s;
}

.bar:nth-child(3) {
  animation-delay: .5s;
}

@keyframes scale-up4 {
  20% {
    background-color: #fff;
    transform: scaleY(1.5);
  }
  40% {
    transform: scaleY(1);
  }
}



/* Hide native scrollbar */
::-webkit-scrollbar{
    display:none;
}

html{
    scrollbar-width:none;
}

/* Scroll indicator */

#scrollIndicator{

    position:fixed;

    top:10px;
    right:18px;

    width:14px;
    height:14px;

    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:2px;

    opacity:0;

    pointer-events:none;

    z-index:999999;

    transition:
        opacity .3s,
        top .1s linear;

}

/* Default dot */

#scrollIndicator span{

    display:none;

}

/* Dot mode */

#scrollIndicator::before{

    content:"";

    width:10px;
    height:10px;

    background:#fff;

    border-radius:50%;

    display:block;

}

/* Music mode */

#scrollIndicator.playing::before{

    display:none;

}

#scrollIndicator.playing span{

    display:block;

    width:3px;

    background:#fff;

    border-radius:999px;

    animation:eqBounce .7s ease-in-out infinite alternate;

}

#scrollIndicator.playing span:nth-child(2){

    animation-delay:.2s;

}

#scrollIndicator.playing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes eqBounce{

    from{

        height:6px;

    }

    to{

        height:18px;

    }

}