/* The brief section turns an unfinished thought into a physical form. */
.contact {
  position: relative;
  isolation: isolate;
}

.contact-layout {
  position: relative;
  isolation: isolate;
}

.contact-layout > h2,
.contact-starter {
  position: relative;
  z-index: 2;
}

.contact-visual {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(var(--pad) * -1);
  width: min(68vw, 1050px);
  aspect-ratio: 1572 / 1001;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 62%, transparent 100%);
}

.contact-visual__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: brightness(.76) saturate(.72) contrast(1.08);
  transform: scale(.985) translateX(-1%);
  transition:
    opacity 900ms ease,
    filter 1100ms ease,
    transform 1400ms cubic-bezier(.22, 1, .36, 1);
}

.contact:focus-within .contact-visual__image,
.contact:has(.contact-starter__surface.has-value) .contact-visual__image {
  opacity: .72;
  filter: brightness(.96) saturate(.94) contrast(1.04);
  transform: scale(1) translateX(1.5%);
}

[dir="rtl"] .contact-visual {
  right: calc(var(--pad) * -1);
  left: auto;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 62%, transparent 100%);
}

[dir="rtl"] .contact-visual__image {
  transform: scaleX(-1) scale(.985) translateX(-1%);
}

[dir="rtl"] .contact:focus-within .contact-visual__image,
[dir="rtl"] .contact:has(.contact-starter__surface.has-value) .contact-visual__image {
  transform: scaleX(-1) scale(1) translateX(1.5%);
}

@media (max-width: 900px) {
  .contact-layout {
    gap: clamp(36px, 10vw, 56px);
  }

  .contact-visual,
  [dir="rtl"] .contact-visual {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: calc(100% + (var(--pad) * 2));
    aspect-ratio: 16 / 7;
    margin-inline: calc(var(--pad) * -1);
    transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  .contact-visual__image {
    object-position: 66% 48%;
    transform: scale(1.16) translateX(-2%);
  }

  [dir="rtl"] .contact-visual__image {
    object-position: 34% 48%;
    transform: scaleX(-1) scale(1.16) translateX(-2%);
  }

  .contact:focus-within .contact-visual__image,
  .contact:has(.contact-starter__surface.has-value) .contact-visual__image {
    transform: scale(1.22) translateX(-1%);
  }

  [dir="rtl"] .contact:focus-within .contact-visual__image,
  [dir="rtl"] .contact:has(.contact-starter__surface.has-value) .contact-visual__image {
    transform: scaleX(-1) scale(1.22) translateX(-1%);
  }
}

@media (max-width: 560px) {
  .contact-visual,
  [dir="rtl"] .contact-visual {
    aspect-ratio: 16 / 8.5;
  }
}