/* SCF positive/negative button treatment, echoing the circular brand mark. */

body .btn,
body.content-glass #contact .c2-submit {
  border: 2px solid rgba(245, 241, 232, 0.9);
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.05);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

body .btn:hover,
body.content-glass #contact .c2-submit:hover {
  border-color: var(--bone);
  background: var(--bone);
  color: var(--green-deep);
  box-shadow: inset 0 0 0 1px rgba(12, 49, 12, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.7);
}

body .btn:active,
body.content-glass #contact .c2-submit:active {
  transform: translateY(1px);
}

body .btn svg,
body.content-glass #contact .c2-submit svg {
  transition: transform 200ms ease;
}

body .btn:hover svg,
body.content-glass #contact .c2-submit:hover svg {
  transform: translateX(3px);
}

body .btn:focus-visible,
body.content-glass #contact .c2-submit:focus-visible {
  outline: 3px solid var(--rust-light);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body .btn,
  body .btn svg,
  body.content-glass #contact .c2-submit,
  body.content-glass #contact .c2-submit svg {
    transition: none;
  }
}