/* ==========================================================================
   FOOTER — the purple world at night. The shapes that floated down the
   page arrive scattered and settle into one quiet row (js/footer.js adds
   .is-settled when the footer comes into view).
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(80px, 9vw, 128px);
  background:
    radial-gradient(50% 60% at 90% 100%, rgba(106, 59, 255, .35), transparent 70%),
    var(--ink);
  color: var(--on-dark-2);
}
.footer ::selection { background: var(--white); color: var(--ink); }
.footer :focus-visible { outline-color: var(--lavender); }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px clamp(24px, 4vw, 64px);
  font-size: var(--fs-small);
  line-height: 1.8;
}
.footer .brand { color: var(--on-dark); font-size: 1.125rem; }
.footer .brand__mark { color: var(--lavender); width: 28px; height: 28px; }
.footer__brand p { margin-top: 18px; }
.footer__label {
  margin-bottom: 12px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.footer .link { color: var(--on-dark); }

/* ── The row that settles ──────────────────────────────────── */
.footer__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(6px, .8vw, 12px);
  margin-top: clamp(64px, 8vw, 112px);
  padding: 0 var(--gutter);
}
.footer__row .mt {
  --fill: var(--royal);
  transition-duration: 1.4s;
  transition-delay: calc(var(--ti, 0) * 60ms);
}
/* settled: drops alternating like the S-curve pattern, in two purples */
.footer__row .mt:nth-child(odd)  { --form: 50% 0 50% 50%; --fill: var(--electric); }
.footer__row .mt:nth-child(even) { --form: 50% 50% 50% 0; --fill: var(--royal); }
.footer__row .mt:nth-child(4n)   { --fill: var(--lavender); }
.footer__row .mt:nth-child(4n + 1) { --fill: var(--indigo); }

/* scattered: each tile somewhere else, turned, a different form */
.motion .footer:not(.is-settled) .mt {
  --s: .7;
  transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)) scale(.7);
  border-radius: var(--sf, 50%);
  opacity: .8;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  padding-bottom: 32px;
  border-top: 1px solid var(--line-dark);
  font-size: .8125rem;
  color: var(--on-dark-3);
}

@media (max-width: 899px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .footer__row .mt:nth-child(n + 7) { display: none; }
}