/* Section 11, the footer. Like Wispr's: link columns, a giant wordmark across the full
   width, and the small print with social icons. footer.js plays the wordmark in and
   shows "Coming soon" for links to pages that don't exist yet. */

.foot { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 8px 0 28px; color: var(--ink); container-type: inline-size; }

/* ---------- link columns ---------- */
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ft-col h3 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.ft-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ft-col a { color: #3E3858; font-size: 15px; text-decoration: none; transition: color 0.15s; }
.ft-col a:hover { color: var(--violet); }
.foot a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

/* ---------- the giant wordmark (footer.js stretches it across the whole screen,
   with a small gap at each end, and fits the type to that width) ---------- */
.ft-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: clamp(48px, 7vw, 88px) 0 clamp(16px, 2.4vw, 28px);
  padding-bottom: 0.2em; /* room for the p's tail above the line below */
  color: var(--ink);
  font: 800 min(318px, 28.5cqw)/0.9 var(--body); /* sized to the footer: nearly its full width at every size, like Wispr's */
  letter-spacing: -0.045em;
  text-decoration: none;
}
.ft-logo { height: 0.86em; width: auto; aspect-ratio: 71.5 / 79; flex: none; margin-right: 0.07em; overflow: visible; } /* framed tight to the slices: no built-in margin */
.ft-slice path { fill: var(--violet); stroke: var(--violet); stroke-width: 7; stroke-linejoin: round; }
.ft-slice { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ft-word { letter-spacing: -0.03em; padding-right: 0.025em; } /* heavy, like Wispr's: Bricolage at its boldest (800). A test checks the i keeps its dot (it once read "Vcllp" when thickened with an outline). */
.ft-word i { display: inline-block; font-style: normal; }
/* hover: the three slices pull apart a little, as if being clipped */
.ft-mark:hover g.ft-slice:nth-of-type(1) { transform: translateX(-7px); }
.ft-mark:hover g.ft-slice:nth-of-type(2) { transform: translateX(-2px); }
.ft-mark:hover g.ft-slice:nth-of-type(3) { transform: translateX(6px); }

/* the first time it's seen: the slices fly in and snap together, the letters rise
   (footer.js adds .ft-wait, then .ft-in). Animations, so hover stays instant after. */
.ft-wait .ft-slice, .ft-wait .ft-word i { opacity: 0; }
.ft-in .ft-slice { animation: ft-slice-in 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; }
.ft-in g.ft-slice:nth-of-type(2) { animation-delay: 0.1s; }
.ft-in g.ft-slice:nth-of-type(3) { animation-delay: 0.2s; }
.ft-in .ft-word i { animation: ft-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ft-in .ft-word i:nth-child(1) { animation-delay: 0.3s; }
.ft-in .ft-word i:nth-child(2) { animation-delay: 0.36s; }
.ft-in .ft-word i:nth-child(3) { animation-delay: 0.42s; }
.ft-in .ft-word i:nth-child(4) { animation-delay: 0.48s; }
.ft-in .ft-word i:nth-child(5) { animation-delay: 0.54s; }
@keyframes ft-slice-in { from { opacity: 0; transform: translateX(-46px); } }
@keyframes ft-rise { from { opacity: 0; transform: translateY(35%); } }
@media (prefers-reduced-motion: reduce) {
  .ft-slice { transition: none; }
  .ft-mark:hover .ft-slice { transform: none !important; }
}

/* ---------- the small print ---------- */
.ft-bottom { display: flex; align-items: center; gap: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ft-copy { margin: 0; }
.ft-legal { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.ft-legal a { color: var(--muted); text-decoration: none; }
.ft-legal a:hover { color: var(--violet); }
.ft-social { display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.ft-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ft-social a:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.ft-social svg { width: 16px; height: 16px; fill: currentColor; }

/* "Coming soon", by a link to a page that isn't built yet */
.ft-soon {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% -100%;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
.ft-soon.on { opacity: 1; transform: translateY(-10px); }

/* ---------- tablets and phones ---------- */
@media (max-width: 760px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .ft-bottom { flex-wrap: wrap; row-gap: 14px; }
  .ft-social { margin-left: 0; width: 100%; }
}