/* Local, wordmark-only subsets. Sources and OFL licenses live in public/fonts. */
@font-face {
  font-family: 'Mapshroom Grotesk';
  src: url('/assets/space-grotesk-brand.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}

.loading-brand-lockup .loading-brand-logo {
  position: relative;
  display: inline-block;
  flex: none;
  transform: translateY(7px);
  animation-name: loading-brand-icon-fade;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.loading-brand-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.loading-brand-logo-pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  image-rendering: pixelated;
  pointer-events: none;
  animation: loading-brand-icon-pixels 4.2s step-end infinite;
}

/* Three small square patches flash briefly, followed by a long quiet hold. */
@keyframes loading-brand-icon-pixels {
  0%, 5%, 9%, 11%, 100% {
    opacity: 0;
    transform: none;
  }
  4% {
    opacity: 0.75;
    clip-path: inset(12% 48% 64% 28%);
    transform: translate(1px, 0);
  }
  8% {
    opacity: 0.65;
    clip-path: inset(26% 20% 50% 56%);
    transform: translate(-1px, 1px);
  }
  10% {
    opacity: 0.55;
    clip-path: inset(64% 40% 20% 44%);
    transform: translate(1px, 0);
  }
}

@keyframes loading-brand-icon-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loading-brand-lockup .loading-brand-name {
  display: flex;
  height: 1em;
  font-family: 'Mapshroom Grotesk', 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

.loading-brand-lockup .loading-brand-letter {
  position: relative;
  display: block;
  flex: none;
  height: 1em;
  font-weight: inherit;
  opacity: 0;
  transform: none;
  animation: loading-brand-letter-reveal 140ms ease-out var(--glyph-delay) both;
}

/* Reveal from left to right without moving or resizing any letter. */
@keyframes loading-brand-letter-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Every face, including the settled font, shares one fixed SVG coordinate system. */
.loading-brand-glyph {
  position: absolute;
  bottom: 0;
  left: -0.0225em;
  display: block;
  height: 1em;
  overflow: visible;
  fill: currentColor;
  pointer-events: none;
}

.loading-brand-rest-letter,
.loading-brand-variant {
  animation-duration: var(--glyph-cycle);
  animation-delay: var(--glyph-delay);
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
}

.loading-brand-rest-letter {
  animation-name: loading-brand-glyph-rest;
}

.loading-brand-variant {
  opacity: 0;
}

.loading-brand-variant-pixel { animation-name: loading-brand-glyph-pixel; }
.loading-brand-variant-arcade { animation-name: loading-brand-glyph-arcade; }
.loading-brand-variant-oxanium { animation-name: loading-brand-glyph-oxanium; }
.loading-brand-variant-pixelify { animation-name: loading-brand-glyph-pixelify; }
.loading-brand-variant-chakra { animation-name: loading-brand-glyph-chakra; }

/* Every alternate outline has the same ink bounds; only visibility changes. */
@keyframes loading-brand-glyph-rest {
  0% { opacity: 0; }
  14%, 100% { opacity: 1; }
}

@keyframes loading-brand-glyph-pixel {
  0%, 12% { opacity: 1; }
  2%, 14%, 100% { opacity: 0; }
}

@keyframes loading-brand-glyph-arcade {
  0%, 4%, 12%, 100% { opacity: 0; }
  2%, 10% { opacity: 1; }
}

@keyframes loading-brand-glyph-oxanium {
  0%, 6%, 100% { opacity: 0; }
  4% { opacity: 1; }
}

@keyframes loading-brand-glyph-pixelify {
  0%, 8%, 100% { opacity: 0; }
  6% { opacity: 1; }
}

@keyframes loading-brand-glyph-chakra {
  0%, 10%, 100% { opacity: 0; }
  8% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-brand-lockup .loading-brand-letter {
    opacity: 1;
    animation: none;
  }

  .loading-brand-logo-pixels {
    display: none;
    animation: none;
  }

  .loading-brand-lockup .loading-brand-logo {
    opacity: 1;
    animation: none;
  }

  .loading-brand-variant {
    display: none;
  }

  .loading-brand-rest-letter,
  .loading-brand-variant {
    animation: none;
  }
}