/* ============================================================
   SkinSignal - THE FOOTER

   The last thing on every page: the lights going down after the
   landing's sections, quiet and finished, not another loud band.

   ONE FOOTER, NINE PAGES. The markup is the same on every page (the
   copies are generated from one source), so this file is its only style.

     the brand   (wide, left) the real wordmark, the moat ("Independent
                 intelligence. Not a marketplace."), the last Sign in with
                 Steam, and the socials
     the map     Product, Community, Company: a gold micro label and a
                 short gold rule over each
     the base    the copyright and the Valve disclaimer, word for word,
                 and the credits

   THE ATMOSPHERE. A composition of knives (assets/landing/footer-knives,
   marketing art, not an item, card or emblem) sits behind the columns on
   the right and runs off the edge, fading in from its left so it never
   reaches the words, over a faint blue light that seats it. It is only
   drawn where the right of the footer is empty: when the footer is
   narrower, the columns move over there and the knives step aside,
   because the words win. It holds still. On a wide screen, a faint "For
   traders. By traders." too.

   ONE PLACE FOR THE URLS. The socials and the About, Contact, Privacy
   and Terms pages take their href from js/links.js. Until a URL is set
   a social is an <a> with no href (it cannot be clicked or tabbed to)
   that looks like the others, and a page not built yet is .is-soon and
   says "Soon" in words, never by colour alone.

   STILL. Hovers are colour and a 1px lift, and nothing else moves.
   Loaded on every page after style.css and before buttons.css.
   ============================================================ */

.footer {
  --f-gold: #e4ae39;
  --f-blue: 106, 159, 255;
  --f-ink: #f1f3f6;
  --f-ink-2: #b9bfca;
  --f-ink-3: #8a919e;
  --pad: clamp(20px, 3.8vw, 76px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(24px, 4vw, 56px);
  background:
    radial-gradient(40% 60% at 18% 0%, rgba(61, 127, 255, 0.07), rgba(61, 127, 255, 0) 70%),
    radial-gradient(34% 70% at 88% 30%, rgba(228, 174, 57, 0.05), rgba(228, 174, 57, 0) 70%),
    linear-gradient(180deg, #070b12 0%, #05080d 60%, #04060a 100%);
}

/* The top edge: clear into blue, through a neutral middle, into gold,
   and out to dark. */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--f-blue), 0) 0%,
    rgba(var(--f-blue), 0.55) 22%,
    rgba(245, 242, 236, 0.14) 50%,
    rgba(228, 174, 57, 0.5) 78%,
    rgba(228, 174, 57, 0) 100%);
}

.footer__inner {
  position: relative;
  container: footer / inline-size;
  max-width: 1768px;
  margin: 0 auto;
  padding: clamp(64px, 6vw, 108px) var(--pad) clamp(28px, 2.6vw, 40px);
}

/* ============================================================
   THE ATMOSPHERE: the knives, behind the columns, off the right edge
   ============================================================ */
/* Placed against the map (the columns), so it is sized and hidden by the
   footer's own width, never sits in the legal rail below, and runs past
   the right edge (the footer clips it). Behind everything: z-index -1
   inside the footer's isolated stack, and no pointer events, so every
   link above it is clicked, not the picture. */
.footer__map { position: relative; }

.footer__knives {
  --kw: clamp(560px, 34vw, 700px);
  position: absolute;
  z-index: -1;
  top: 50%;
  /* Past a 1920px screen, the growing margin beside the measure is added
     back, so on an ultrawide the knives still run off the edge. */
  left: calc(100% - var(--kw) * 0.58 + max(0px, (100vw - 1920px) / 2));
  display: block;
  width: var(--kw);
  aspect-ratio: 3 / 2;
  translate: 0 -50%;
  pointer-events: none;
  user-select: none;
  /* Fades in from its left, so the edge nearest the words is air. */
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 6%, #000 34%);
}
/* A very restrained light behind the blades, to seat them. */
.footer__knives::before {
  content: '';
  position: absolute;
  inset: 14% 6% 12% 24%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 127, 255, 0.16), rgba(228, 174, 57, 0.05) 62%, rgba(228, 174, 57, 0) 100%);
  filter: blur(26px);
}
.footer__knives img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer__motto {
  position: absolute;
  z-index: -1;
  right: clamp(300px, 24vw, 470px);
  bottom: 22%;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 1.3vw, 24px);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(228, 174, 57, 0.32);
  transform: rotate(-10deg);
  pointer-events: none;
}

/* ============================================================
   THE MAP: the brand and three columns
   ============================================================ */
.footer__map {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.62fr)) minmax(0, 0.6fr);
  gap: clamp(28px, 3vw, 64px);
  align-items: start;
}

.footer__wordmark { display: inline-block; }
.footer__wordmark { margin: -14px 0 -10px -10px; }
.footer .footer__wordmark .wordmark__img { display: block; width: auto; height: clamp(64px, 4.6vw, 88px); max-width: none; transition: filter var(--hover-dur, 200ms) ease; }
.footer .footer__wordmark:hover .wordmark__img { filter: brightness(1.14); }

.footer__moat {
  margin: clamp(18px, 1.6vw, 26px) 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(20px, 1.35vw, 26px);
  line-height: 1.25;
  color: var(--f-ink);
}
.footer__moat span { display: block; color: var(--f-gold); }
.footer__moat-sub {
  max-width: 440px;
  margin: 12px 0 clamp(22px, 1.8vw, 28px);
  font-family: var(--font-body);
  font-size: clamp(14px, 0.9vw, 16px);
  line-height: 1.6;
  color: var(--f-ink-2);
}

.footer__cta { min-width: 260px; }

.footer__social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: clamp(22px, 1.8vw, 28px);
}
.footer__socials {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__social {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #e9edf4;
  transition: border-color 180ms ease, color 180ms ease, translate 180ms ease;
}
.footer__social svg { width: 18px; height: 18px; }
.footer__social[href]:hover,
.footer__social[href]:focus-visible { border-color: rgba(var(--f-blue), 0.7); color: #ffffff; translate: 0 -1px; }
.footer__social:focus-visible { outline: 2px solid rgba(var(--f-blue), 0.85); outline-offset: 2px; }

.footer__heading {
  position: relative;
  margin: clamp(12px, 1vw, 16px) 0 30px;
  padding-bottom: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--f-gold);
}
/* The short gold rule, over a longer hairline. */
.footer__heading::before,
.footer__heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
}
.footer__heading::before { width: 28px; background: var(--f-gold); z-index: 1; }
.footer__heading::after { width: 90px; height: 1px; background: rgba(255, 255, 255, 0.08); }

.footer__links {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 0.9vw, 16.5px);
  color: #d5d9e0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
.footer__link[href]:hover,
.footer__link[href]:focus-visible { color: #ffffff; }
.footer__link:focus-visible { outline: 2px solid rgba(var(--f-blue), 0.85); outline-offset: 3px; border-radius: 3px; }
.footer__link.is-soon { color: var(--f-ink-3); }

/* "Soon", in words. */
.footer__soon {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f-ink-2);
}
.is-soon { cursor: default; }

/* ============================================================
   THE BASE
   ============================================================ */
.footer__base {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: clamp(48px, 4.4vw, 76px);
  padding-top: clamp(22px, 1.8vw, 28px);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.1) 30%, rgba(var(--f-blue), 0.35) 70%, rgba(228, 174, 57, 0.3)) 1;
}
.footer__legal {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--f-ink-3);
}
.footer__legal b { font-weight: 600; color: var(--f-ink-2); }
.footer__credits {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--f-ink-3);
  white-space: nowrap;
}
.footer__credits li + li::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 18px;
  vertical-align: middle;
  background: rgba(228, 174, 57, 0.6);
}
.footer__credit--data::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(var(--f-blue), 0.8);
  vertical-align: 1px;
}

/* ============================================================
   NARROWER FOOTERS
   Sized by the footer's own width, not the window's: on the dashboard
   the sidebar takes a column, so the footer is narrower than the screen.
   ============================================================ */
.footer__map > * { min-width: 0; }

@container footer (max-width: 1340px) {
  .footer__map { grid-template-columns: minmax(0, 1.4fr) repeat(3, max-content); }
  .footer__motto { display: none; }
  /* The columns now reach the right edge, where the knives would sit
     behind them: the knives step aside (and, lazy, are never fetched). */
  .footer__knives { display: none; }
}

/* TABLET: the brand takes its own row, the three columns under it. */
@container footer (max-width: 900px) {
  .footer__map { grid-template-columns: repeat(3, max-content); column-gap: clamp(28px, 6vw, 72px); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__base { flex-direction: column; align-items: flex-start; }
  .footer__credits { white-space: normal; flex-wrap: wrap; }
}

/* PHONES: one column; the Steam button full width. */
@container footer (max-width: 600px) {
  .footer__map { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer__cta { width: 100%; min-width: 0; }
  .footer__heading { margin-bottom: 20px; }
  .footer__credits { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__credits li + li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__social,
  .footer__link,
  .footer .footer__wordmark .wordmark__img { transition: none; }
  .footer__social[href]:hover,
  .footer__social[href]:focus-visible { translate: none; }
}