/* ==========================================================================
   footer.css — part 3: the bar expands into the footer.

   Figma 14530:14879, on a 1920x1080 frame. The bar is 28px and the footer is
   268px, and the second number is the first one grown — which is why this is
   one element that changes height rather than two that swap: "the navigation
   bar expands" is a description of a transition, and a crossfade between two
   boxes is not that.

   Everything inside is pinned from the footer's own top, at Figma's offsets
   less 812 (the footer's top edge on that frame), so the numbers below can be
   read straight off the file.
   ========================================================================== */

.ftr{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 62;                      /* over .bar (60), which it swallows */
  height: var(--ftr-h, 28px);
  background: #393939;
  overflow: hidden;
  font-size: var(--ui-10); letter-spacing: -0.4px; line-height: .5;
  text-transform: uppercase; color: #fff;
  pointer-events: none;
}
.ftr p{ margin: 0; }
.ftr__dim{ opacity: .5; }

/* The contents fade in behind the growing edge rather than being revealed by
   it: at 28px tall a 248px panel clipped to the bar's height reads as a bug,
   not as a reveal. js/footer.js writes both. */
.ftr__in{
  position: absolute; inset: 0;
  opacity: var(--ftr-a, 0);
  pointer-events: none;
}
.ftr.is-open .ftr__in{ pointer-events: auto; }

/* ---------------- the SEE WORK panel -------------------------------------- */
/* Figma: 428 x 248 at (10, 822), i.e. 10px in from the footer's top-left. */
.ftr__work{
  position: absolute; left: 10px; top: 10px;
  width: 428px; height: 248px;
  background: #fff; color: #393939;
  overflow: hidden;
  cursor: none;                     /* the chip below IS the cursor */
  display: block; text-decoration: none;
}
.ftr__corner{ position: absolute; width: 3px; height: 3px; background: #393939; top: 10px; }
.ftr__corner--l{ left: 10px; }
.ftr__corner--r{ right: 10px; }

/* 64px / line-height .75 / tracking -2.56px, which is the same -0.04em the
   white texts use — so one number governs both and neither drifts. */
.ftr__see{
  position: absolute; left: 50%; top: calc(50% - 48px);
  transform: translateX(-50%);
  width: 181px; text-align: center;
  font-size: 64px; line-height: .75; letter-spacing: -0.04em;
  color: #393939;
}

/* The cursor, once it is inside the panel. Positioned by js/footer.js. */
.ftr__chip{
  position: absolute; left: 0; top: 0;
  height: 16px; padding: 0 6px;
  display: flex; align-items: center;
  background: red; color: #fff;
  white-space: nowrap;
  opacity: 0; transition: opacity .12s linear;
  will-change: transform;
}
.ftr__work:hover .ftr__chip{ opacity: 1; }

/* The X and Y read-outs, in the panel's bottom corners — dark on the white
   panel, which is the inverse of the map's white-on-dark at the top of the
   page, and deliberately so: same instrument, opposite ground. */
/* 40px WIDE, FIXED, with 6px inside each edge — not a box that grows with its
   number. The reading is a live cursor position, so its width would otherwise
   change on every pixel of movement and the block would breathe; three digits
   and four would not even be the same shape. The number is centred in what is
   left, so it settles rather than jitters. */
.ftr__xy{
  position: absolute; bottom: 0; height: 16px; width: 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px; background: #393939; color: #fff;
  box-sizing: border-box;
}
.ftr__xy--x{ left: 0; }
.ftr__xy--y{ right: 0; }
.ftr__xy span{ text-align: right; }

/* ---------------- the maker strip ----------------------------------------- */
.ftr__strip{
  position: absolute; left: 444px; top: 10px;
  width: 88px; height: 248px; background: #fff; color: #000;
}
/* THE HEART IS AT (10,10), which is where the `//` used to be — Figma
   14532:15351 has no separator in this strip at all, and the two were fighting
   for the same corner with the heart pushed over to the right to make room for
   something that should not have been there. */
.ftr__heart{ position: absolute; left: 10px; top: 10px; width: 16px; height: 12.963px; }

/* THE BARCODE, (62,10), 16 x 141 — and it BOTTOM-ALIGNS with the rotated
   credit beside it at y=151, which is the alignment the strip is built on and
   the reason both numbers are what they are. `preserveAspectRatio: none` is
   deliberate: the bars carry the code in one axis only, so stretching the other
   one costs nothing and lets the height be a round number. */
.ftr__code{ position: absolute; left: 62px; top: 10px; width: 16px; height: 141px; }
/* Rotated -90, reading bottom-to-top, at Figma's (10,44). */
/* ROTATED SO IT ONLY EVER GOES UP.

   The anchor was the block's CENTRE (transform-origin 50% 100% on a zero-height
   box), and rotating about a centre sends half the content each way — so the
   lower half of the name ran down past the anchor and straight through the
   photo. The text was not being covered by a mispositioned image; it was
   reaching into it.

   Origin at the bottom-LEFT corner instead. rotate(-90) about that point maps
   the block's length entirely ABOVE the anchor and its thickness to the LEFT,
   so translateX by that thickness brings it back into the 16px column. The
   result occupies x 10..26 and rises from the anchor — it cannot grow downward
   however long the name gets.

   The anchor is 97px off the strip's bottom: 248 - 161 (the photo's top) + 10
   (Figma's gap). One number, and it is the gap that matters. */
.ftr__by{
  position: absolute; left: 10px;
  bottom: 97px;
  width: 16px; height: 0;
}
.ftr__by > div{
  position: absolute; left: 0; bottom: 0;
  /* 16px: two 5px line boxes at line-height .5 plus Figma's 6px gap. Explicit,
     because the translate below has to equal it exactly. */
  height: 16px;
  transform-origin: 0 100%;
  transform: translateX(16px) rotate(-90deg);
  /* NOWRAP: Figma's 107 is the measured width of the longer string in ITS
     rendering, and a few px wider anywhere else wraps into a line that overlaps
     rather than stacks, because line-height .5 gives a 5px box for ~10px of ink. */
  white-space: nowrap;
  display: flex; flex-direction: column; gap: 6px;   /* Figma's 6 */
}
.ftr__photo{
  position: absolute; left: 1px; top: 161px;
  width: 86px; height: 86px; background: #ff3535; overflow: hidden;
}
/* The supplied image, at its own size — it arrives 86x86, which IS the square,
   so it needs no cropping, no rotation and no blend. The red behind it stays as
   the box's background for the transparent parts. */
.ftr__photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------- the columns of detail ----------------------------------- */
/* All at Figma's x, and all 10px from the footer's top unless stated. */
.ftr__col{ position: absolute; display: flex; flex-direction: column; }
.ftr__c3, .ftr__c5{ top: auto; }
.ftr__col p + p{ margin-top: 6px; }
/* PROPORTIONAL, not Figma's pixels. The frame is 1920 and the panel and strip
   on the left are FIXED objects — 428 and 88, sizes that mean something. The
   columns are not: they are a rhythm across whatever width there is, and at
   Figma's absolute x they walked straight into the don't-contact-me chip on a
   1440 screen. Each is its own x over 1920, so the rhythm is the file's and the
   spacing is the viewport's.

   537/1920, 722/1920, 969/1920, 1284/1920. */
/* A FLOOR UNDER EACH PERCENTAGE, because the left of this footer is not
   proportional at all: the panel (428) and the strip (88) are fixed objects at
   fixed sizes, and they end at 532 whatever the window is. Pure percentages put
   the first column ON the strip at 1440 — Figma's 537 is 27.97% of 1920, and
   27.97% of 1440 is 403, which is inside it.

   So each column is `max(a floor, Figma's fraction)`. At 1920 and above the
   fractions win and the layout is exactly the file's; below it the floors take
   over and keep the columns clear of the fixed cluster and of each other. The
   first one has no fraction at all — it is anchored to the strip's right edge,
   which is the thing it actually relates to. */
.ftr__c1{ left: 537px;                 top: 10px;  width: 111px; }
.ftr__c2{ left: max(700px, 37.60%);    top: 10px;  width: 111px; gap: 32px; }
/* FROM THE BOTTOM, not from the top. Figma's 1054 and 1065 are offsets on a
   1080 frame, and written as `top` they sat past the footer's own 268 and were
   clipped off the edge of the page. The footer's bottom is the thing they
   actually relate to — the same 10px the panel and the strip keep. */
.ftr__c3{ left: max(700px, 37.60%);    bottom: 10px; width: 126px; }
.ftr__c4{ left: max(880px, 50.47%);    top: 10px;  width: 113px; }
.ftr__c5{ left: max(880px, 50.47%);    bottom: 10px; }
.ftr__c6{ left: max(1060px, 66.88%);   top: 5px;   white-space: nowrap; }
.ftr__c7{ left: max(1060px, 66.88%);   top: 58px;  white-space: nowrap; }
.ftr__grp{ display: flex; flex-direction: column; gap: 6px; }
/* ...AND NOT ALSO THE COLUMN'S MARGIN. `.ftr__col p + p` sets 6px on every
   pair of stacked lines, and these lines are inside a .ftr__grp that already
   spaces them — so both applied and the pairs sat 12px apart where Figma draws
   11px baseline to baseline, i.e. 6. It made each group 22px tall instead of
   16, and the second group in the column started 6px late as a result. */
.ftr__grp p + p{ margin-top: 0; }

/* The chip, in the footer's own top-right — the bar's one, moved up with the
   expansion rather than duplicated. */
.ftr__mail{
  position: absolute; right: 4px; top: 10px;
  height: 20px; padding: 0 6px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: #393939;
  font-size: var(--ui-14); letter-spacing: -0.56px;
  border: 0; cursor: pointer; font-family: inherit; text-transform: uppercase;
}

/* ---------------- the running line ---------------------------------------- */
/* Figma: 632 wide, 16 tall, 10px off the bottom, centred at 50% + 640 — so it
   sits in the right-hand third, not the middle. */
.ftr__ticker{
  /* Figma centres it at 50% + 640 of 1920, which is 2/3 of the width — so it
     is written as that rather than as 640 hard pixels, and it stays in the
     right-hand third at any size instead of running off the edge. */
  /* PINNED AT BOTH ENDS rather than given a width. min(632px, 30vw) resolved
     to 576 at Figma's own 1920 and stopped 60px short of where the frame draws
     it — a width that is only correct at one viewport is a width that is
     correct nowhere. From 1284/1920 to the same 4px inset the contact button
     uses is 632 exactly at 1920, and it stays proportionate everywhere else. */
  position: absolute; bottom: 10px; left: 66.875%; right: 4px;
  height: 16px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  display: flex; align-items: center;
}
/* TWO COPIES, and the travel is exactly one copy's width — the same seamless
   trick as the map's hatch, and the same rule: the loop closes only because the
   distance moved equals the distance repeated. 50% of a two-copy track is one
   copy, so it stays true at any content length. */
.ftr__track{
  display: flex; align-items: center; gap: 32px;
  padding-left: 6px;
  white-space: nowrap;
  color: rgba(255,255,255,.5);
  animation: ftr-run var(--ftr-run, 18s) linear infinite;
  will-change: transform;
}
/* LEFT TO RIGHT: from one copy back to zero, so the content travels rightward
   and the copy behind it arrives to fill the gap. */
@keyframes ftr-run{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}
.ftr__track .s{ opacity: .2; }
@media (prefers-reduced-motion: reduce){
  .ftr__track{ animation: none; }
}