/* ============================================================
   Site footer: one dark terminal panel, shared by every page.
   Markup comes from footer.js (window.SiteFooter); both files are loaded on every page.
   ============================================================ */

/* The footer stays on the light page with the panel inset inside it, and has no background of
   its own: the page's ASCII texture carries on beside and below the panel, keeping clear of it
   like any other content. z-index 1 keeps the panel above that texture's fixed canvas. */
.footer {
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --panel: #111;
  --panel-ink: var(--color-bg);
  --panel-muted: rgba(247,245,241,0.6);
  --panel-line: rgba(247,245,241,0.14);
  --accent: var(--color-accent-on-dark, #7070ff);   /* the site blue, lifted to read on the dark panel */
  --footer-gap: clamp(24px, 4vw, 48px);       /* page -> panel */
  position: relative;
  z-index: 1;
  padding: var(--footer-gap) clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px);
  color: var(--panel-ink);
}
/* ---- the panel ---- */
.footer__panel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 52px) clamp(20px, 2.4vw, 28px);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.8;
  overflow: hidden;
}
/* scanlines + grain over the panel */
.footer__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.6;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;   /* last column fits the five icon chips on one line */
  gap: 32px;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.footer__logo { display: block; align-self: flex-start; height: 104px; width: auto; }   /* don't let the column stretch it */
.footer__tagline { font-size: 0.85rem; line-height: 1.6; color: var(--panel-muted); margin: 0; }
.footer h4 { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; margin: 0 0 14px; color: var(--panel-ink); }
.footer__prompt { color: var(--accent); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer__link {
  font: inherit; color: var(--panel-ink); background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; text-decoration: none; transition: color 0.2s ease;
}
.footer__link:hover, .footer__link:focus-visible { color: var(--accent); }
.footer__link:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.footer__label { font-size: 0.75rem; color: var(--panel-muted); }
.footer__value { margin: 0 0 12px; overflow-wrap: anywhere; }
.footer__socials { display: flex; gap: 8px; flex-wrap: wrap; }
/* icon chips in the Know More pill style: dashed border, rounded, icon centred */
.footer__chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1.5px dashed rgba(247,245,241,0.4);
  border-radius: 10px;
  color: var(--panel-ink);
  overflow: hidden;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.footer__icon { width: 19px; height: 19px; display: block; }
/* scanline flicker, played once on hover/focus */
.footer__chip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, transparent 0, rgba(24,24,254,0.55) 50%, transparent 56%) 0 -120% / 100% 40% no-repeat,
    repeating-linear-gradient(to bottom, rgba(247,245,241,0.14) 0 1px, transparent 1px 3px);
}
.footer__chip:hover, .footer__chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.footer__chip:hover::after, .footer__chip:focus-visible::after { animation: footer-chip-scan 0.45s steps(6, end); }
.footer__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes footer-chip-scan {
  0%   { opacity: 1; background-position: 0 -120%, 0 0; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; background-position: 0 220%, 0 0; }
}

/* ---- bottom: ADAPPT line, then copyright + cursor, with cd ~ on the right ---- */
.footer__bottom {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 18px;
  border-top: 1px dashed var(--panel-line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 6px 24px;
}
.footer__soon { grid-column: 1 / -1; margin: 0; color: var(--accent); font-weight: 700; }
.footer__copy { margin: 0; font-size: 0.72rem; color: var(--panel-muted); }
.footer__cursor {
  display: inline-block; width: 8px; height: 1.2em; margin-left: 6px;
  background: var(--accent); vertical-align: text-bottom;
  box-shadow: 0 0 10px rgba(24,24,254,0.9);
  animation: footer-blink 1s step-end infinite;
}
@keyframes footer-blink { 50% { opacity: 0; } }
.footer__top { font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer { padding: 24px 16px 16px; }
  .footer__panel { padding: 28px 20px 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__chip { width: 44px; height: 44px; }   /* full-size touch targets */
  .footer h4 { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__cursor { animation: none; }
  .footer__chip { transition: border-color 0.2s ease, color 0.2s ease; }
  .footer__chip:hover, .footer__chip:focus-visible { transform: none; }
  .footer__chip:hover::after, .footer__chip:focus-visible::after { animation: none; }
}