/* V15 - Members Accordion Gallery
   Scope: #members only. Existing portraits, copy and profile dialog stay intact. */

#members .member-deck.v15-accordion {
  --v15-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  isolation: isolate;
  gap: 10px;
  perspective: 1400px;
  perspective-origin: 50% 48%;
}

#members .member-deck.v15-accordion .member-card {
  --v15-grow: 1;
  --v15-tilt: 0deg;
  --v15-depth: 0px;
  --v15-origin: center center;
  --v15-media-x: 0%;
  --v15-media-scale: 1.04;
  --v15-gray: .76;
  --v15-saturation: .52;
  --v15-brightness: .68;
  --v15-card-opacity: .84;
  flex: 1 1 0%;
  flex-grow: var(--v15-grow) !important;
  transform: perspective(1400px) rotateY(var(--v15-tilt)) translateZ(var(--v15-depth));
  transform-origin: var(--v15-origin);
  opacity: var(--v15-card-opacity);
  transition:
    flex-grow .68s var(--v15-ease),
    transform .68s var(--v15-ease),
    opacity .42s ease,
    box-shadow .42s ease;
  will-change: flex-grow, transform;
}

#members .member-deck.v15-accordion .member-card.is-v15-active {
  --v15-gray: 0;
  --v15-saturation: 1;
  --v15-brightness: .94;
  --v15-card-opacity: 1;
  z-index: 2;
  box-shadow: 0 28px 58px -34px rgba(0, 0, 0, .82);
}

/* Haneul's portrait is vertically reframed so her face remains visible when the panel expands. */
#members .member-deck.v15-accordion .member-card[data-member="haneul"] > img {
  object-position: center 25%;
}

#members .member-deck.v15-accordion .member-card > img {
  width: 100%;
  transform: translate3d(var(--v15-media-x), 0, 0) scale(var(--v15-media-scale));
  filter:
    grayscale(var(--v15-gray))
    saturate(var(--v15-saturation))
    brightness(var(--v15-brightness))
    contrast(1.06);
  transition:
    transform .82s var(--v15-ease),
    filter .58s ease;
  will-change: transform, filter;
}

#members .member-deck.v15-accordion .member-shade {
  background:
    linear-gradient(0deg, rgba(12, 3, 6, .97) 0%, rgba(13, 4, 7, .52) 28%, transparent 64%),
    linear-gradient(90deg, rgba(18, 4, 7, .3), transparent 48%);
  transition: opacity .48s ease, background .48s ease;
}

#members .member-deck.v15-accordion .member-card:not(.is-v15-active) .member-shade {
  background:
    linear-gradient(0deg, rgba(12, 3, 6, .98) 0%, rgba(13, 4, 7, .66) 42%, rgba(12, 3, 6, .3) 100%),
    rgba(15, 5, 8, .16);
}

#members .member-deck.v15-accordion .member-card > span {
  max-width: calc(100% - 44px);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  color: rgba(246, 235, 228, .76);
  transition: color .3s ease, opacity .3s ease, transform .52s var(--v15-ease);
}

#members .member-deck.v15-accordion .member-card.is-v15-active > span {
  color: #f6ebe4;
  transform: translateX(3px);
}

#members .member-deck.v15-accordion .member-card h4 {
  bottom: 138px;
  font-size: clamp(36px, 3vw, 58px);
  line-height: .92;
  white-space: nowrap;
  transform: translate3d(0, 10px, 0);
  opacity: .7;
  transition:
    font-size .68s var(--v15-ease),
    transform .58s var(--v15-ease),
    opacity .35s ease;
}

#members .member-deck.v15-accordion .member-card.is-v15-active h4 {
  font-size: clamp(58px, 5vw, 82px);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

#members .member-deck.v15-accordion .member-card p {
  max-width: 46ch;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .28s ease, transform .56s var(--v15-ease);
}

#members .member-deck.v15-accordion .member-card.is-v15-active p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .12s;
}

#members .member-deck.v15-accordion .member-card::after {
  transform: scaleX(.12);
  transition: transform .72s var(--v15-ease), opacity .3s ease;
}

#members .member-deck.v15-accordion .member-card.is-v15-active::after,
#members .member-deck.v15-accordion .member-card.is-related::after {
  opacity: 1;
  transform: scaleX(1);
}

#members .member-deck.v15-accordion .member-card:focus-visible {
  outline: 2px solid #f4e7dd;
  outline-offset: -5px;
}

/* V8 used a card-level transform for the first reveal. V15 owns that transform
   so the accordion state cannot be overwritten after the reveal finishes. */
.reveal-ready #members .member-intro:not(.is-visible) .member-deck.v15-accordion .member-card,
.reveal-ready #members .member-intro.is-visible .member-deck.v15-accordion .member-card {
  animation: none;
  clip-path: none;
}

.reveal-ready #members .member-intro:not(.is-visible) .member-deck.v15-accordion {
  opacity: .01;
  clip-path: inset(0 0 10% 0);
  transform: translate3d(0, 28px, 0);
}

.reveal-ready #members .member-intro.is-visible .member-deck.v15-accordion {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity .55s ease,
    clip-path .78s var(--v15-ease),
    transform .78s var(--v15-ease);
}

@media (max-width: 1420px) {
  #members .member-deck.v15-accordion .member-card h4 {
    font-size: 34px;
  }

  #members .member-deck.v15-accordion .member-card.is-v15-active h4 {
    font-size: clamp(54px, 5vw, 70px);
  }

  #members .member-deck.v15-accordion .member-card p {
    font-size: 12px;
  }
}

@media (hover: none), (pointer: coarse) {
  #members .member-deck.v15-accordion .member-card {
    --v15-grow: 1 !important;
    --v15-tilt: 0deg !important;
    --v15-depth: 0px !important;
    --v15-media-x: 0% !important;
    --v15-media-scale: 1.03 !important;
    --v15-card-opacity: 1 !important;
  }

  #members .member-deck.v15-accordion .member-card > img {
    filter: saturate(.82) brightness(.82) contrast(1.04);
  }

  #members .member-deck.v15-accordion .member-card h4 {
    font-size: 36px;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #members .member-deck.v15-accordion,
  #members .member-deck.v15-accordion .member-card,
  #members .member-deck.v15-accordion .member-card > img,
  #members .member-deck.v15-accordion .member-card > span,
  #members .member-deck.v15-accordion .member-card h4,
  #members .member-deck.v15-accordion .member-card p,
  #members .member-deck.v15-accordion .member-card::after {
    transition-duration: .01ms !important;
    animation: none !important;
  }
}