/* ===== Intro loader (first page load of a visit only) ===== */
#loading {
  display: none;
}

.show-loader #loading {
  position: fixed;
  inset: 0;
  z-index: 10000; /* above the fixed navbar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--primary, #f7fff8);
  color: var(--text, #339966);
  font-family: 'Sniglet', cursive;
  transition: opacity 0.3s ease;
}

.loader-hide #loading {
  opacity: 0;
  pointer-events: none;
}

#loading p {
  margin: 0;
}

.cat-loader {
  width: min(220px, 60vw);
  height: auto;
  animation: loaderPulse 3s infinite linear;
}

.loading-label {
  font-size: 1.2rem;
  margin-top: 12px;
}

.typing-text {
  font-size: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--text, #339966);
  width: 0;
  animation: loaderTyping 0.8s steps(10, end) forwards, loaderBlink 0.8s step-end infinite;
}

@keyframes loaderPulse {
  0%   { transform: scale(1) rotate(0deg);      opacity: 1; }
  50%  { transform: scale(1.05) rotate(180deg); opacity: 0.9; }
  100% { transform: scale(1) rotate(360deg);    opacity: 1; }
}

@keyframes loaderTyping {
  from { width: 0; }
  to   { width: 9ch; }
}

@keyframes loaderBlink {
  50% { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-loader,
  .typing-text {
    animation: none;
  }
  .typing-text {
    width: 9ch;
  }
}