html.is-loading {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(131 218 78 / 0.07), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgb(84 172 184 / 0.06), transparent 50%),
    #fafafa;
  font-family: Geist, Helvetica, sans-serif;
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.55s;
}

.page-loader--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__line {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 32%;
  background: rgb(236 236 236 / 1);
  transform-origin: bottom center;
  animation: loaderLineGrow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.page-loader__line--left {
  left: 15px;
}

.page-loader__line--right {
  right: 15px;
  animation-delay: 0.08s;
}

@keyframes loaderLineGrow {
  from {
    transform: scaleY(0);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.page-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 24px;
  animation: loaderContentIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes loaderContentIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-loader__brand {
  animation: loaderLogoPulse 2.4s ease-in-out infinite;
}

.page-loader__brand img {
  display: block;
  width: auto;
  height: 28px;
  object-fit: contain;
}

@keyframes loaderLogoPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.88;
    transform: scale(0.98);
  }
}

.page-loader__card {
  position: relative;
  width: 168px;
  height: 104px;
  border-radius: 12px;
  background: linear-gradient(135deg, #383838 0%, #272727 100%);
  box-shadow:
    0 20px 48px rgb(0 0 0 / 0.12),
    0 4px 12px rgb(0 0 0 / 0.06);
  overflow: hidden;
  animation: loaderCardFloat 2.8s ease-in-out infinite;
}

@keyframes loaderCardFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-6px) rotate(1deg);
  }
}

.page-loader__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgb(255 255 255 / 0.08) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: loaderCardShine 2.2s ease-in-out infinite;
}

@keyframes loaderCardShine {
  0% {
    transform: translateX(-120%);
  }

  55%,
  100% {
    transform: translateX(120%);
  }
}

.page-loader__card-chip {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, #d4af37 0%, #f5e6a8 40%, #c9a227 100%);
  opacity: 0.9;
}

.page-loader__card-stripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 3px;
  background: linear-gradient(
    90deg,
    #83da4e 0%,
    #21a038 45%,
    #54acb8 100%
  );
  background-size: 200% 100%;
  animation: loaderStripeFlow 1.8s linear infinite;
}

@keyframes loaderStripeFlow {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.page-loader__track {
  width: min(220px, 72vw);
  height: 3px;
  border-radius: 100px;
  background: rgb(236 236 236 / 1);
  overflow: hidden;
}

.page-loader__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #83da4e 0%,
    #41b856 50%,
    #54acb8 100%
  );
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 12px rgb(131 218 78 / 0.35);
}

.page-loader__hint {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgb(161 161 161 / 1);
  letter-spacing: 0.02em;
}

.page-loader__hint--en {
  display: none;
}

html[lang="en"] .page-loader__hint--ru {
  display: none;
}

html[lang="en"] .page-loader__hint--en {
  display: inline;
}

@media (max-width: 480px) {
  .page-loader__card {
    width: 148px;
    height: 92px;
  }

  .page-loader__line {
    height: 24%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader,
  .page-loader__content,
  .page-loader__brand,
  .page-loader__card,
  .page-loader__card::before,
  .page-loader__card-stripe,
  .page-loader__line {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}