/* Cast composition only. Menu controls keep their existing layout. */
#landing-container .title-heroines {
  --cast-height: min(74dvh, 43vw, 1100px);
  left: env(safe-area-inset-left, 0px);
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
}

#landing-container .title-heroines .title-heroine {
  left: var(--cast-x);
  bottom: 0;
  width: auto;
  height: var(--cast-height);
  max-width: none;
  max-height: none;
  transform: translateX(var(--cast-anchor));
  opacity: 1;
  transition: none;
}

/* Anchor the visible head, rather than each file's transparent canvas. */
#landing-container .title-heroine.pos-1 { --cast-x: 12%; --cast-anchor: -53.3%; }
#landing-container .title-heroine.pos-2 { --cast-x: 31%; --cast-anchor: -47.8%; }
#landing-container .title-heroine.pos-3 { --cast-x: 50%; --cast-anchor: -47.8%; }
#landing-container .title-heroine.pos-4 { --cast-x: 69%; --cast-anchor: -47.7%; }
#landing-container .title-heroine.pos-5 { --cast-x: 88%; --cast-anchor: -47.3%; }

@media (orientation: landscape) and (max-height: 560px) {
  #landing-container .title-heroines {
    --cast-height: min(70dvh, 39vw);
  }
}

@media (orientation: portrait) {
  #landing-container .title-heroines {
    --cast-height: min(100%, 108vw, 980px);
  }

  #landing-container .title-heroine.pos-2,
  #landing-container .title-heroine.pos-4 {
    display: none;
  }

  #landing-container .title-heroines .title-heroine.pos-1,
  #landing-container .title-heroines .title-heroine.pos-5 {
    height: min(84%, 84vw, 840px);
  }

  #landing-container .title-heroine.pos-1 { --cast-x: 16%; }
  #landing-container .title-heroine.pos-5 { --cast-x: 84%; }
}

/* Lift the cast into the scene on tall phones without enlarging their faces. */
@media (orientation: portrait) and (max-aspect-ratio: 3 / 5) {
  #landing-container .title-heroines .title-heroine {
    --cast-lift: clamp(0px, calc(50dvh - 80vw), 160px);
    bottom: var(--cast-lift);
    height: min(calc(100% - var(--cast-lift)), 108vw, 980px);
    filter: none;
    -webkit-mask-image: linear-gradient(#000 86%, transparent);
    mask-image: linear-gradient(#000 86%, transparent);
  }
}