/* ===============================
   Color Palette
================================= */
:root{
  --mw-c1:#4183C4; /* روشن */
  --mw-c2:#3E5DAA; /* میانی */
  --mw-c3:#3851A2; /* تیره */
  --mw-bg:#2C2F75; /* بک گراند */
}

/* ===============================
   Fullscreen Overlay
================================= */
.mw-site-loader{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--mw-bg);

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

  z-index: 999999;
}

/* ===============================
   Dots Container
================================= */
.mw-site-loader__dots{
  display: flex;
  align-items: center;
  gap: 22px;
}

/* ===============================
   Base Dot
================================= */
.mw-dot{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-block;

  will-change: transform, background-color, opacity;

  animation: smoothWave 1.5s infinite cubic-bezier(.37,0,.63,1);
}

/* اختلاف فاز 1/3 چرخه */
.mw-dot--1{ animation-delay: 0s; }
.mw-dot--2{ animation-delay: -0.5s; }
.mw-dot--3{ animation-delay: -1s; }


@keyframes smoothWave{
  0%{
    transform: scale(.6);
    background: var(--mw-c1);
  }

  50%{
    transform: scale(1.6);
    background: var(--mw-c3);
  }

  100%{
    transform: scale(.6);
    background: var(--mw-c1);
  }
}