.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #000;
  opacity: 1;
  transition: opacity 520ms cubic-bezier(0.33, 0, 0.2, 1);
  --loader-progress: 0;
  --loader-scale: 1;
  --loader-angle: 0deg;
}

.site-loader[hidden] { display: none; }
.site-loader.is-done { opacity: 0; pointer-events: none; }

.site-loader__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: min(92vw, 180vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.site-loader__ring {
  position: absolute;
  inset: 50% auto auto 50%;
  margin: auto;
  inline-size: var(--ring-size);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  opacity: 0.28;
  transform: translate(-50%, -50%) scale(var(--loader-scale));
  transition: opacity 420ms ease, transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}
.site-loader__ring--1 { --ring-size: 100%; opacity: 0.18; }
.site-loader__ring--2 { --ring-size: 76%;  opacity: 0.23; }
.site-loader__ring--3 { --ring-size: 53%;  opacity: 0.29; }
.site-loader__ring--4 { --ring-size: 30%;  opacity: 0.36; }

.site-loader__meter {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  inline-size: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(255, 255, 255, 0.96) 0deg var(--loader-angle),
    rgba(255, 255, 255, 0.08) var(--loader-angle) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68% 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 0 67%, #000 68% 70%, transparent 71%);
  filter: drop-shadow(0 0 12px rgba(113, 144, 255, 0.38));
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: loader-meter-breathe 1.8s ease-in-out infinite;
  transition: opacity 260ms ease, transform 420ms ease;
}

.site-loader__brand {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.42rem;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease, transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-loader__logo {
  display: block;
  inline-size: clamp(8.75rem, 15vw, 11.25rem);
  block-size: auto;
  filter: drop-shadow(0 0 18px rgba(14, 67, 221, 0.22));
}

.site-loader__status {
  margin-block-start: 0.5rem;
  font-size: clamp(0.625rem, 1.2vw, 0.75rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.site-loader__pct {
  margin-block-start: 0.05rem;
  font-family: "Vazirmatn", var(--font-sans);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  direction: rtl;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.site-loader__track {
  display: block;
  inline-size: clamp(7.5rem, 13vw, 11rem);
  block-size: 2px;
  margin-block-start: 0.35rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.site-loader__fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(90deg, #6c8cff, #ffffff);
  box-shadow: 0 0 10px rgba(108, 140, 255, 0.7);
  transform: scaleX(var(--loader-progress));
  transform-origin: right center;
}

@keyframes loader-meter-breathe {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(113, 144, 255, 0.28)); }
  50% { filter: drop-shadow(0 0 18px rgba(113, 144, 255, 0.56)); }
}

.site-loader__iris {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  inline-size: clamp(3.5rem, 5vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #303030;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  will-change: transform, opacity;
}
.site-loader__iris-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
}
.site-loader__iris-veil { opacity: 0; }
.site-loader__iris::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: inherit;
  background: #020317;
}

.site-loader.is-opening .site-loader__ring {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}
.site-loader.is-opening .site-loader__brand {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}
.site-loader.is-opening .site-loader__meter {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(24deg) scale(0.76);
}
.site-loader.is-disc .site-loader__iris-stage { opacity: 1; }
.site-loader.is-cutting { background: transparent; }
.site-loader.is-cutting .site-loader__iris-veil { opacity: 1; }
.site-loader.is-cutting [data-loader-disc] { opacity: 0; }

@media (max-width: 47.99em) {
  .site-loader__inner { inline-size: 190vw; }
  .site-loader__ring { border-color: rgba(255, 255, 255, 0.12); }
  .site-loader__ring--1 { --ring-size: 100%; }
  .site-loader__ring--2 { --ring-size: 76%; }
  .site-loader__ring--3 { --ring-size: 52%; }
  .site-loader__ring--4 { --ring-size: 29%; }
  .site-loader__logo { inline-size: 8.25rem; }
  .site-loader__status { font-size: 0.625rem; }
  .site-loader__pct { font-size: 1.4rem; }
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__ring,
  .site-loader__meter,
  .site-loader__brand,
  .site-loader__iris { transition-duration: 120ms !important; }
  .site-loader__meter { animation: none; }
  .site-loader { transition-duration: 220ms; }
}

/* No JavaScript: never show the loader. A fixed black overlay with no script to
   remove it is a blank site. */
.no-js .site-loader { display: none; }