* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  background: #0a0a0a;
  color: #d4d4d8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

::selection { background: #27272a; color: #f4f4f5; }

#ascii {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

main a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.5s ease-out forwards;
  transition: transform 0.3s ease-out;
}

main a:nth-child(1) { animation-delay: 0.2s; }
main a:nth-child(2) { animation-delay: 0.3s; }
main a:nth-child(3) { animation-delay: 0.4s; }
main a:nth-child(4) { animation-delay: 0.5s; }

main a:hover { transform: translateX(4px); }

.title {
  /* ponytail: #a1a1aa is the dimmest zinc that still clears WCAG AA (7.7:1 on #0a0a0a) */
  color: #a1a1aa;
  font-size: 1.125rem;
  transition: color 0.3s;
}
main a::after {
  content: attr(data-note);
  color: #a1a1aa;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s;
}

main a:hover .title, main a:focus-visible .title { color: #e4e4e7; }
main a:hover::after, main a:focus-visible::after { opacity: 1; }

@media (min-width: 640px) {
  .title { font-size: 1.25rem; }
}

footer {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #52525b;
  opacity: 0;
  animation: fade 1s ease-out 1s forwards;
}

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  main a, footer { animation-duration: 0.01ms; }
}