/* Perfiles de equipo y revelación del arte original de cada integrante. */
.ab-team .ab-person:has(.ab-profile-trigger) {
  display: flex;
  flex-direction: column;
}

.ab-team .ab-person-copy:has(.ab-profile-trigger) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.ab-main .ab-profile-trigger {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 13px 0 3px;
  border: 0;
  border-bottom: 1px solid var(--ab-line);
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  font: 650 12px/1.45 var(--font-body);
  text-align: start;
  text-decoration: none;
}

.ab-profile-trigger span[aria-hidden="true"] { color: var(--amber); }
.ab-main .ab-profile-trigger:hover { border-bottom-color: var(--amber); }

.ab-main :is(.ab-portrait-preview, .ab-profile-trigger, .ab-profile-fallback, .ab-profile-motion)[hidden],
.ab-profile-dialog:not([open]) { display: none; }

.ab-portrait-preview {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
}

.ab-portrait:has(.ab-portrait-preview) figcaption {
  z-index: 2;
  pointer-events: none;
}

.ab-portrait-preview:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: -3px;
}

.ab-portrait-animal {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.ab-portrait .ab-portrait-animal img {
  object-fit: contain;
  object-position: center;
  filter: none;
}

.ab-portrait-preview[data-revealing] .ab-portrait-animal { opacity: 1; }

.ab-portrait-hint {
  position: absolute;
  z-index: 2;
  inset: 10px 10px auto auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 244, 218, .3);
  color: var(--cream);
  background: rgba(12, 8, 15, .9);
  font: 650 9px/1.2 var(--font-body);
  letter-spacing: .11em;
  text-transform: uppercase;
  pointer-events: none;
}

.ab-portrait-hint::before {
  width: 11px;
  height: 2px;
  background: var(--ab-heat);
  content: "";
}

.ab-portrait-preview:is(:hover, :focus-visible, [data-revealing]) .ab-portrait-hint {
  border-color: var(--amber);
}

.ab-preview-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.about-page.ab-profile-open { overflow: hidden; }

.ab-profile-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(71rem, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ab-line);
  color: var(--cream);
  background: #100c16;
  box-shadow: 0 22px 82px rgba(0, 0, 0, .65);
  scrollbar-color: var(--ab-line) #100c16;
}

.ab-profile-dialog::backdrop {
  background: rgba(4, 3, 8, .88);
  backdrop-filter: blur(7px);
}

.ab-profile-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas: "art biography";
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(174, 64, 94, .18), transparent 52%),
    linear-gradient(143deg, #100c16, #191122 72%, #100c16);
}

.ab-profile-panel::before {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 2px;
  background: var(--ab-heat);
  content: "";
  pointer-events: none;
}

.ab-profile-close {
  position: sticky;
  z-index: 2;
  top: 12px;
  grid-area: 1 / 1 / -1 / -1;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 12px 0;
  padding: 8px 13px;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  color: var(--cream);
  background: #191220;
  cursor: pointer;
  font: 650 12px/1.35 var(--font-body);
}

:is(.ab-profile-close, .ab-profile-motion):hover { border-color: var(--ab-profile-accent, var(--amber)); }

.ab-main :is(.ab-profile-trigger, .ab-profile-close, .ab-profile-motion, .ab-profile-fallback summary):focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.ab-profile-art {
  position: relative;
  grid-area: art;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.ab-profile-panel > .ab-profile-art { border-right: 1px solid var(--ab-line); }

.ab-profile-media {
  position: relative;
  isolation: isolate;
  height: clamp(360px, 67vh, 590px);
  overflow: hidden;
  background: #000;
}

.ab-profile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ab-profile-media .ab-profile-photo,
.ab-profile-art[data-ab-view="portrait"] .ab-profile-artwork { opacity: 0; }

.ab-profile-art[data-ab-view="portrait"] .ab-profile-photo { opacity: 1; }

.ab-profile-mark {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 13px clamp(12px, 2vw, 24px);
  border-top: 1px solid var(--ab-line);
  background: linear-gradient(125deg, rgba(41, 27, 51, .56), transparent 75%), #100c16;
}

.ab-profile-credit-name,
.ab-profile-credit-role {
  display: block;
  overflow-wrap: anywhere;
}

.ab-profile-credit-name {
  color: var(--cream);
  font: 900 clamp(13px, 1.4vw, 18px)/1.2 var(--font-title);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.ab-profile-credit-role {
  color: var(--ab-profile-accent, #ffd485);
  font: 650 11px/1.35 var(--font-body);
  letter-spacing: .04em;
}

.ab-profile-credit-name + .ab-profile-credit-role { margin-top: 3px; }

.ab-profile-motion {
  justify-self: start;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  color: var(--cream);
  background: #191220;
  cursor: pointer;
  font: 650 11px/1.3 var(--font-body);
}

.ab-profile-content {
  grid-area: biography;
  align-self: center;
  min-width: 0;
  padding: 65px clamp(26px, 5vw, 74px) clamp(36px, 5vw, 74px);
}

.ab-main .ab-profile-heading {
  margin: 0;
  font: 900 clamp(24px, 3.65vw, 49px)/1.11 var(--font-title);
  letter-spacing: -.035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ab-main .ab-profile-content .ab-profile-role {
  margin: 11px 0 22px;
  color: var(--ab-profile-accent, #ffd485);
  font: 650 12px/1.55 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ab-main .ab-profile-content p + p { margin-top: 14px; }

.ab-profile-fallback { margin: 12px 0 0; border-top: 1px solid var(--ab-line); }

.ab-profile-fallback summary {
  min-height: 44px;
  padding: 13px 0;
  color: var(--cream);
  cursor: pointer;
  font: 650 12px/1.45 var(--font-body);
}

.ab-profile-fallback .ab-profile-art { margin: 8px 0 12px; }
.ab-profile-fallback .ab-profile-media { height: clamp(14rem, 52vw, 28rem); }
.ab-profile-fallback .ab-profile-content { padding: 0 0 8px; }
.ab-main .ab-profile-fallback .ab-profile-heading { font-size: 16px; }
.ab-main .ab-profile-fallback .ab-profile-role { margin: 7px 0 12px; }
.ab-main .ab-profile-fallback p { margin-bottom: 12px; font-size: 14px; }

@media (max-width: 700px) {
  .ab-profile-dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .ab-profile-panel {
    grid-template-areas: "art" "biography";
    grid-template-columns: minmax(0, 1fr);
  }

  .ab-profile-panel > .ab-profile-art { border-right: 0; }
  .ab-profile-media { height: clamp(220px, 48dvh, 390px); }
  .ab-profile-content { padding: 24px clamp(18px, 5vw, 34px) 31px; }
  .ab-main .ab-profile-content .ab-kicker { margin-bottom: 10px; }
  .ab-profile-close { top: 8px; margin: 8px 8px 0; }
}

@media (max-width: 380px) {
  .ab-profile-mark { grid-template-columns: minmax(0, 1fr); }
  .ab-profile-motion { margin-top: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ab-portrait-preview[data-revealing] .ab-portrait-animal {
    animation: ab-portrait-switch 1.8s ease both;
  }

  .ab-portrait-preview[data-revealing]::before {
    position: absolute;
    z-index: 1;
    inset: 12% 0 auto;
    height: 2px;
    background: var(--ab-heat);
    box-shadow: 0 6px 18px rgba(177, 65, 249, .54);
    animation: ab-portrait-scan .48s ease-out both;
    content: "";
    pointer-events: none;
  }

  .ab-profile-dialog[open] { animation: ab-profile-enter .28s ease-out both; }

  .ab-profile-dialog[open] .ab-profile-media img { transition: opacity .35s ease; }

  .ab-profile-dialog[open] [data-ab-view="portrait"] .ab-profile-photo,
  .ab-profile-dialog[open] [data-ab-view="animal"] .ab-profile-artwork {
    animation: ab-profile-frame .54s ease-out both;
  }

  .ab-profile-dialog[open] .ab-profile-media img + img { z-index: 1; }
}

@keyframes ab-portrait-switch {
  0% {
    opacity: .4;
    clip-path: polygon(0 0, 100% 0, 100% 28%, 90% 28%, 90% 51%, 100% 51%, 100% 100%, 0 100%, 0 70%, 10% 70%, 10% 46%, 0 46%);
    transform: translateX(-2%);
  }
  14%, 77%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 28%, 100% 28%, 100% 51%, 100% 51%, 100% 100%, 0 100%, 0 70%, 0 70%, 0 46%, 0 46%);
    transform: none;
  }
  14%, 77% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ab-portrait-scan {
  from { opacity: .72; top: 12%; }
  to { opacity: 0; top: 82%; }
}

@keyframes ab-profile-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ab-profile-frame {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 26%, 94% 26%, 94% 48%, 100% 48%, 100% 100%, 0 100%, 0 77%, 6% 77%, 6% 54%, 0 54%);
    transform: translateX(-1.6%);
    filter: drop-shadow(4px 0 rgba(179, 55, 255, .55));
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 26%, 100% 26%, 100% 48%, 100% 48%, 100% 100%, 0 100%, 0 77%, 0 77%, 0 54%, 0 54%);
    transform: none;
    filter: drop-shadow(0 0 transparent);
  }
}