/* Loading screen: a cream veil with a compass whose needle quietly seeks north.
   Shown from the first paint (this file is tiny and render-blocking), dismissed by
   src/lib/loader.ts once the app has mounted and the fonts and hero photo are in.
   If JavaScript never runs, the veil hides itself after 7 s. */

#nw-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #f4f3ed;
  color: #0c3343;
  opacity: 1;
  transition:
    opacity 0.7s ease,
    visibility 0s linear 0.7s;
  animation: nw-loader-timeout 0.7s ease 7s forwards;
}

#nw-loader[data-done] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

@keyframes nw-loader-timeout {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.nw-loader-compass {
  width: 104px;
  height: 104px;
  animation: nw-loader-in 0.9s ease both;
}

@keyframes nw-loader-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The graduated ring drifts very slowly; the needle seeks, overshoots, settles. */
.nw-loader-ring {
  transform-origin: 50% 50%;
  animation: nw-loader-drift 48s linear infinite;
}

.nw-loader-needle {
  transform-origin: 50% 50%;
  animation: nw-loader-seek 3.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes nw-loader-drift {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nw-loader-seek {
  0% {
    transform: rotate(-16deg);
  }
  45% {
    transform: rotate(11deg);
  }
  70% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nw-loader-ring,
  .nw-loader-needle,
  .nw-loader-compass {
    animation: none;
  }
}