/* ==========================================================================
   THE ARCHITECH — developer credit button
   --------------------------------------------------------------------------
   The credit appears in the footer of more than one page, and those pages do
   not share a stylesheet, so the button lives here rather than in either one.
   It is the only Matrix-flavoured element on the site: a dark terminal pill
   with luminous green type. Nothing else should be tinted with it.
   ========================================================================== */

.ck-architech {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  overflow: hidden;
  background: #04070a;
  border: 1px solid rgba(0, 255, 133, .30);
  border-radius: 6px;
  color: #62ff9c !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-shadow: 0 0 9px rgba(98, 255, 156, .45);
  box-shadow: 0 0 0 1px rgba(0, 255, 133, .05),
              0 0 14px rgba(0, 255, 133, .16),
              inset 0 0 12px rgba(0, 255, 133, .05);
  transition: color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ck-architech::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #62ff9c;
  box-shadow: 0 0 8px #62ff9c;
  animation: ck-architech-pulse 2.6s ease-in-out infinite;
}
/* one restrained scan sweep, on hover only */
.ck-architech::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(98, 255, 156, .17) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
}
.ck-architech:hover {
  color: #bdffd6 !important;
  border-color: rgba(0, 255, 133, .58);
  box-shadow: 0 0 0 1px rgba(0, 255, 133, .12),
              0 0 24px rgba(0, 255, 133, .30),
              inset 0 0 16px rgba(0, 255, 133, .09);
}
.ck-architech:hover::after { transform: translateX(130%); }
.ck-architech:focus-visible { outline: 2px solid rgba(98, 255, 156, .6); outline-offset: 2px; }

@keyframes ck-architech-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-architech::before { animation: none; }
  html.ck-calm .ck-architech::after { display: none; }
  html.ck-calm .ck-architech { transition: none; }


/* The neutral label that sits in front of it. */
.footer-dev-label,
.ck-footer-credit-label {
  color: rgba(255, 255, 255, .42);
  font-size: 11.5px;
}
.footer-developer { gap: 10px; flex-wrap: wrap; }