/* Thrive logo loader: logo spins away on scroll and the site fades in underneath. */
:root {
  --nl-backdrop: #fbfaf6;
  --nl-logo-width: min(18vw, 210px);
  --nl-scroll-length: 120vh; /* how much scrolling the reveal takes */
}
@media (max-width: 820px) {
  :root { --nl-logo-width: 36vw; }
}

.nl-spacer { height: var(--nl-scroll-length); }

.nl-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  perspective: 1200px;
}
.nl-loader.is-done { visibility: hidden; }

.nl-backdrop {
  position: absolute;
  inset: 0;
  background: var(--nl-backdrop);
}


.nl-logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--nl-logo-width);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.nl-logo {
  display: block;
  width: 100%;
  height: auto;
  backface-visibility: visible;
}

.nl-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font: 600 11px/1 'Manrope', Helvetica, Arial, sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #2f4a33;
  opacity: 0.7;
  pointer-events: none;
}
.nl-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 12px auto 0;
  background: currentColor;
  animation: nl-hint 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes nl-hint {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* the site underneath fades up as the logo spins away */
.nl-site {
  opacity: 0;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .nl-hint::after { animation: none; }
}