/* ============================================================
   corbet-footer
   Drop-in signature footer for Cloudflare Pages projects.
   Zero dependencies. Inherits the host page's font-family.
   Retheme per project by overriding the --cf-* tokens.

   Contrast (WCAG 2.x, verified):
     light: link default 4.73:1 composited, hover 11.87:1
     dark:  link default 5.48:1 composited, hover 14.50:1
   ============================================================ */

.cf {
  --cf-bg: #F7F5F1;       /* natural cotton */
  --cf-hairline: #DFD9CE;
  --cf-muted: #5B5549;    /* warm stone, AA at 0.85 opacity */
  --cf-ink: #35312A;
  --cf-accent: #4C6B4F;   /* moss */

  position: relative;
  background: var(--cf-bg);
  color: var(--cf-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

@media (prefers-color-scheme: dark) {
  .cf {
    --cf-bg: #181613;
    --cf-hairline: #2D2A25;
    --cf-muted: #A9A294;
    --cf-ink: #EAE6DD;
    --cf-accent: #93B08D;
  }
}

/* Hairline rule. Drawn in on arrival where supported (see below). */
.cf::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--cf-hairline);
}

.cf-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: 2.5rem 1.5rem 3rem;
  display: flex;
  flex-wrap: wrap;                /* stacks cleanly on narrow screens */
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem 3rem;
}

/* --- signature --------------------------------------------- */

.cf-sig {
  margin: 0;
}

.cf-sig-link {
  color: var(--cf-ink);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.cf-sig-link:hover {
  opacity: 0.85;
  text-decoration: underline wavy var(--cf-accent) 1px;
  text-underline-offset: 0.3em;
}

/* --- project directory -------------------------------------- */

.cf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.cf-link {
  color: var(--cf-muted);
  opacity: 0.85;                  /* composited value still clears AA */
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.3em;
  transition:
    opacity 0.2s ease,
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.cf-link:hover {
  opacity: 1;
  color: var(--cf-ink);
  text-decoration-color: var(--cf-accent);
}

/* --- keyboard focus ----------------------------------------- */

.cf a:focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- arrival ------------------------------------------------
   The footer keeps quiet until the reader reaches the absolute
   bottom, then the hairline draws itself and the two clusters
   rise in with a slight stagger. Pure CSS scroll-driven
   animation: Chromium today, and a no-op everywhere else,
   where the footer is simply visible. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cf::before {
      transform-origin: 0 50%;
      animation: cf-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    .cf-sig,
    .cf-nav {
      animation: cf-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    .cf-nav {
      animation-range: entry 15% entry 100%;
    }
  }
}

@keyframes cf-draw {
  from { transform: scaleX(0); }
}

@keyframes cf-rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}