.site-loader {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--color--bg--surface-primary, #0a0a0a);
  pointer-events: all;
}

.site-loader__mark {
  position: relative;
  width: 104px;
  height: 104px;
  will-change: transform, opacity, filter;
}

.site-loader__glow {
  position: absolute;
  inset: -28px;
  content: "";
  background: radial-gradient(circle, rgba(12, 101, 246, 0.2), transparent 68%);
  filter: blur(12px);
  opacity: 0;
  will-change: transform, opacity;
}

.site-loader__logo,
.site-loader__shine {
  position: absolute;
  inset: 0;
}

.site-loader__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-loader__shine {
  opacity: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(12, 101, 246, 0.12) 44%, rgba(147, 167, 254, 0.72) 50%, rgba(12, 101, 246, 0.12) 56%, transparent 64%);
  background-size: 260% 100%;
  -webkit-mask: url("../images/magdy-designs-logo.svg") center / contain no-repeat;
  mask: url("../images/magdy-designs-logo.svg") center / contain no-repeat;
  will-change: background-position, opacity;
}