/* V16 - Single-screen member profiles with a native Scroll Stack-inspired transition.
   Scope: #member-dialog only. V15 member entry cards and all profile copy remain unchanged. */

.member-dialog.v16-profile-dialog {
  --v16-ease: cubic-bezier(.16, 1, .3, 1);
  --v16-copy-shift: 24px;
  --v16-copy-turn: -3.8deg;
  --v16-media-shift: -18px;
  --v16-media-turn: 2.4deg;
  width: min(1480px, 96vw);
  height: min(860px, 94vh);
  max-height: 94vh;
  display: grid;
  grid-template-columns: minmax(430px, .94fr) minmax(460px, 1.06fr);
  grid-template-rows: minmax(0, 1fr) 56px;
  overflow: hidden;
  isolation: isolate;
  perspective: 1400px;
  background: #100609;
}

.member-dialog.v16-profile-dialog[open] {
  animation: v16-profile-open .62s var(--v16-ease) both;
}

@keyframes v16-profile-open {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateX(-3deg) translateY(22px) scale(.975);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateX(0) translateY(0) scale(1);
  }
}

.member-dialog.v16-profile-dialog .member-dialog-copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "role role"
    "name name"
    "position position"
    "summary summary"
    "traits traits"
    "background credits"
    "solo solo"
    "note note";
  align-content: start;
  column-gap: clamp(18px, 2vw, 32px);
  row-gap: clamp(7px, .9vh, 12px);
  width: auto;
  height: auto;
  min-height: 0;
  padding: clamp(26px, 3.1vw, 48px) clamp(28px, 3.3vw, 54px) 14px;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
  transform-origin: center center;
}

.member-dialog.v16-profile-dialog .member-dialog-copy > span {
  grid-area: role;
  margin: 0;
  font-size: 11px;
}

.member-dialog.v16-profile-dialog h2 {
  grid-area: name;
  margin: 2px 0 0;
  font-size: clamp(64px, 6vw, 94px);
  line-height: .84;
  letter-spacing: -.045em;
}

.member-dialog.v16-profile-dialog .member-dialog-position {
  grid-area: position;
  max-width: none;
  margin: 0;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.05;
}

.member-dialog.v16-profile-dialog #member-dialog-summary {
  grid-area: summary;
  max-width: 62ch;
  margin: 2px 0 0;
  color: #dacbc6;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.65;
}

.member-dialog.v16-profile-dialog .member-traits {
  grid-area: traits;
  display: grid;
  grid-template-columns: .52fr 1.08fr .9fr;
  max-width: none;
  margin: 2px 0 0;
}

.member-dialog.v16-profile-dialog .member-traits > div {
  min-width: 0;
  padding: 10px 12px 11px 0;
}

.member-dialog.v16-profile-dialog .member-traits > div + div {
  padding-left: 14px;
}

.member-dialog.v16-profile-dialog .member-traits small,
.member-dialog.v16-profile-dialog .member-background small,
.member-dialog.v16-profile-dialog .member-credits small,
.member-dialog.v16-profile-dialog .member-solo small {
  font-size: 9px;
  line-height: 1.2;
}

.member-dialog.v16-profile-dialog .member-traits strong {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.4;
}

.member-dialog.v16-profile-dialog .member-background {
  grid-area: background;
}

.member-dialog.v16-profile-dialog .member-credits {
  grid-area: credits;
}

.member-dialog.v16-profile-dialog .member-background,
.member-dialog.v16-profile-dialog .member-credits {
  max-width: none;
  min-width: 0;
  margin: 1px 0 0;
}

.member-dialog.v16-profile-dialog .member-background p,
.member-dialog.v16-profile-dialog .member-credits p {
  margin: 5px 0 0;
  color: #cdbdb8;
  font-size: clamp(10px, .78vw, 11.5px);
  line-height: 1.5;
}

.member-dialog.v16-profile-dialog .member-solo {
  grid-area: solo;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 18px;
  max-width: none;
  margin: 2px 0 0;
  padding: 10px 0 11px;
}

.member-dialog.v16-profile-dialog .member-solo small {
  grid-column: 1 / -1;
}

.member-dialog.v16-profile-dialog .member-solo strong {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1;
}

.member-dialog.v16-profile-dialog .member-solo a {
  align-self: center;
  white-space: nowrap;
  font-size: 9px;
}

.member-dialog.v16-profile-dialog .member-dialog-note {
  grid-area: note;
  max-width: none;
  margin: 0 !important;
  color: #ad9a96 !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

.member-dialog.v16-profile-dialog .member-dialog-media {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(16, 6, 9, .76), rgba(16, 6, 9, .08) 22%, rgba(16, 6, 9, .18)),
    linear-gradient(0deg, rgba(8, 3, 5, .52), transparent 46%),
    var(--v16-member-image, none) center / cover no-repeat,
    #1b0b10;
}

.member-dialog.v16-profile-dialog .member-dialog-media::after {
  z-index: 2;
  background:
    linear-gradient(90deg, #100609 0, rgba(16, 6, 9, .7) 5%, transparent 21%),
    linear-gradient(0deg, rgba(9, 3, 5, .46), transparent 34%);
  pointer-events: none;
}

.member-dialog.v16-profile-dialog .member-dialog-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(22px, 2.2vw, 38px);
  object-fit: contain;
  object-position: center;
  filter: saturate(.88) brightness(.91) contrast(1.025);
  transform-origin: center center;
}

.member-dialog.v16-profile-dialog .member-dialog-nav {
  position: relative;
  inset: auto;
  z-index: 7;
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: 0;
  background: #100609;
  backdrop-filter: none;
}

.member-dialog.v16-profile-dialog .member-dialog-nav button {
  min-height: 55px;
  font-size: 10px;
}

.member-dialog.v16-profile-dialog .member-copy-status {
  left: clamp(28px, 3.3vw, 54px);
  bottom: 60px;
  width: calc(46% - clamp(56px, 6.6vw, 108px));
  font-size: 9px !important;
}

.member-dialog.v16-profile-dialog .member-close {
  right: 24px;
  top: 18px;
  z-index: 9;
}

.member-dialog.v16-profile-dialog.is-switching .member-dialog-media img,
.member-dialog.v16-profile-dialog.is-switching .member-dialog-copy > :not(.member-dialog-nav):not(.member-copy-status) {
  animation: none;
}

.member-dialog.v16-profile-dialog.is-v16-switching .member-dialog-copy {
  animation: v16-profile-copy-in .56s var(--v16-ease) both;
}

.member-dialog.v16-profile-dialog.is-v16-switching .member-dialog-media img {
  animation: v16-profile-media-in .66s var(--v16-ease) both;
}

.member-dialog.v16-profile-dialog.is-v16-switching .member-dialog-media {
  animation: v16-profile-depth-in .56s var(--v16-ease) both;
}

@keyframes v16-profile-copy-in {
  from {
    opacity: .14;
    filter: blur(4px);
    transform: translate3d(var(--v16-copy-shift), 12px, -70px) rotateY(var(--v16-copy-turn)) scale(.975);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
  }
}

@keyframes v16-profile-media-in {
  from {
    opacity: .2;
    filter: blur(4px) saturate(.72) brightness(.7);
    transform: translate3d(var(--v16-media-shift), 0, -54px) rotateY(var(--v16-media-turn)) scale(.965);
  }
  to {
    opacity: 1;
    filter: saturate(.88) brightness(.91) contrast(1.025);
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
  }
}

@keyframes v16-profile-depth-in {
  from {
    box-shadow: inset 18px 0 34px rgba(0, 0, 0, .38);
  }
  to {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  }
}

@media (max-width: 1120px) {
  .member-dialog.v16-profile-dialog {
    width: 96vw;
    grid-template-columns: minmax(420px, .98fr) minmax(430px, 1.02fr);
  }

  .member-dialog.v16-profile-dialog .member-dialog-copy {
    padding: 24px 28px 12px 32px;
    row-gap: 6px;
  }

  .member-dialog.v16-profile-dialog h2 {
    font-size: 62px;
  }

  .member-dialog.v16-profile-dialog #member-dialog-summary {
    font-size: 12.5px;
    line-height: 1.55;
  }

  .member-dialog.v16-profile-dialog .member-background p,
  .member-dialog.v16-profile-dialog .member-credits p {
    font-size: 9.8px;
    line-height: 1.42;
  }

  .member-dialog.v16-profile-dialog .member-dialog-note {
    font-size: 8.4px !important;
  }

  .member-dialog.v16-profile-dialog .member-dialog-media img {
    padding: 20px;
  }

  .member-dialog.v16-profile-dialog .member-copy-status {
    left: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-dialog.v16-profile-dialog[open],
  .member-dialog.v16-profile-dialog.is-v16-switching .member-dialog-copy,
  .member-dialog.v16-profile-dialog.is-v16-switching .member-dialog-media,
  .member-dialog.v16-profile-dialog.is-v16-switching .member-dialog-media img {
    animation: none !important;
  }
}