@import url("/css/tokens.css");

/* Numbers V2 — shared footer.
   Paper: SD-0 "Footer (black)" 19I-0 (1440) / F1M-1 (390, Work lane).
   Every colour is a token; the one glow uses var(--electric). */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  /* sides follow the page gutter (20 on a phone, 48 from 601 px) so the
     footer lines up with the sections above it */
  padding: 64px var(--v2-gutter, 20px) 36px;
}

/* The soft electric glow rising behind the brand line (desktop only, per Paper).
   Three copies of the same radial, each carrying a third of its alpha, so when
   they sit on top of each other they add back up to the 30% / 8% glow that was
   here before. Each copy then drifts on its own slow closed path (22, 26 and
   30 s), which makes the light braid across the footer. Peak alpha can never
   exceed the original 30%, so contrast stays exactly as it was.

   The layers are 24% larger than the footer (inset: -12%) and the gradient is
   remapped into that box (footprint offset 28% / 100%, radii 50% / 85%), so at
   rest the visible gradient lands on the original coordinates. The extra room
   lets a layer move ~70 px without ever showing an edge. */
.site-footer__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.site-footer__glow-layer {
  position: absolute;
  inset: -12%;
  background-image: radial-gradient(
    ellipse 40.3226% 68.5484% at 32.2581% 90.3226%,
    color-mix(in srgb, var(--electric) 11.21%, transparent) 0%,
    color-mix(in srgb, var(--electric) 2.74%, transparent) 45%,
    transparent 75%
  );
  transform: translate3d(0, 0, 0) scale(1);
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  backface-visibility: hidden;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 100%;
  max-width: 1248px;
  margin-inline: auto;
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* ---------- brand ---------- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  color: var(--white);
  text-decoration: none;
}

.site-footer__mark {
  display: block;
  width: 25px;
  height: 22px;
  flex: none;
}

.site-footer__word {
  font-size: 30px;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site-footer__tagline {
  margin: 0;
  max-width: 596px;
  color: var(--white);
  font-size: 40px;
  font-weight: 900;
  line-height: 44px;
  letter-spacing: -0.03em;
}

.site-footer__sub {
  margin: 0;
  max-width: 596px;
  color: var(--body-on-black);
  font-size: 16px;
  line-height: 25px;
}

/* ---------- link columns ---------- */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-footer__label {
  margin: 0;
  color: var(--label-on-black);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 22px;
}

.site-footer__links a {
  display: inline-block;
  color: var(--white);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-decoration: none;
  transition: color 0.18s var(--ease-soft);
}

.site-footer__links a:hover {
  color: var(--electric);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.site-footer__links a:focus-visible,
.site-footer__logo:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- legal ---------- */
.site-footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.site-footer__legal {
  margin: 0;
  color: var(--label-on-black);
  font-size: 13px;
  line-height: 20px;
}

/* ---------- tablet and up: Paper's 1440 type and spacing ---------- */
@media (min-width: 768px) {
  .site-footer {
    padding: 112px max(var(--v2-gutter, 48px), calc((100% - 1248px) / 2)) 48px;
  }

  .site-footer__glow {
    display: block;
  }

  .site-footer__inner {
    gap: 96px;
  }

  .site-footer__top {
    gap: 56px;
  }

  .site-footer__brand {
    gap: 32px;
    width: 596px;
    max-width: 100%;
    flex: none;
  }

  .site-footer__logo {
    gap: 6.6px;
  }

  .site-footer__mark {
    width: 31px;
    height: 28px;
  }

  .site-footer__word {
    font-size: 38.5px;
    line-height: 28px;
  }

  .site-footer__tagline {
    font-size: 64px;
    line-height: 68px;
    white-space: nowrap;
    max-width: none;
  }

  .site-footer__br {
    display: none;
  }

  .site-footer__sub {
    font-size: 18px;
    line-height: 28px;
  }

  .site-footer__nav {
    display: flex;
    flex: none;
    gap: 40px;
    width: auto;
    padding-top: 0;
  }

  .site-footer__col {
    width: 150px;
    gap: 14px;
  }

  .site-footer__label {
    padding-bottom: 4px;
    font-size: 12px;
  }

  .site-footer__links {
    gap: 14px;
    font-size: 16px;
    line-height: 24px;
  }

  .site-footer__bottom {
    padding-top: 28px;
  }

  .site-footer__legal {
    font-size: 14px;
  }
}

/* Paper's row (brand left, 3 x 150 columns right) from 1200 px. The sides
   follow the page gutter (96 above 1200), so the one-line tagline (641 px in
   Chrome's Inter, 593 in Paper) only clears the columns from 1400; between
   1200 and 1399 it breaks after "Top shelf." like the phone frame (F1M-1)
   instead of dropping the columns under the brand. */
@media (min-width: 1200px) {
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }

  .site-footer__brand {
    flex: 0 1 596px;
    min-width: 0;
  }

  .site-footer__nav {
    padding-top: 10px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-footer__tagline {
    white-space: normal;
  }

  .site-footer__br {
    display: inline;
  }
}

/* three different slow closed paths (22 / 26 / 30 s). Every path starts and
   ends at the rest transform and eases at each turn, so the loop has no seam. */
.site-footer__glow-layer--a {
  animation-name: footer-glow-a;
  animation-duration: 26s;
}

.site-footer__glow-layer--b {
  animation-name: footer-glow-b;
  animation-duration: 30s;
}

.site-footer__glow-layer--c {
  animation-name: footer-glow-c;
  animation-duration: 22s;
}

@keyframes footer-glow-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  24% {
    transform: translate3d(58px, -16px, 0) scale(1.035);
  }
  52% {
    transform: translate3d(14px, -30px, 0) scale(1.055);
  }
  78% {
    transform: translate3d(-34px, -8px, 0) scale(1.02);
  }
}

@keyframes footer-glow-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  28% {
    transform: translate3d(-16px, -34px, 0) scale(1.05);
  }
  56% {
    transform: translate3d(-44px, -10px, 0) scale(1.02);
  }
  80% {
    transform: translate3d(-8px, -26px, 0) scale(1.04);
  }
}

@keyframes footer-glow-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(36px, -30px, 0) scale(1.045);
  }
  50% {
    transform: translate3d(-20px, -12px, 0) scale(1.015);
  }
  75% {
    transform: translate3d(-48px, -34px, 0) scale(1.055);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__links a {
    transition: none;
  }

  /* the three copies stay aligned on top of each other: the original glow */
  .site-footer__glow-layer {
    animation: none;
  }
}