:root {
  --pn-loader-blue: #3358b8;
  --pn-loader-blue-bright: #4d72d1;
  --pn-loader-ink: #080808;
  --pn-loader-muted: rgba(8, 8, 8, 0.66);
  --pn-loader-paper: #ffffff;
  --pn-loader-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.pn-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--pn-loader-paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--pn-loader-ease), visibility 0s linear 180ms;
}

.pn-page-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--pn-loader-ease), visibility 0s linear 0s;
}

.pn-page-loader-inner {
  width: min(100%, 430px);
  display: grid;
  justify-items: center;
  text-align: center;
}

.pn-morphing-spinner {
  width: 54px;
  height: 54px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(8, 8, 8, 0.08),
    0 12px 34px rgba(51, 88, 184, 0.2);
  /* Two animations on one clock. The spin and pulse run on the compositor, so
     they stay smooth while the next page loads on the main thread; only the
     corner morph (border-radius cannot be composited) is left behind there. */
  animation:
    pn-smooth-morph 3s cubic-bezier(0.65, 0, 0.35, 1) infinite,
    pn-smooth-morph-radius 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}

.pn-morphing-spinner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pn-page-loader-kicker {
  margin: 24px 0 0;
  color: var(--pn-loader-blue);
  font-family: 'UI', 'Text', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pn-page-loader-title {
  max-width: 410px;
  margin: 10px 0 0;
  color: var(--pn-loader-blue);
  font-family: 'Geo', 'Text', system-ui, sans-serif;
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-wrap: balance;
}

.pn-page-loader-message {
  max-width: 350px;
  margin: 14px 0 0;
  color: var(--pn-loader-ink);
  font-family: 'Text', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.pn-page-loader-track {
  width: min(100%, 210px);
  height: 4px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.1);
}

.pn-page-loader-track::after {
  content: '';
  width: 52%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--pn-loader-blue-bright);
  transform: translateX(-110%);
  animation: pn-loader-progress 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}

@keyframes pn-smooth-morph {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(0.9) rotate(72deg); }
  40% { transform: scale(1.1) rotate(144deg); }
  60% { transform: scale(0.85) rotate(216deg); }
  80% { transform: scale(1.05) rotate(288deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes pn-smooth-morph-radius {
  0% { border-radius: 50%; }
  20% { border-radius: 35%; }
  40% { border-radius: 15%; }
  60% { border-radius: 8%; }
  80% { border-radius: 25%; }
  100% { border-radius: 50%; }
}

@keyframes pn-loader-progress {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(65%); }
  100% { transform: translateX(215%); }
}

@media (max-width: 620px) {
  .pn-page-loader { padding: 20px; }
  .pn-morphing-spinner { width: 48px; height: 48px; }
  .pn-page-loader-title { font-size: clamp(34px, 11vw, 46px); }
  .pn-page-loader-message { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-page-loader,
  .pn-page-loader.is-visible {
    transition-duration: 0.01ms;
  }

  .pn-morphing-spinner,
  .pn-page-loader-track::after {
    animation: none;
    transform: none;
  }

  .pn-morphing-spinner { border-radius: 22%; }
  .pn-page-loader-track::after { width: 100%; opacity: 0.72; }
}