/* ==========================================================================
   Footer  —  Figma "Footer - Animate" (720:25267)
   1920 x 936 at y 10623, on Mono/Dark.

   Default -> Animate:
     logo mark      translateX -68  -> 0
     column labels  translateY +20  -> 0
     column links   translateY +20  -> 0
     email field    translateY +56  -> 0
     Subscribe      translateX +180 -> 0
     Back to top    translateY +20  -> 0
     Terms          translateX -150 -> 0
     Privacy        translateX -120 -> 0
     copyright      translateX +250 -> 0
     wordmark       static
   ========================================================================== */

.footer {
  top: calc(10623 * var(--s));
  height: calc(936 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 5;
}

.footer__cols,
.footer__col,
.footer__news,
.footer__form,
.footer__legal-bar { display: contents; }

.footer__mark {
  position: absolute;
  left: calc(48.18 * var(--s));
  top: calc(36 * var(--s));
  width: calc(63.998 * var(--s));
  height: calc(64 * var(--s));
}
.footer__mark img { width: 100%; height: 100%; }

.footer__label {
  position: absolute;
  top: calc(36 * var(--s));
  height: calc(19 * var(--s));
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: #767676;
}
.footer__label--product { left: calc(25% + 9 * var(--s));    width: calc(154 * var(--s)); }
.footer__label--company { left: calc(33.33% + 83 * var(--s)); width: calc(154 * var(--s)); }
.footer__label--news    { left: calc(66.67% - 23 * var(--s)); width: calc(241 * var(--s)); white-space: nowrap; }

.footer__link {
  position: absolute;
  height: calc(19 * var(--s));
  width: calc(154 * var(--s));
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
}
.footer__link a { transition: color 200ms ease; }
.footer__link a:hover { color: var(--c-accent-yellow); }

.footer__link--p1 { left: calc(25% + 9 * var(--s));     top: calc(95 * var(--s)); }
.footer__link--p2 { left: calc(25% + 9 * var(--s));     top: calc(130 * var(--s)); }
.footer__link--c1 { left: calc(33.33% + 83 * var(--s)); top: calc(95 * var(--s)); }
.footer__link--c2 { left: calc(33.33% + 83 * var(--s)); top: calc(130 * var(--s)); }
.footer__link--c3 { left: calc(33.33% + 83 * var(--s)); top: calc(165 * var(--s)); }

/* --- newsletter ---------------------------------------------------------- */

.footer__field {
  position: absolute;
  left: calc(66.67% - 23 * var(--s));
  top: calc(95 * var(--s));
  width: calc(433 * var(--s));
  height: calc(48 * var(--s));
}
.footer__field input {
  width: 100%;
  height: calc(48 * var(--s));
  padding: calc(14 * var(--s)) calc(16 * var(--s)) calc(15 * var(--s));
  background: var(--c-light-dark);
  border: 0;
  font-family: var(--f-sans);
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
}
.footer__field input::placeholder { color: var(--c-light-grey-02); }
.footer__field input:focus-visible { outline: 1px solid var(--c-accent-yellow); outline-offset: -1px; }

.footer__subscribe {
  position: absolute;
  left: calc(83.33% + 100 * var(--s));
  top: calc(95 * var(--s));
  width: calc(172 * var(--s));
  height: calc(48 * var(--s));
}
.footer__subscribe .rv { height: 100%; }
.footer__subscribe .btn { width: 100%; height: 100%; }

.footer__top {
  position: absolute;
  left: calc(66.67% - 23 * var(--s));
  top: calc(320 * var(--s));
  width: calc(116 * var(--s));
  height: calc(19 * var(--s));
  white-space: nowrap;
}
.footer__top a { color: var(--c-accent-yellow); text-decoration: underline; text-underline-position: from-font; }

/* --- giant wordmark ------------------------------------------------------ */

.footer__wordmark {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(419.63 * var(--s));
  width: calc(1823.993 * var(--s));
  height: calc(387.382 * var(--s));
}
.footer__wordmark svg { display: block; width: 100%; height: 100%; }

/* Letter-by-letter rise. Each path drops a full viewBox height, which puts it
   below the clipPath Figma already ships on the group, so it is hidden without
   any extra masking. --i is the left-to-right index, set once by ui.js. */
.footer__letter {
  transform-box: view-box;
  transform: translateY(100%);
  transition: transform var(--wordmark-dur, 1150ms) var(--rv-ease);
  transition-delay: calc(var(--i, 0) * var(--wordmark-step, 85ms));
}

.footer.is-in .footer__letter { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .footer__letter { transform: none; transition: none; }
}

/* --- legal bar ----------------------------------------------------------- */

.footer__rule {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(855.5 * var(--s));
  width: calc(1824 * var(--s));
  --rule-color: var(--c-mono-light);
  opacity: 0.15;
}

.footer__legal {
  position: absolute;
  top: calc(885.13 * var(--s));
  height: calc(19 * var(--s));
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
  white-space: nowrap;
}
.footer__legal--terms   { left: calc(48 * var(--s));           width: calc(150 * var(--s)); }
.footer__legal--privacy { left: calc(8.33% + 86 * var(--s));   width: calc(115 * var(--s)); }
.footer__legal--copy    { left: calc(83.33% + 29 * var(--s));  width: calc(243 * var(--s)); }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .footer { height: auto; padding: 40px 20px 32px; }

  .footer__mark,
  .footer__label,
  .footer__link,
  .footer__field,
  .footer__subscribe,
  .footer__top,
  .footer__wordmark,
  .footer__rule,
  .footer__legal { position: static; width: auto; height: auto; }

  .footer__mark { width: 48px; height: 48px; }

  .footer__col { display: block; }
  .footer__form { display: block; }
  .footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    margin-top: 32px;
  }
  .footer__label { margin-bottom: 10px; font-size: 12px; }
  .footer__link { margin-bottom: 8px; }

  .footer__news { grid-column: 1 / -1; }
  .footer__field input { height: 48px; }
  .footer__subscribe { margin-top: 10px; width: 172px; height: 48px; }

  .footer__top { margin-top: 28px; display: block; }
  .footer__wordmark { margin-top: 36px; }
  .footer__rule { margin-top: 28px; }

  .footer__legal-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; }
  .footer__legal { font-size: 12px; }
  .footer__legal--copy { width: 100%; }
}