/* A blue inspection frame and restrained physical feedback, on intent only. */
:root { --hover-ease: cubic-bezier(.23, 1, .32, 1); }
.inspection-frame {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  border: 1px solid #2287d976;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--hover-ease), visibility .24s;
  will-change: transform;
  color: var(--blue);
}
.inspection-frame.is-visible { opacity: 1; visibility: visible; }
.inspection-frame > i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--paper);
  border: 1px solid currentColor;
}
.inspection-frame > i:nth-of-type(1) { top: -3px; left: -3px; }
.inspection-frame > i:nth-of-type(2) { top: -3px; right: -3px; }
.inspection-frame > i:nth-of-type(3) { bottom: -3px; right: -3px; }
.inspection-frame > i:nth-of-type(4) { bottom: -3px; left: -3px; }
.inspection-label {
  position: absolute;
  right: -1px;
  top: calc(100% + 7px);
  padding: 3px 6px;
  font: 10px/1.3 'DM Sans', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--paper);
  border-right: 1px solid currentColor;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .2s, transform .35s var(--hover-ease);
}
.inspection-frame.is-visible .inspection-label { opacity: 1; transform: none; }
.hover-link { position: relative; }
.hover-brackets { position: absolute; inset: -6px -8px; pointer-events: none; color: var(--blue); }
.hover-link > .hover-brackets { margin: 0; }
.hover-brackets:before, .hover-brackets:after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  opacity: 0;
  transition: opacity .2s, transform .45s var(--hover-ease);
}
.hover-brackets:before { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; transform: translate(-5px, -5px); }
.hover-brackets:after { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; transform: translate(5px, 5px); }
.hover-link:focus-visible .hover-brackets:before,
.hover-link:focus-visible .hover-brackets:after { opacity: 1; transform: none; }
.hover-link:focus-visible { outline: 1px solid var(--blue); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .hover-link:hover .hover-brackets:before,
  .hover-link:hover .hover-brackets:after { opacity: 1; transform: none; }
  [data-magnet] { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); }
  [data-magnet] > .magnetic-detail { translate: var(--magnet-detail-x, 0px) var(--magnet-detail-y, 0px); }
  .nav-contact > span:not(.hover-brackets),
  .inline-link > span:not(.hover-brackets),
  .contact-email > span:not(.hover-brackets) { display: inline-block; transition: transform .4s var(--hover-ease); }
  .nav-contact:hover > span:not(.hover-brackets),
  .inline-link:hover > span:not(.hover-brackets),
  .contact-email:hover > span:not(.hover-brackets) { transform: translate(2px, -2px); }
  .text-cta .round-arrow,
  .contact-invite-link > span,
  .submit-icon { transition: transform .45s var(--hover-ease), background .35s, color .35s, border-color .35s; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .inspection-frame { display: none; }
  [data-magnet], [data-magnet] > .magnetic-detail { translate: none !important; }
}
@media print { .inspection-frame, .hover-brackets { display: none; } }