/* =========================
   LASA LOADER
========================= */

#lasaLoader{

  position:fixed;
  inset:0;

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

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index:99999;

}

#lasaLoader.visible{

  opacity:1;
  visibility:visible;

}

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

.loader-box{

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

  padding:28px 36px;

  min-width:260px;

  border-radius:20px;

  background:rgba(28,32,42,.95);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 12px 40px rgba(0,0,0,.45);

}

/* =========================
   PILOTE
========================= */

.loader-pilot{

  width:90px;
  height:auto;

  margin-bottom:18px;

  animation:pilotFloat 2.2s ease-in-out infinite;

}

body.dark .loader-pilot{

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.15));

}

body.light .loader-pilot{

  filter:none;

}


@keyframes pilotFloat{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-6px);
  }

  100%{
    transform:translateY(0px);
  }

}

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

.loader-message{

  color:#ffffff;

  font-size:18px;
  font-weight:600;

  text-align:center;

}

.loader-message::after{

  content:"";

  animation:dots 1.4s infinite;

}

@keyframes dots{

  0%{
    content:"";
  }

  33%{
    content:".";
  }

  66%{
    content:"..";
  }

  100%{
    content:"...";
  }

}

/* =========================
   MODE CLAIR
========================= */

body.light #lasaLoader{

  background:rgba(255,255,255,.35);

}

body.light .loader-box{

  background:rgba(255,255,255,.96);

  border:1px solid rgba(0,0,0,.08);

  box-shadow:
    0 12px 40px rgba(0,0,0,.18);

}

body.light .loader-message{

  color:#111;

}