/* Independent of React so the first visible frame follows the brand too.
   The spinner is the logo's own spark, drawn inline: nothing to download
   before it can paint. Deep green is the logo colour (charter p.1). */
#np-page-loader {
  display: none;
}
.np-loading #np-page-loader,
.np-revealing #np-page-loader {
  display: grid;
}
.np-loading {
  overflow: hidden;
}
.np-loading #root {
  visibility: hidden;
}
.brand-loader {
  min-height: 65vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  padding: 32px;
  background: #fff;
  color: #012f2d;
  font:
    14px/1.5 Comfortaa,
    'Segoe UI',
    Arial,
    sans-serif;
  text-align: center;
}
#np-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  min-height: 100%;
  opacity: 1;
  transition: opacity 220ms ease;
}
.np-revealing #np-page-loader {
  opacity: 0;
  pointer-events: none;
}
/* A page that is ready within a blink shows a clean white frame, not a
   flash of spinner. */
.brand-loader-spark {
  display: block;
  width: 56px;
  height: 56px;
  fill: currentColor;
  animation: brand-loader-in 240ms ease-out 140ms both;
}
.brand-loader-spark g {
  animation: spark-chase 1.2s linear infinite;
}
.brand-loader-spark g:nth-child(1) {
  animation-delay: -1s;
}
.brand-loader-spark g:nth-child(2) {
  animation-delay: -0.8s;
}
.brand-loader-spark g:nth-child(3) {
  animation-delay: -0.6s;
}
.brand-loader-spark g:nth-child(4) {
  animation-delay: -0.4s;
}
.brand-loader-spark g:nth-child(5) {
  animation-delay: -0.2s;
}
/* Words only once the wait is long enough to need explaining. */
.brand-loader p {
  margin: 0;
  color: rgb(1 47 45 / 72%);
  font-weight: 500;
  animation: brand-loader-in 300ms ease-out 1200ms both;
}
@keyframes spark-chase {
  0% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0.14;
  }
}
@keyframes brand-loader-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Leaving for another page: the current one stays readable and a thin bar
   across the top acknowledges the click. */
.np-leaving {
  cursor: progress;
}
.np-leaving::after {
  content: '';
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #012f2d;
  transform-origin: left center;
  animation: np-trickle 8s cubic-bezier(0.1, 0.7, 0.1, 1) both;
}
.np-leaving[dir='rtl']::after {
  transform-origin: right center;
}
@keyframes np-trickle {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(0.92);
  }
}

@media (max-width: 640px) {
  .brand-loader {
    padding: 24px;
  }
  .brand-loader-spark {
    width: 48px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader-spark,
  .brand-loader-spark g,
  .brand-loader p {
    animation: none;
  }
  #np-page-loader {
    transition: none;
  }
  .np-leaving::after {
    animation: none;
    transform: scaleX(0.92);
  }
}
@media print {
  #np-page-loader {
    display: none !important;
  }
  .np-loading #root {
    visibility: visible;
  }
  .np-loading {
    overflow: visible;
  }
  .np-leaving::after {
    display: none;
  }
}