.matrix-portrait {
  position: absolute;
  right: -2%;
  top: -10%;
  width: 56%;
  height: 120%;
  opacity: 0;
  filter: grayscale(1) sepia(.8) hue-rotate(43deg) saturate(1.3) brightness(.8);
  mask-image: radial-gradient(ellipse 70% 65% at 53% 52%, #000 30%, transparent 82%);
  animation: portrait-breath var(--hero-cycle) ease-in-out infinite;
}
.matrix-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 56%; }
@keyframes portrait-breath {
  0%, 50%, 92%, 100% { opacity: 0; }
  60%, 80% { opacity: .32; }
}
.matrix-art.is-paused .matrix-signature,
.matrix-art.is-paused .matrix-portrait { animation-play-state: paused; }
.profile-panel { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 30px; }
.profile-portrait { margin: 0; min-width: 0; }
.portrait-frame { aspect-ratio: 1; overflow: hidden; position: relative; background: #172014; border: 1px solid #405234; }
.portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.24);
  transform-origin: 50% 65%;
}
.profile-portrait figcaption { margin-top: 14px; }
.profile-portrait strong { display: block; font-size: 12px; font-weight: 500; }
.profile-portrait figcaption > span { display: block; font: 9px/1.6 var(--mono); color: #7e9270; margin-top: 5px; }
.profile-panel .intro { margin: -4px 0 0; }
@media (max-width: 1100px) { .profile-panel { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; } }
@media (max-width: 680px) {
  .matrix-portrait { width: 110%; height: 95%; top: 10%; right: -30%; mask-image: radial-gradient(ellipse 58% 54% at 49% 55%, #000 25%, transparent 85%); }
  .profile-panel { grid-template-columns: 1fr; gap: 24px; }
  .profile-portrait { max-width: 270px; }
  .profile-portrait strong { font-size: 14px; }
  .profile-panel .intro { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .matrix-portrait { animation: none; opacity: .15; } }
