.loader-mark.loader-mark--favicon {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  grid-template-columns: 1fr;
  place-items: center;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(145deg, rgba(15, 21, 39, .96), rgba(12, 16, 30, .98));
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .42),
    0 0 26px rgba(36, 214, 208, .13),
    0 0 42px rgba(120, 103, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: loaderFaviconBreath 2.8s ease-in-out infinite;
}

.loader-mark.loader-mark--favicon::before {
  position: absolute;
  z-index: -2;
  inset: -7px;
  content: "";
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 42deg,
    rgba(36, 214, 208, .9) 78deg,
    transparent 120deg 205deg,
    rgba(120, 103, 255, .78) 242deg,
    rgba(237, 99, 199, .64) 278deg,
    transparent 322deg 360deg
  );
  box-shadow:
    0 0 22px rgba(36, 214, 208, .16),
    0 0 38px rgba(120, 103, 255, .12);
  animation: loaderFaviconRing 3.8s linear infinite;
}

.loader-mark.loader-mark--favicon::after {
  position: absolute;
  z-index: -1;
  inset: 5px;
  content: "";
  border-radius: inherit;
  background: rgba(8, 11, 20, .92);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .05),
    inset 0 0 24px rgba(36, 214, 208, .04);
}

.loader-mark__favicon {
  position: relative;
  z-index: 1;
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 9px rgba(36, 214, 208, .2))
    drop-shadow(0 0 14px rgba(120, 103, 255, .14));
  animation: loaderFaviconSpin 3.2s cubic-bezier(.55, .08, .42, .92) infinite;
}

@keyframes loaderFaviconSpin {
  0% {
    transform: rotate(0deg) scale(.92);
  }

  50% {
    transform: rotate(180deg) scale(1);
  }

  100% {
    transform: rotate(360deg) scale(.92);
  }
}

@keyframes loaderFaviconRing {
  0% {
    opacity: .42;
    transform: rotate(0deg) scale(.96);
  }

  50% {
    opacity: .9;
    transform: rotate(180deg) scale(1.04);
  }

  100% {
    opacity: .42;
    transform: rotate(360deg) scale(.96);
  }
}

@keyframes loaderFaviconBreath {
  0%,
  100% {
    box-shadow:
      0 18px 50px rgba(0, 0, 0, .42),
      0 0 22px rgba(36, 214, 208, .1),
      0 0 36px rgba(120, 103, 255, .08),
      inset 0 1px 0 rgba(255, 255, 255, .12);
  }

  50% {
    box-shadow:
      0 20px 56px rgba(0, 0, 0, .46),
      0 0 32px rgba(36, 214, 208, .2),
      0 0 48px rgba(120, 103, 255, .14),
      inset 0 1px 0 rgba(255, 255, 255, .15);
  }
}

@media (max-width: 680px) {
  .loader-mark.loader-mark--favicon {
    width: 80px;
    height: 80px;
  }

  .loader-mark__favicon {
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-mark.loader-mark--favicon,
  .loader-mark.loader-mark--favicon::before,
  .loader-mark__favicon {
    animation: none;
  }
}