.portrait-card {
  isolation: isolate;
}
.portrait-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13px;
  border-radius: 3px;
  background: conic-gradient(from 0deg, var(--lime), var(--teal), var(--orange), var(--paper), var(--lime));
  animation: frame-spin 12s linear infinite;
  opacity: .9;
}
.portrait-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 156px;
  height: 156px;
  right: -65px;
  bottom: 42px;
  border-radius: 50%;
  background: var(--lime);
  opacity: .58;
  filter: blur(1px);
  animation: glow-breathe 4.5s ease-in-out infinite;
}
.portrait-frame {
  box-shadow: 15px 17px 0 rgba(18, 35, 43, .17);
  animation: portrait-float 6s ease-in-out infinite;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 11px;
  border: 1px solid rgba(245, 242, 235, .7);
  pointer-events: none;
}
.portrait-caption {
  position: relative;
  z-index: 3;
}
.orbit-one { animation: orbit-drift 7s ease-in-out infinite; }
.orbit-two { animation: orbit-drift 7s ease-in-out infinite reverse; }
@keyframes frame-spin { to { transform: rotate(360deg); } }
@keyframes portrait-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow-breathe { 0%,100% { transform: scale(.88); opacity: .36; } 50% { transform: scale(1.09); opacity: .72; } }
@keyframes orbit-drift { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(10px,-8px) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .portrait-card::before, .portrait-card::after, .portrait-frame, .orbit-one, .orbit-two { animation: none; }
}