/* Contact: a field of real event photographs, moving through depth. */
.contact-hero { isolation: isolate; }
.contact-hero__field {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--ink); perspective: 1240px; perspective-origin: 56% 46%;
  pointer-events: none; user-select: none;
}
.contact-hero__space {
  position: absolute; left: 56%; top: 46%; width: 0; height: 0;
  transform-style: preserve-3d;
}
.contact-hero__photo {
  position: absolute; left: 0; top: 0;
  width: clamp(160px, 18vw, 280px); aspect-ratio: 16 / 9;
  margin: 0; transform: translate3d(var(--px), var(--py), var(--pz)) scale(var(--scale));
  opacity: var(--opacity); backface-visibility: hidden;
  box-shadow: 0 14px 44px color-mix(in srgb, var(--ink) 75%, transparent);
}
.contact-hero__photo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.contact-hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--ink), transparent 20%, transparent 80%, color-mix(in srgb, var(--ink) 50%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 70%, transparent) 0%, color-mix(in srgb, var(--ink) 44%, transparent) 48%, color-mix(in srgb, var(--ink) 12%, transparent) 100%);
}
.contact-hero .page-hero__in { text-shadow: 0 2px 28px var(--ink); }
.contact-hero .lead { color: var(--grey-2); max-width: 47em; }
.contact-hero__pause {
  position: absolute; z-index: 3; right: max(6vw, 72px); bottom: 24px;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 12px;
  color: var(--grey-2); border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  font: 10px/1.3 var(--f-mono); letter-spacing: .04em;
  cursor: pointer;
}
.contact-hero__pause:hover { color: var(--white); border-color: var(--violet-2); }
.contact-hero__pause:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 4px; }
.contact-hero__pause[hidden] { display: none; }
@media (max-width: 700px) {
  .contact-hero__field { perspective: 1000px; perspective-origin: 50% 40%; }
  .contact-hero__space { left: 50%; top: 40%; }
  .contact-hero__photo { width: 190px; }
  .contact-hero__veil {
    background: linear-gradient(0deg, var(--ink), transparent 24%, color-mix(in srgb, var(--ink) 38%, transparent) 70%, color-mix(in srgb, var(--ink) 50%, transparent));
  }
  .contact-hero .page-hero__in { text-shadow: 0 2px 22px var(--ink), 0 0 65px var(--ink); }
  .contact-hero__pause { right: 24px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-hero__photo { will-change: auto; }
}