/*
  Button: text, arrow and underline.
  .btn--light is Light on Dark backgrounds and over the hero video.
  .btn--dark is Dark on Light and Background.

  <a class="btn btn--light" href="#">
    <span>Start a Project</span>
    <span class="btn__icon" aria-hidden="true"></span>
  </a>
*/

.btn {
  --btn-motion: 1.1s cubic-bezier(0.95, 0.05, 0.3, 0.95) 0.2s;
  --btn-line-travel: 671px;
  --btn-arrow-size: 12px;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0 6px;
  overflow: hidden;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.917rem + 0.088vw, 1rem);
  font-weight: var(--weight-action);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--light {
  color: var(--color-light);
}

.btn--dark {
  color: var(--color-dark);
}

.btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Underline: ::before rests in place, ::after waits off to the left. */
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--btn-motion);
}

.btn::after {
  transform: translateX(calc(var(--btn-line-travel) * -1));
}

/* Arrow: ::before rests in place, ::after waits at the bottom-left, clipped by the box. */
.btn__icon {
  position: relative;
  display: block;
  flex: none;
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);
  overflow: hidden;
}

/* The Figma SVG points down-right, and Figma flips it, so scaleY(-1) stays in every transform. */
.btn__icon::before,
.btn__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  /* assets/icons/arrow.svg, embedded because browsers block external masks on pages opened as a file. */
  --btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11.9994'%3E%3Cpath d='M0.820989 0.820988C0.900519 0.741407 0.994952 0.678277 1.09889 0.635205C1.20283 0.592133 1.31423 0.569964 1.42674 0.569964C1.53925 0.569964 1.65066 0.592133 1.7546 0.635205C1.85853 0.678277 1.95297 0.741407 2.0325 0.820988L11.7383 10.5268C11.8201 10.6057 11.8854 10.7002 11.9303 10.8046C11.9752 10.9091 11.9989 11.0215 12 11.1352C12.001 11.2489 11.9794 11.3617 11.9364 11.4669C11.8934 11.5722 11.8298 11.6679 11.7494 11.7483C11.6691 11.8287 11.5735 11.8924 11.4683 11.9355C11.363 11.9786 11.2503 12.0003 11.1366 11.9994C11.0229 11.9985 10.9105 11.9749 10.806 11.93C10.7015 11.8852 10.6069 11.82 10.5279 11.7383L0.822131 2.0325C0.661757 1.87192 0.571677 1.65426 0.571677 1.42731C0.571677 1.20037 0.661757 0.982704 0.822131 0.82213'/%3E%3Cpath d='M11.1331 0C11.3602 0 11.578 0.0902265 11.7386 0.250831C11.8992 0.411435 11.9895 0.629262 11.9895 0.856391V11.1331C11.9895 11.3602 11.8992 11.578 11.7386 11.7386C11.578 11.8992 11.3602 11.9895 11.1331 11.9895H0.856391C0.629262 11.9895 0.411435 11.8992 0.250831 11.7386C0.0902265 11.578 0 11.3602 0 11.1331C0 10.906 0.0902265 10.6881 0.250831 10.5275C0.411435 10.3669 0.629262 10.2767 0.856391 10.2767H10.2767V0.856391C10.2767 0.629262 10.3669 0.411435 10.5275 0.250831C10.6881 0.0902265 10.906 0 11.1331 0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--btn-arrow) center / contain no-repeat;
  mask: var(--btn-arrow) center / contain no-repeat;
  transform: scaleY(-1);
  transition: transform var(--btn-motion);
}

.btn__icon::after {
  transform: translate(calc(var(--btn-arrow-size) * -1), var(--btn-arrow-size)) scaleY(-1);
}

.btn:focus-visible::before {
  transform: translateX(var(--btn-line-travel));
}

.btn:focus-visible::after {
  transform: translateX(0);
}

.btn:focus-visible .btn__icon::before {
  transform: translate(var(--btn-arrow-size), calc(var(--btn-arrow-size) * -1)) scaleY(-1);
}

.btn:focus-visible .btn__icon::after {
  transform: scaleY(-1);
}

/* Hover only where a real pointer exists, so the state doesn't stick after a tap. */
@media (hover: hover) {
  .btn:hover::before {
    transform: translateX(var(--btn-line-travel));
  }

  .btn:hover::after {
    transform: translateX(0);
  }

  .btn:hover .btn__icon::before {
    transform: translate(var(--btn-arrow-size), calc(var(--btn-arrow-size) * -1)) scaleY(-1);
  }

  .btn:hover .btn__icon::after {
    transform: scaleY(-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .btn::after,
  .btn__icon::before,
  .btn__icon::after {
    transition: none;
  }
}