/* Footer (#footer): links over the black top of a copper pixel forest, with a scroll parallax
   on the two tree layers. Spec 24 and 25. Fixed px heights per the contract (no vh). */
.ft {
  position: relative;
  isolation: isolate; /* the art's screen blend composites over the footer only */
  display: flex;
  align-items: flex-start;
  height: 1100px;
  overflow: hidden;
  background: var(--page);
}
@media (min-width: 640px) {
  .ft { height: 1280px; }
}
@media (min-width: 1024px) {
  .ft { height: 1575px; }
}

/* Art, back to front: copper, the dither gradient, far trees, near trees. The images multiply
   the copper; the group screens over the page, so black art shows the page colour. */
.ft-art {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.ft-copper {
  position: absolute;
  inset: 0;
  background: var(--accent);
}
.ft-gradient,
.ft-far,
.ft-near {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  mix-blend-mode: multiply;
  -webkit-user-select: none;
  user-select: none;
}
.ft-gradient {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Below 1024 the link groups stack and run long, so the footer grows with them and the forest
   sits under the links instead of behind them (white links on bright copper were unreadable) */
@media (max-width: 1023px) {
  .ft { height: auto; }
  .ft-content { padding-bottom: 620px; }
  .ft-art { top: auto; height: 760px; }
}
.ft-far,
.ft-near {
  height: calc(100% + 160px); /* bottom: -160px, room for the lift */
  object-fit: cover;
  object-position: bottom;
  will-change: transform;
}

/* Content: one grid, three arrangements.
   Phone: logo, socials, then the link groups in one column.
   640+: logo with the socials on the right, then two columns of groups.
   1024+: logo and three link columns (1fr each: 280px at 1440), socials in a row below. */
.ft-content {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "logo" "social" "nav" "learn" "legal";
  align-content: start;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 60px;
}
@media (min-width: 640px) {
  .ft-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "logo social" "nav learn" "legal .";
    padding-top: 64px;
  }
}
@media (min-width: 1024px) {
  .ft-content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "logo nav learn legal" "social social social social";
    column-gap: 64px;
    padding-top: 80px;
  }
}

.ft-logo {
  grid-area: logo;
  align-self: start;
  justify-self: start; /* only the mark is a target, not the empty column under it */
}
.ft-logo img {
  display: block;
  width: 40px;
  height: 40px;
}
@media (min-width: 640px) {
  .ft-logo img { width: 48px; height: 48px; }
}
@media (min-width: 1024px) {
  .ft-logo img { width: 64px; height: 64px; }
}

.ft-nav { grid-area: nav; }
.ft-learn { grid-area: learn; }
.ft-legal { grid-area: legal; }
.ft-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ft-label,
.ft-copy {
  color: var(--text-3);
}

/* Socials: white glyphs at .4, full on hover with the white bracket (instant) */
.ft-social {
  grid-area: social;
  display: flex;
  gap: 14px;
}
@media (min-width: 640px) {
  .ft-social {
    justify-self: end;
    align-self: center;
  }
}
@media (min-width: 1024px) {
  .ft-social {
    justify-self: start;
    align-self: start;
  }
}
.ft-soc {
  --pbtn-bracket: #fff;
  position: relative;
}
.ft-soc-link {
  display: block;
  color: #fff;
  opacity: .4;
  transition: opacity 150ms cubic-bezier(.4, 0, .2, 1);
}
.ft-soc-link svg {
  width: 32px;
  height: 32px;
}
@media (min-width: 1024px) {
  .ft-soc-link svg { width: 24px; height: 24px; }
}
@media (hover: hover) {
  .ft-soc:hover .ft-soc-link { opacity: 1; }
  .ft-soc:hover .pbtn-bracket { opacity: .5; }
}
.ft-soc-link:focus-visible {
  opacity: 1;
}
.ft-soc:active .pbtn-bracket {
  opacity: 1;
}