.pcnn-page-loader {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #f4faf7;
  background:
    radial-gradient(circle at 50% 42%, rgba(21, 75, 56, .96) 0, rgba(8, 35, 26, .98) 31%, #071410 70%),
    #071410;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.018);
  transition: opacity .28s ease, visibility .28s ease, transform .34s ease;
  isolation: isolate;
}

.pcnn-page-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

html.pcnn-loader-lock,
html.pcnn-loader-lock body { overflow: hidden !important; }

.pcnn-page-loader__atmosphere,
.pcnn-page-loader__atmosphere::before,
.pcnn-page-loader__atmosphere::after {
  position: absolute;
  border: 1px solid rgba(54, 211, 153, .09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.pcnn-page-loader__atmosphere {
  width: min(78vw, 520px);
  aspect-ratio: 1;
}

.pcnn-page-loader__atmosphere::before { inset: 14%; }
.pcnn-page-loader__atmosphere::after { inset: 29%; }

.pcnn-page-loader__atmosphere i {
  position: absolute;
  border-radius: 50%;
  animation: pcnn-loader-float 2.8s ease-in-out infinite;
}

.pcnn-page-loader__atmosphere i:nth-child(1) {
  width: 7px;
  height: 7px;
  top: 13%;
  right: 18%;
  background: #36d399;
  box-shadow: 0 0 18px rgba(54, 211, 153, .9);
}

.pcnn-page-loader__atmosphere i:nth-child(2) {
  width: 5px;
  height: 5px;
  bottom: 18%;
  left: 12%;
  background: #d7ad55;
  box-shadow: 0 0 16px rgba(215, 173, 85, .82);
  animation-delay: .35s;
  animation-direction: reverse;
}

.pcnn-page-loader__atmosphere i:nth-child(3) {
  width: 4px;
  height: 4px;
  top: 35%;
  left: 7%;
  background: #9cc5b5;
  animation-delay: .7s;
}

.pcnn-page-loader__content {
  position: relative;
  z-index: 1;
  width: min(100%, 330px);
  display: grid;
  justify-items: center;
  text-align: center;
}

.pcnn-page-loader__logo {
  position: relative;
  width: 102px;
  height: 102px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 29px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 26px 65px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .07);
  animation: pcnn-loader-logo 1.7s ease-in-out infinite;
}

.pcnn-page-loader__logo::before,
.pcnn-page-loader__logo::after,
.pcnn-page-loader__logo span {
  position: absolute;
  border-radius: 34px;
  content: "";
  pointer-events: none;
}

.pcnn-page-loader__logo::before {
  inset: -8px;
  border: 1px solid rgba(54, 211, 153, .18);
  animation: pcnn-loader-ring 1.65s ease-out infinite;
}

.pcnn-page-loader__logo::after {
  inset: -16px;
  border: 1px solid rgba(54, 211, 153, .08);
  animation: pcnn-loader-ring 1.65s .42s ease-out infinite;
}

.pcnn-page-loader__logo span {
  inset: 7px;
  background: radial-gradient(circle, rgba(54, 211, 153, .16), transparent 68%);
  filter: blur(7px);
}

.pcnn-page-loader__logo img {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: block;
}

.pcnn-page-loader__content > strong {
  font: 900 1.28rem/1 Arial, sans-serif;
  letter-spacing: .21em;
  text-indent: .21em;
}

.pcnn-page-loader__content > p {
  min-height: 25px;
  margin: 11px 0 0;
  color: #c6d8d1;
  font: 700 .82rem/1.8 "Vazirmatn", Tahoma, sans-serif;
}

.pcnn-page-loader__content > small {
  margin-top: 11px;
  color: #758d83;
  font: 600 .61rem/1.6 "Vazirmatn", Tahoma, sans-serif;
}

.pcnn-page-loader__progress {
  position: relative;
  width: 132px;
  height: 3px;
  overflow: hidden;
  margin-top: 20px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
}

.pcnn-page-loader__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b8f67, #36d399, #d7ad55);
  box-shadow: 0 0 13px rgba(54, 211, 153, .52);
  animation: pcnn-loader-progress 1.05s ease-in-out infinite;
}

@keyframes pcnn-loader-progress {
  0% { transform: translateX(-115%); }
  55%, 100% { transform: translateX(330%); }
}

@keyframes pcnn-loader-ring {
  0% { opacity: .7; transform: scale(.92); }
  78%, 100% { opacity: 0; transform: scale(1.18); }
}

@keyframes pcnn-loader-logo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pcnn-loader-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: .75; }
  50% { transform: translateY(-9px) scale(1.2); opacity: 1; }
}

@media (max-width: 560px) {
  .pcnn-page-loader__atmosphere { width: min(118vw, 460px); }
  .pcnn-page-loader__logo { width: 92px; height: 92px; border-radius: 26px; }
  .pcnn-page-loader__logo img { width: 68px; height: 68px; }
  .pcnn-page-loader__content > p { font-size: .77rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pcnn-page-loader,
  .pcnn-page-loader__logo,
  .pcnn-page-loader__logo::before,
  .pcnn-page-loader__logo::after,
  .pcnn-page-loader__progress i,
  .pcnn-page-loader__atmosphere i {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .pcnn-page-loader__progress i { width: 100%; opacity: .65; }
}