/* The far portrait is larger than the foreground photo, with feathered edges.
   It lives behind the existing grid so no hover target or reading column moves. */
.intro-person-grid { position: relative; isolation: isolate; }
.portrait-memory {
  position: absolute;
  inset: -34px 0 -24px 23%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none !important;
  perspective: 1200px;
  perspective-origin: 66% 45%;
  opacity: 0;
  visibility: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 18%,#000 58%,transparent 98%),linear-gradient(0deg,transparent 0%,#000 15%,#000 82%,transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%,#000 18%,#000 58%,transparent 98%),linear-gradient(0deg,transparent 0%,#000 15%,#000 82%,transparent 100%);
  mask-composite: intersect;
  transition: opacity 1.35s ease .24s, visibility 1.7s;
}
.portrait-memory-image {
  display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 58% 50%;
  filter: saturate(.55) contrast(.82);
  pointer-events: none !important;
  user-select: none !important;
  transform-origin: 66% 45%;
  transform: translate3d(calc(var(--depth-x,0px) * -.32),calc(var(--depth-y,0px) * -.28 + 18px),-340px) rotateY(calc(var(--depth-ry,0deg) * -.65)) scale(1.34);
  transition: transform 1.65s cubic-bezier(.2,.65,.2,1);
}
.intro-person-grid[data-portrait-memory="true"] .portrait-memory {
  opacity: .19; visibility: visible;
  transition: opacity 1.45s ease .14s, visibility 0s;
}
.intro-person-grid[data-portrait-memory="true"] .portrait-memory-image {
  transform: translate3d(calc(var(--depth-x,0px) * -.32),calc(var(--depth-y,0px) * -.28),-265px) rotateY(calc(var(--depth-ry,0deg) * -.65)) scale(1.34);
}
[data-theme="light"] .intro-person-grid[data-portrait-memory="true"] .portrait-memory { opacity: .13; }

/* The real disclosure closes for accessibility immediately. Its visual parent
   remains on screen only until the last independently fading label has left. */
.intro-portrait[data-portrait-present="true"] .portrait-abilities {
  opacity: 1; visibility: visible; transition: none;
}
.intro-portrait[data-portrait-exiting="true"]:not([data-portrait-open="true"]) .ability-labels li {
  opacity: 0;
  transform: perspective(700px) translate3d(var(--ability-exit-x,0px),var(--ability-exit-y,18px),var(--ability-exit-z,-125px)) rotateX(6deg) scale(.95);
  transition: opacity var(--ability-exit-duration,850ms) ease var(--ability-exit-delay,0ms),
    transform var(--ability-exit-duration,850ms) cubic-bezier(.2,.65,.2,1) var(--ability-exit-delay,0ms);
}
.intro-portrait[data-portrait-exiting="true"] .portrait-abilities,
.intro-portrait[data-portrait-exiting="true"] .portrait-abilities * { pointer-events: none !important; }

/* Cloth stays in place; the contracting muscle is a second, adjacent CFX study. */
.intro-portrait .ability-cfx { right: 44px; }
.intro-portrait .ability-muscle {
  position: absolute; width: 80px; height: 56px;
  left: calc(100% + 5px); right: auto; top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  color: var(--skill-fx);
}
.ability-muscle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ability-muscle-sheath { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-width: 1.05; stroke-opacity: .78; }
.ability-muscle-fibre { stroke: currentColor; stroke-width: .78; stroke-opacity: .65; }
.ability-muscle-tendon { stroke: var(--skill-character); stroke-width: 1; stroke-opacity: .8; stroke-linecap: round; }
.ability-muscle-joint { stroke: var(--skill-character); stroke-width: .8; fill: var(--bg); }
.ability-muscle-bundle { transform-origin: 78px 46px; animation: portrait-muscle-contract 3.2s ease-in-out infinite; }
.ability-muscle-pulse { stroke: var(--ink); stroke-width: 1; stroke-opacity: .62; stroke-dasharray: 7 93; animation: portrait-muscle-signal 2.8s linear infinite; }
@keyframes portrait-muscle-contract {
  0%,20%,100% { transform: scale(1,1); }
  48%,65% { transform: scale(.94,1.15); }
}
@keyframes portrait-muscle-signal { to { stroke-dashoffset: -100; } }
:is(.motion-paused,.text-selection-active) .portrait-memory,
:is(.motion-paused,.text-selection-active) .portrait-memory-image { transition: none; }
.motion-paused .portrait-memory-image {
  transform: translate3d(0,0,-265px) scale(1.34) !important;
}
.motion-paused .intro-portrait[data-portrait-exiting="true"] .ability-labels li,
.text-selection-active .intro-portrait[data-portrait-exiting="true"] .ability-labels li { transition: none; }
@media (max-width: 1100px) {
  .intro-portrait .ability-muscle { width: 64px; height: 46px; }
}
@media (max-width: 760px) {
  .portrait-memory { inset: auto 0 -15px; height: 52%; perspective-origin: 57% 50%; }
  .portrait-memory-image { object-position: 57% 50%; }
  .intro-person-grid[data-portrait-memory="true"] .portrait-memory { opacity: .16; }
  .intro-portrait .ability-muscle { width: 56px; height: 42px; }
}
@media (max-width: 380px) {
  .intro-portrait .ability-muscle { width: 46px; height: 36px; }
}
@media print {
  .portrait-memory, .ability-muscle { display: none !important; }
}