/* ══════════════════════════════════════════════════════════════════════
   footer-tags.css — the falling service pills in the contact footer.

   A port of the reference build on omidrad.com. That site is Framer, and
   its bundle ships a sourcemap, so the pills are not guesswork: every
   number below is lifted from the original `PhysicsSkillTags` component
   and the exact props its instance is given on that page.

     fill        #983e1f      (token fae74411…)
     text        #d5d5d5      (token f303fbd4…)
     border      1px #373838  (token 7a90a13a…)
     type        Geist Mono 400 · 24px · 0 tracking · uppercase
     padding     8px 16px
     radius      99px  (stadium)
     scene       100vh tall, pinned to the bottom of the band

   Namespaced ft-, scoped under .ft-field / .ft, so nothing leaks into the
   contact copy, the nav, or any other section.

   The tags are REAL DOM text, written into index.html. Without JS and
   under prefers-reduced-motion they render as a tidy wrap at the bottom
   of the band. JS only takes over to drop them.
   ══════════════════════════════════════════════════════════════════════ */

/* The contact band picks up the same grain field as Selected work, and
   gains a bottom zone for the pile to live in. Nothing above it moves. */
.ft-field {
  position: relative;
  overflow: hidden;
  background-color: var(--grain-bg);
  background-image: var(--grain-img);
  /* Room for the pile, so it never shares space with the contact rows. */
  padding-bottom: calc(4rem + var(--ft-pile));
}

.ft-field {
  --ft-pile: clamp(210px, 30vh, 340px);

  /* ── Reference values. Change these and both the static fallback and
        the live pills follow — footer-tags.js reads them off the DOM. ── */
  --ft-fill:      #983e1f;
  --ft-text:      #d5d5d5;
  --ft-border:    #373838;
  --ft-border-w:  1px;
  --ft-size:      24px;
  --ft-tracking:  0em;
  --ft-pad-x:     16px;
  --ft-pad-y:     8px;
  --ft-radius:    99px;
  --ft-font:      'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ft-weight:    400;
}

/* The existing contact content sits above the pile, always readable and
   always clickable — it outranks the physics canvas below. */
.ft-field .home-contact-inner { position: relative; z-index: 2; }

/* ── The scene ─────────────────────────────────────────────────────────
   The reference scene is a full viewport-height box pinned to the bottom
   of the footer: tags spawn 50px above its top edge and fall its whole
   height. Anything that overflows the band is clipped by .ft-field. */
.ft {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  /* .home-contact is a 20/60/20 grid AND the positioned ancestor, so an
     absolutely-positioned child here takes its containing block from a grid
     area, not from the section box. Left to auto-place it landed in the
     narrow right-hand column; pinned to column 2 it still began at the 20%
     line, so the pile could never reach the left margin. Spanning every
     column gives the scene the full width of the band. */
  grid-column: 1 / -1;
}

.ft-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: flex-start;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0 1.5rem 1.5rem;
  height: 100%;
}

.ft-tag {
  display: inline-block;
  box-sizing: border-box;
  padding: var(--ft-pad-y) var(--ft-pad-x);
  background: var(--ft-fill);
  color: var(--ft-text);
  border: var(--ft-border-w) solid var(--ft-border);
  border-radius: var(--ft-radius);
  font-family: var(--ft-font);
  font-size: var(--ft-size);
  font-weight: var(--ft-weight);
  letter-spacing: var(--ft-tracking);
  line-height: 1em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Live physics ──────────────────────────────────────────────────────
   JS adds .is-live once matter-js is driving the pills. Until then the
   static wrap above is what's on screen, so there is no flash of
   unpositioned tags. */
.ft.is-live .ft-list {
  display: block;
  padding: 0;
  height: 100%;
}
.ft.is-live .ft-tag {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  will-change: transform;
  /* The canvas takes the pointer, exactly as in the reference — the mouse
     constraint hit-tests bodies, not DOM nodes. */
  pointer-events: none;
}

/* Hidden until released, so they never appear parked at the top edge. */
.ft.is-live .ft-tag[data-ft-waiting] { opacity: 0; }

/* The physics surface. Transparent: matter-js renders nothing visible,
   it only ticks the frame and owns the drag pointer. */
.ft-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: grab;
}
.ft-canvas:active { cursor: grabbing; }

/* ── Phones ────────────────────────────────────────────────────────────
   The reference keeps the physics on mobile and shrinks the pills hard
   (9px, tighter padding). Same here. */
@media (max-width: 768px) {
  .ft-field {
    --ft-size: 10px;
    --ft-tracking: 0.04em;
    --ft-pad-x: 10px;
    --ft-pad-y: 4px;
    --ft-pile: clamp(140px, 22vh, 200px);
  }
  .ft { grid-column: 1; }   /* the grid collapses to one column here */
  .ft-list { padding: 0 1.25rem 1.25rem; }
}

/* ── Reduced motion: never drop. The tidy wrap, and nothing else. ───── */
@media (prefers-reduced-motion: reduce) {
  .ft-field { padding-bottom: 96px; }
  .ft { position: static; height: auto; overflow: visible; margin-top: 3rem; }
  .ft-list { padding: 0; }
  .ft-tag { position: static !important; transform: none !important; opacity: 1 !important; }
  .ft-canvas { display: none; }
}