/* Border-only motion: the original photograph and its crop stay untouched. */
.introduction-hero .brooklyn-portrait::before,
.introduction-hero .brooklyn-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.introduction-hero .brooklyn-portrait::before {
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0deg 215deg, #e8cfaa08 250deg, #e8cfaa85 285deg, #fff2d8aa 300deg, transparent 335deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: avatar-border-orbit 14s linear infinite;
}
.introduction-hero .brooklyn-portrait::after {
  box-shadow: inset 0 0 0 1px #ecd9bb55, inset 0 0 12px 2px #d8c29c22;
  animation: avatar-border-breathe 5s ease-in-out infinite;
}
@keyframes avatar-border-orbit { to { transform: rotate(360deg); } }
@keyframes avatar-border-breathe { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .introduction-hero .brooklyn-portrait::before,
  .introduction-hero .brooklyn-portrait::after { animation: none; opacity: .35; }
}