/* ==========================================================================
   The closing line (after spinta.co.uk's): "Seen the prices? Now let's get
   it built." (the prices are on show, so it moves on to starting). The
   sentence and the pill under it are one link, to the contact page.
   The motion, in order:
   - In view (meet.js): the words rise one after another, "built" last, and
     the pill lifts in.
   - Desktop: pills ("Let's talk", "Call us", "Say hello", "Start today")
     trail the pointer across the band, each tipped at its own angle, rising
     from where the trail was to where the pointer is, then fading. Hover
     also draws a line under "costs" and turns the pill's arrow.
   - Touch screens: a ghost pointer draws the same trail on its own, in a
     slow figure of eight, while the band is on screen.
   ========================================================================== */

.meet {
  position: relative;
  z-index: 1;
  overflow: clip;
  padding: clamp(64px, 11vh, 128px) var(--gutter) clamp(72px, 12vh, 136px);
  text-align: center;
  background: var(--bone);
}

/* Paper grain, as on the rest of the page. */
.meet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/textures/grain.webp") repeat;
  background-size: 160px 160px;
  opacity: 0.55;
  pointer-events: none;
}

.meet__link {
  position: relative;
  z-index: 2;
  display: inline-grid;
  justify-items: center;
  gap: clamp(24px, 2.6vw, 40px);
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.meet__line {
  font-size: clamp(1.75rem, 3.4vw, 4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.meet__row {
  display: block;
}

/* Each word in its own mask (they rise in). The padding keeps descenders. */
.meet__w {
  display: inline-block;
  overflow: clip;
  padding: 0 0.04em 0.12em;
  margin: 0 -0.04em -0.12em;
  vertical-align: top;
}

.meet__w > span {
  display: inline-block;
}

/* "costs": the one italic, with a line that draws under it on hover. */
.meet__em {
  position: relative;
  font-style: italic;
  font-weight: 450;
  letter-spacing: -0.025em;
}

.meet__em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.06em;
  bottom: 0.02em;
  height: max(2px, 0.045em);
  background: currentColor;
  scale: 0 1;
  transform-origin: 100% 50%;
  transition: scale 700ms var(--ease-out);
}

/* The pill under it: the visible "this is a button", for touch above all. */
.meet__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 22px 0 26px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
  transition:
    background-color 300ms ease,
    scale 240ms var(--ease-out);
}

.meet__go svg {
  width: 16px;
  height: 16px;
  transition: rotate 420ms var(--ease-out);
}

.meet__link:active .meet__go {
  scale: 0.96;
}

.meet__link:focus-visible {
  outline: none;
}

.meet__link:focus-visible .meet__go {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.meet__link:focus-visible .meet__em::after {
  scale: 1 1;
  transform-origin: 0 50%;
}

@media (hover: hover) and (pointer: fine) {
  .meet__link:hover .meet__em::after {
    scale: 1 1;
    transform-origin: 0 50%;
  }

  .meet__link:hover .meet__go {
    background: #262626;
  }

  /* Down into the page, like "Work with us". */
  .meet__link:hover .meet__go svg {
    rotate: 45deg;
  }
}

/* ------------------------------------------------------------------ pills */

.meet__pills {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.meet__pill {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgb(10 10 10 / 0.05),
    0 10px 28px rgb(10 10 10 / 0.09);
  visibility: hidden;
  will-change: transform, opacity;
}

@media (max-width: 719px) {
  .meet__pill {
    padding: 8px 15px;
    font-size: 0.8125rem;
  }

  .meet__go {
    height: 48px;
    padding: 0 20px 0 22px;
    font-size: 0.9375rem;
  }
}

/* ------------------------------------------------------------------ reveal
   Armed by meet.js only when there's motion to play. */

.meet.is-armed .meet__w > span {
  translate: 0 108%;
}

.meet.is-armed .meet__go {
  opacity: 0;
  translate: 0 18px;
}

.meet.is-in .meet__w > span {
  translate: none;
  transition: translate 1100ms var(--ease-out) calc(var(--w, 0) * 55ms);
}

.meet.is-in .meet__go {
  opacity: 1;
  translate: none;
  transition:
    background-color 300ms ease,
    scale 240ms var(--ease-out),
    opacity 700ms ease 620ms,
    translate 1000ms var(--ease-out) 620ms;
}

@media (prefers-reduced-motion: reduce) {
  .meet *,
  .meet *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Phones: the site's section rhythm (--sec-top / --sec-bot / --sec-end, tokens.css),
   so every gap between two sections reads the same. */
@media (max-width: 719px) {
  .meet {
    padding-top: var(--sec-top);
    padding-bottom: var(--sec-end);
  }
}