.preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#042152;   /* مثل عکس */
  display:grid;
  place-items:center;
}

.preloader__ring{
  position:relative;
  width:clamp(220px, 22vw, 360px);
  height:clamp(220px, 22vw, 360px);
  display:grid;
  place-items:center;
}

/* لوگو وسط */
.preloader__logo{
  width: 135px;
  height:auto;
  position:relative;
  z-index:5;
}

/* SVG نقطه‌ها */
.dotfield{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  overflow:visible;

  /* اگر بخوای کل مجموعه خیلی نرم بچرخه (اختیاری) */
  animation: fieldRotate 6s linear infinite;
}

/* هر نقطه */
.dotfield circle{
  fill:#fff;
  opacity:.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: dotBlink 1.2s ease-in-out infinite;
}

/* پالس کم/زیاد شبیه نمونه */
@keyframes dotBlink{
  0%,100%{ opacity:.18; transform:scale(1); }
  45%    { opacity:1;   transform:scale(1.25); }
}

/* چرخش ملایم کل دایره (اگه نمیخوای، اینو حذف کن) */
@keyframes fieldRotate{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ریسپانسیو */
@media (max-width:768px){
  .preloader__ring{
    width:clamp(200px, 58vw, 300px);
    height:clamp(200px, 58vw, 300px);
  }

  .preloader__logo{
    width: 98px;
    height:auto;
    position:relative;
    z-index:5;
  }
  
}