/* Reveal letters on each viewport entry, then keep the composition still. */
#grokit-footer-marquee {
  position: relative;
  container-type: inline-size;
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 8px 0 12px;
  color: var(--fg, #0a0a0a);
  pointer-events: none;
  user-select: none;
}

#grokit-footer-marquee + footer { margin-top: 0; }

.grokit-footer-wordmark {
  display: block;
  overflow: hidden;
  overflow: clip;
  font-size: calc((100vw - 64px) * .325);
  font-size: 32.5cqw;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.065em;
  text-align: center;
  white-space: nowrap;
  color: var(--fg, #0a0a0a);
}

.grokit-footer-letter {
  display: inline-block;
  opacity: 1;
  transform: none;
}

.grokit-footer-letter:nth-child(2) { --letter-delay: 80ms; }
.grokit-footer-letter:nth-child(3) { --letter-delay: 160ms; }
.grokit-footer-letter:nth-child(4) { --letter-delay: 240ms; }
.grokit-footer-letter:nth-child(5) { --letter-delay: 320ms; }
.grokit-footer-letter:nth-child(6) { --letter-delay: 400ms; }

@media (prefers-reduced-motion: no-preference) {
  [data-wordmark-reveal="pending"] .grokit-footer-letter {
    opacity: 0;
    transform: translateY(110%);
  }

  [data-wordmark-reveal="active"] .grokit-footer-letter {
    animation: grokit-footer-letter-in 700ms cubic-bezier(.2, 0, 0, 1) both;
    animation-delay: var(--letter-delay, 0ms);
  }
}

@keyframes grokit-footer-letter-in {
  from { opacity: 0; transform: translateY(110%); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 639px) {
  #grokit-footer-marquee { width: calc(100% - 32px); }
}

@media (forced-colors: active) {
  .grokit-footer-wordmark { color: CanvasText; }
}