.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0c;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s cubic-bezier(.4,0,.2,1), visibility 1s cubic-bezier(.4,0,.2,1);
}
body.light .preloader { background: #f2f2f2; }
.preloader--hide { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__progress {
  position: absolute;
  top: 0; left: -100%;
  height: 1px;
  width: 60%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(254,153,255,.5) 20%,
    #fe99ff 50%,
    rgba(254,153,255,.5) 80%,
    transparent 100%
  );
  animation: pl-progress 2s ease-in-out infinite;
}
body.light .preloader__progress {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(160,0,220,.4) 20%,
    #b020e0 50%,
    rgba(160,0,220,.4) 80%,
    transparent 100%
  );
}
@keyframes pl-progress {
  0%   { left: -60%; }
  100% { left: 100%; }
}

.preloader__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  animation: pl-in .9s cubic-bezier(.16,1,.3,1) both;
  padding: 0 40px;
  width: 100%;
  max-width: 320px;
}
@keyframes pl-in {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.preloader__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.preloader__logo-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: pl-glow 3s ease-in-out infinite;
}
.preloader__logo-glow::before,
.preloader__logo-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.preloader__logo-glow {
  inset: -40px;
  background: radial-gradient(circle, rgba(254,153,255,.16) 0%, transparent 60%);
}
.preloader__logo-glow::before {
  inset: 20px;
  background: radial-gradient(circle, rgba(254,153,255,.28) 0%, transparent 65%);
  animation: pl-glow-inner 3s ease-in-out infinite .2s;
}
.preloader__logo-glow::after {
  inset: 38px;
  background: radial-gradient(circle, rgba(254,153,255,.45) 0%, transparent 70%);
  animation: pl-glow-inner 3s ease-in-out infinite .4s;
}
body.light .preloader__logo-glow {
  background: radial-gradient(circle, rgba(160,0,220,.1) 0%, transparent 60%);
}
body.light .preloader__logo-glow::before {
  background: radial-gradient(circle, rgba(160,0,220,.18) 0%, transparent 65%);
}
body.light .preloader__logo-glow::after {
  background: radial-gradient(circle, rgba(160,0,220,.3) 0%, transparent 70%);
}
@keyframes pl-glow {
  0%,100% { transform: scale(.85); opacity: .45; }
  50%     { transform: scale(1.15); opacity: 1; }
}
@keyframes pl-glow-inner {
  0%,100% { transform: scale(.88); opacity: .5; }
  50%     { transform: scale(1.12); opacity: 1; }
}

.preloader__icon {
  position: relative;
  width: 52px;
  height: 52px;
  display: block;
  animation: pl-breathe 3s ease-in-out infinite;
  z-index: 1;
}
body.light .preloader__icon { filter: invert(1); }
@keyframes pl-breathe {
  0%,100% { transform: scale(.93); opacity: .7; }
  50%     { transform: scale(1.05); opacity: 1; }
}

.preloader__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.preloader__brand {
  display: flex;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .36em;
  font-family: inter, sans-serif;
  padding-right: .36em;
}
.preloader__brand span {
  display: inline-block;
  opacity: 0;
  color: rgba(255,255,255,.55);
  animation: pl-char .5s cubic-bezier(.16,1,.3,1) both;
}
body.light .preloader__brand span { color: rgba(0,0,0,.45); }

.preloader__brand span:nth-child(1)  { animation-delay: .08s; }
.preloader__brand span:nth-child(2)  { animation-delay: .14s; }
.preloader__brand span:nth-child(3)  { animation-delay: .20s; }
.preloader__brand span:nth-child(4)  { animation-delay: .26s; }
.preloader__brand span:nth-child(5)  { animation-delay: .32s; }
.preloader__brand span:nth-child(6)  { animation-delay: .38s; }
.preloader__brand span:nth-child(7)  { animation-delay: .44s; }
.preloader__brand span:nth-child(8)  { animation-delay: .50s; }
.preloader__brand span:nth-child(9)  { animation-delay: .56s; }
.preloader__brand span:nth-child(10) { animation-delay: .62s; }

@keyframes pl-char {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.preloader__brand-dot { color: #fe99ff !important; }
body.light .preloader__brand-dot { color: #b020e0 !important; }

.preloader__line {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(254,153,255,.5), transparent);
  animation: pl-line 2s ease-in-out infinite;
}
body.light .preloader__line {
  background: linear-gradient(90deg, transparent, rgba(160,0,220,.4), transparent);
}
@keyframes pl-line {
  0%,100% { width: 16px; opacity: .4; }
  50%     { width: 32px; opacity: 1; }
}

#page-wrap {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.4,0,.2,1) .1s;
}
body.page-ready #page-wrap {
  opacity: 1;
}