/* A quiet moving light frames the real portrait without altering the face. */
.owner-photo { --portrait-motion-ready: 1; }
.owner-photo.portrait-motion .portrait-frame {
  position: relative;
  transform-origin: center 65%;
  animation: portrait-presence 10s ease-in-out infinite paused;
  box-shadow: 0 22px 64px rgba(0,0,0,.3), 0 0 30px rgba(208,184,167,.08);
}
.owner-photo.portrait-motion .portrait-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 30deg, rgba(208,184,167,.18), rgba(246,245,242,.8) 10%, rgba(208,184,167,.15) 22%, transparent 42%, rgba(208,184,167,.42) 73%, rgba(208,184,167,.18));
  -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;
  pointer-events: none;
  animation: portrait-light 10s ease-in-out infinite paused;
}
.owner-photo.portrait-motion .portrait-frame::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,245,231,.055) 48%, transparent 60%);
  transform: translateX(-90%);
  pointer-events: none;
  animation: portrait-sheen 10s ease-in-out infinite paused;
  transition: none;
}
.owner-photo.portrait-moving .portrait-frame,
.owner-photo.portrait-moving .portrait-frame::before,
.owner-photo.portrait-moving .portrait-frame::after { animation-play-state: running; }
.portrait-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  margin-top: 2px;
  background: none;
  border: 0;
  color: var(--m-silver);
  font: inherit;
  font-size: 10px;
  letter-spacing: .025em;
  text-align: left;
}
.portrait-toggle:focus-visible { outline: 2px solid var(--m-champagne); outline-offset: 5px; }
.portrait-toggle[hidden] { display: none; }
@keyframes portrait-presence {
  0%,100% { transform: perspective(1100px) translateY(3px) rotateY(-1deg); }
  50% { transform: perspective(1100px) translateY(-3px) rotateY(1deg); }
}
@keyframes portrait-light { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes portrait-sheen { 0%,32% { transform: translateX(-90%); } 78%,100% { transform: translateX(90%); } }
@media(max-width:600px) { .owner-photo.portrait-motion .portrait-frame { animation-name: portrait-presence-mobile; } }
@keyframes portrait-presence-mobile { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }
@media(prefers-reduced-motion:reduce) {
  .owner-photo.portrait-motion .portrait-frame { animation: none; transform: none; }
  .owner-photo.portrait-motion .portrait-frame::before { animation: none; opacity: .7; }
  .owner-photo.portrait-motion .portrait-frame::after { display: none; animation: none; }
}