/* Every sheet is a 3-by-3 grid of full-bleed scenes. */
.reference-hero .fan-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: block;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: calc(var(--anime-column, 0) * 50%) calc(var(--anime-row, 0) * 50%);
}
.reference-hero .fan-art[data-anime-sheet="emotion"] {
  --anime-ratio: var(--anime-emotion-ratio, 0.66666667);
  background-image: url("assets/anime-emotion.jpg");
}
.reference-hero .fan-art[data-anime-sheet="attitude"] {
  --anime-ratio: var(--anime-attitude-ratio, 0.66666667);
  background-image: url("assets/anime-attitude.jpg");
}
@supports (width: 1cqw) and (height: 1cqh) {
  .reference-hero .fan-card { container-type: size; }
  .reference-hero .fan-art {
    /* Size one tile to cover its card, then clip it within the figure.
       The slight overscan keeps neighboring pixels outside its edges. */
    width: calc(max(100cqw, 100cqh * var(--anime-ratio)) * 1.025);
    height: calc(max(100cqh, 100cqw / var(--anime-ratio)) * 1.025);
  }
}

.reference-hero .fan-card .fan-portrait {
  object-position: var(--portrait-position, center);
  transform: scale(var(--portrait-zoom, 1));
  transform-origin: var(--portrait-position, center);
  filter: saturate(.83) contrast(1.06) brightness(var(--portrait-brightness, .94));
}

.reference-hero .destination-stage--portraits .fan-card::after {
  background: linear-gradient(180deg, #10090b16, transparent 42%, #0b080b30);
  box-shadow: inset 0 0 0 1px #fff2;
}

.reference-hero .destination-stage--interactive .fan-portrait {
  pointer-events: auto;
  cursor: zoom-in;
  touch-action: manipulation;
}

.reference-hero .portrait-launch {
  position: relative;
  z-index: 3;
  display: block;
  width: fit-content;
  min-height: 44px;
  margin: 12px auto 0;
  padding: 6px 18px;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #151215;
  color: #fff5f2;
  font-size: 13px;
  font-weight: 650;
}

.reference-hero .portrait-launch + .hero-features { margin-top: 16px; }

dialog.portrait-viewer {
  width: min(780px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(10px, 2.4vw, 22px);
  border: 1px solid #ffffff35;
  border-radius: 15px;
  background: #141015;
  color: #fff5f2;
}

.portrait-viewer header,
.portrait-viewer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portrait-viewer header { margin-bottom: 10px; }
.portrait-viewer-controls { margin-top: 10px; }

.portrait-viewer h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(19px, 3vw, 28px);
  line-height: 1.2;
  letter-spacing: 0;
}

.portrait-viewer img {
  display: block;
  width: 100%;
  height: min(65dvh, 660px);
  object-fit: contain;
  border-radius: 8px;
  background: #09080a;
}

.portrait-viewer button {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #ffffff35;
  border-radius: 50%;
  color: inherit;
  font-size: 23px;
  line-height: 1;
}

.reference-hero .portrait-launch:hover,
.portrait-viewer button:hover { border-color: #ff8585; color: #ffb3b3; }

.portrait-viewer button:focus-visible { outline: 2px solid #ff8585; outline-offset: 2px; }
.portrait-viewer output { color: #ddcdd2; font-size: 13px; font-variant-numeric: tabular-nums; }