h1 {
  text-align: center;
}

h2.view-transition {
  view-transition-name: form-h2;
}

p.view-transition {
  view-transition-name: form-p;
}

@keyframes slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(calc(-1 * var(--sp-160)));
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(var(--sp-160));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

::view-transition-old(form-h2),
::view-transition-old(form-p),
::view-transition-old(contact-form) {
  animation: slide-out var(--animation-time) var(--animation-timing-function) forwards;
}
::view-transition-new(form-h2),
::view-transition-new(form-p),
::view-transition-new(form-button) {
  animation: slide-in calc(var(--animation-time) * 2) var(--animation-timing-function) forwards;
}

.hero {
  at-inner {
    padding-block-start: var(--sp-80-40);
  }
}

.form {
  at-inner {
    padding-block: 0;
  }
}

form {
  margin-block-start: var(--sp-80);
  view-transition-name: contact-form;

  label {
    display: block;
    margin-block: var(--sp-20) var(--sp-4);
  }

  form-field {
    display: block;
  }

  input,
  textarea {
    width: 100%;
    border: var(--border);
    padding: var(--sp-16);
    background-color: transparent;
  }

  textarea {
    field-sizing: content;
    min-height: var(--sp-154);
  }

  input[name="honeypot"] {
    display: none;
  }

  button {
    margin-block-start: var(--sp-20);

    &:disabled {
      pointer-events: none;
    }
  }
}

p+a {
  margin-block-start: var(--sp-40);
}