/* Routes1 - footer wordmark (ported from routes2's rc-wordmark, smaller).
   The page signs its name: the logo's angled swoosh sweeps in behind the
   word as the footer arrives, with the two ink waves running through it.
   Injected into the SPA footer by routes-footmark.js.

   Every measurement is an em of .rv-mark__stage's font-size, so the whole
   lockup scales as one piece. The ratios are routes2's (which sizes the same
   parts in vw against a 25.4vw word); only the font-size is smaller here. */

.rv-mark {
  position: relative;
  overflow: hidden;
  user-select: none;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.rv-mark__crop {
  overflow: hidden;
}

/* routes2's word is sized to fill the viewport width, so its swoosh (90.9% of
   the stage) frames it correctly. Here the word is much smaller, so the stage
   hugs the word instead of the viewport - that keeps the swoosh's width:height
   ratio identical to routes2 at any font-size. */
.rv-mark__stage {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  /* the one knob: drives word, swoosh and spacing alike */
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  /* bottom padding absorbs the glyph overflow of the sub-1 line-height below,
     so the caps are never clipped by .rv-mark__crop */
  padding-block: 0.4em 0.14em;
  padding-inline: 0.06em;
}

/* Orange swoosh, revealed by a diagonal mask sweep (--rv-mark-sweep). */
.rv-mark__shape {
  position: absolute;
  left: 7.98%;
  width: 90.9%;
  top: 0.04em;
  height: 1.095em;
  background: var(--color-accent-500, #ff7a1a);
  clip-path: polygon(81.7% 0%, 100% 100%, 0% 100%, 0.2% 89.9%);
  -webkit-clip-path: polygon(81.7% 0%, 100% 100%, 0% 100%, 0.2% 89.9%);
  mask-image: linear-gradient(
    20.6deg,
    #000 var(--rv-mark-sweep, 145%),
    transparent calc(var(--rv-mark-sweep, 145%) + 34%)
  );
  -webkit-mask-image: linear-gradient(
    20.6deg,
    #000 var(--rv-mark-sweep, 145%),
    transparent calc(var(--rv-mark-sweep, 145%) + 34%)
  );
  pointer-events: none;
}

/* Ink ribbons running through the swoosh (--rv-mark-run). */
.rv-mark__shape svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  mask-image: linear-gradient(
    to right,
    #000 var(--rv-mark-run, 140%),
    transparent calc(var(--rv-mark-run, 140%) + 30%)
  );
  -webkit-mask-image: linear-gradient(
    to right,
    #000 var(--rv-mark-run, 140%),
    transparent calc(var(--rv-mark-run, 140%) + 30%)
  );
}

.rv-mark__word {
  position: relative;
  padding-left: 0.055em;
  text-align: center;
  font-family: var(--font-display, "Plus Jakarta Sans", "DM Sans", sans-serif);
  font-size: 1em;
  font-weight: 800;
  text-transform: uppercase;
  /* routes2's leading: the box hugs the caps so the swoosh sits right behind */
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: #fff;
}

/* Rise-in when the footer enters the viewport (classes added by the script).
   The word only waits offscreen once the script has armed it, so if the script
   never runs the word still reads normally. */
.rv-mark.is-armed .rv-mark__word {
  transform: translate3d(0, 135%, 0);
}

.rv-mark.is-in .rv-mark__word {
  animation: rv-mark-word-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes rv-mark-word-in {
  from {
    transform: translate3d(0, 135%, 0);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-mark.is-in .rv-mark__word {
    animation: none;
  }
}