/* "Flow", on every page: the eased scrolling (flow.js) and the taller black footer. After
   zuzakrzyska.com/projects and Inspiration/Motion/Footer : Scroll.mov. Switched on by class="flow"
   on each page's <body>, with this file and flow.js; add ?flow=off to any address to compare
   without it. To remove it: delete this file and flow.js, and the class, <link> and <script> lines
   marked "flow" in each page. Nothing else depends on it.

   Here: the taller black footer with its row of contact links. The footer's contents are lifted by
   flow.js (--flow-lift) so they stay put at the foot of the screen while the page above slides
   away from them, as in the reference video; at the end of the page the lift is 0, so the name,
   its stars, the links and the pressed name sit exactly where they always do. */

.flow .sf {
  /* the room added above the name: the contact row and the space around it */
  --flow-room: max(150px, 210 * var(--u));
  min-height: calc(max(280px, 462 * var(--u)) + var(--flow-room));
}

/* every part of the footer moves together; the footer's own edge clips them */
.flow .sf > * {
  transform: translateY(var(--flow-lift, 0px));
  will-change: transform;
}

/* The contact row: the width of the homepage gallery, one link at each end, in the footer's link
   type and the light blue of the homepage's [Selected work] label (.hm-tag) */
.flow-contact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 32px;
  width: min(91.96vw, 1680px);
  height: var(--flow-room);
  margin: calc(-1 * max(48px, 69 * var(--u))) 0 0;
  padding: max(40px, 56 * var(--u)) 0 0;
  box-sizing: border-box;
  color: var(--blue-light);
  font-family: var(--cs-sans, "Epilogue", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--text-base);
  list-style: none;
}

.flow-contact a,
.flow-contact span {
  white-space: nowrap;
  text-underline-offset: 3px;
}

.flow-contact a:hover,
.flow-contact a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* the footer's own top padding now sits under the row */
.flow .sf .sf-mark {
  margin-top: max(48px, 69 * var(--u));
}

/* Phone: the three links stack, left-aligned to the same edge */
@media (max-width: 699px) {
  .flow .sf {
    --flow-room: 170px;
  }

  .flow-contact {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: calc(100% - 32px);
    padding-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow .sf > * {
    transform: none;
    will-change: auto;
  }
}