/* =========================
   LOADER OVERLAY
========================= */

.loader-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.96);

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:999999999;
}


/* =========================
   LOADER BOX
========================= */

.loader-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


/* =========================
   LOGO WRAP
========================= */

.loader-logo-wrap{
  width:90px;
  height:90px;

  display:flex;
  justify-content:center;
  align-items:center;

  animation:logoPulse 1.4s infinite ease-in-out;

  will-change:transform;
}


/* =========================
   LOGO IMAGE
========================= */

.loader-logo-img{
  width:60%;
  height:60%;
  object-fit:contain;
  display:block;
}


/* =========================
   TITLE
========================= */

.loader-title{
  margin-top:18px;
  font-size:18px;
  font-weight:700;
  color:white;
}


/* =========================
   MESSAGE
========================= */

.loader-message{
  margin-top:8px;
  font-size:14px;
  opacity:.7;
  color:white;
}


/* =========================
   PULSE ANIMATION
========================= */

@keyframes logoPulse{

  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.12);
    opacity:.75;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }

}








/* =========================
RAINBOW RING
========================= */

.loader-rainbow-ring{

  width:90px;
  height:90px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  background:
  conic-gradient(
    #ff0000,
    #ff7b00,
    #ffe600,
    #00ff88,
    #00c3ff,
    #3b82f6,
    #8b5cf6,
    #ff008c,
    #ff0000
  );

  padding:4px;

  box-shadow:
    0 0 20px rgba(255,255,255,.15);

}

.loader-rainbow-ring::before{

  content:"";

  position:absolute;

  inset:4px;

  border-radius:50%;

  background:#081120;

}

/* =========================
B LETTER
========================= */

.loader-b{

  width:72px;
  height:72px;

  border-radius:50%;

  background:#081120;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  font-size:42px;
  font-weight:900;

  z-index:2;

  animation:
    pulseB 1.2s ease-in-out infinite;

}

/* =========================
PULSE
========================= */

.loader-pulse{

  animation:
  pulseB 1.3s ease-in-out infinite;

}

@keyframes pulseB{

  0%{

    transform:scale(1);

    text-shadow:
      0 0 0 rgba(0,212,146,.3);

  }

  50%{

    transform:scale(1.15);

    text-shadow:
      0 0 25px rgba(0,212,146,.9);

  }

  100%{

    transform:scale(1);

    text-shadow:
      0 0 0 rgba(0,212,146,.3);

  }

}