/* Portrait first, then the name. Keep every title in the footage's negative space. */
.experience-on .scene-copy.member-copy {
  top: auto;
  bottom: clamp(130px, 18svh, 240px);
  left: var(--gutter);
  right: auto;
  width: 46vw;
  max-width: 960px !important;
  color: #f4f2ed;
}
.experience-on .scene-copy.luna-copy {
  left: auto;
  right: calc(var(--gutter) + 2vw);
  width: 39vw;
  text-align: right;
}
.member-copy .member-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 430px;
  margin: 0 0 clamp(22px, 3svh, 42px);
  font-size: clamp(9px, .65vw, 12px);
  font-weight: 500;
  letter-spacing: .22em;
}
.member-edition { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; opacity: .65; }
.member-edition i { width: 28px; height: 1px; background: currentColor; }
.scene-copy.member-copy .member-name {
  overflow: hidden;
  margin: 0 0 22px -.045em;
  padding: .05em .06em .09em .02em;
  font-family: Manrope, sans-serif;
  font-size: clamp(70px, 9.2vw, 210px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.065em;
}
.member-name > span { display: block; }
.scene-copy.luna-copy .member-name { font-size: clamp(84px, 11.8vw, 250px); margin-right: -.025em; }
.scene-copy.sol-copy .member-name { font-size: clamp(96px, 14.6vw, 300px); }
.member-copy .member-phrase {
  max-width: none;
  font-family: Manrope, sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.member-copy .member-caption .jp {
  margin: 12px 0 0;
  font-size: clamp(10px, .8vw, 14px);
  letter-spacing: .12em;
  line-height: 1.7;
  color: #e1dfdae0;
}
.member-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 430px;
  margin-top: clamp(30px, 5svh, 60px);
  padding-top: 17px;
  border-top: 1px solid #f4f2ed40;
}
.member-coordinate { font-size: 9px; letter-spacing: .18em; color: #e1dfda9c; white-space: nowrap; }
.member-copy .scene-link { margin: 0; padding: 7px 0; border: 0; gap: 17px; font-size: 9px; letter-spacing: .12em; }
.member-copy .scene-link strong { font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.member-copy .scene-link:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }
.member-copy .scene-link:active { transform: translateY(2px); }
.luna-copy .member-kicker, .luna-copy .member-footer { margin-left: auto; }

/* Only the cinematic mode hides children. The reduced-motion document stays readable. */
.experience-on .member-name > span {
  transform: translate3d(0, 112%, 0);
  transition: transform 850ms cubic-bezier(.16, 1, .3, 1);
}
.experience-on .member-kicker,
.experience-on .member-caption,
.experience-on .member-footer {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 480ms ease, transform 650ms cubic-bezier(.16, 1, .3, 1);
}
.experience-on .is-present .member-name > span { transform: translate3d(0, 0, 0); transition-delay: 60ms; }
.experience-on .is-present .member-kicker,
.experience-on .is-present .member-caption,
.experience-on .is-present .member-footer { opacity: 1; transform: translate3d(0, 0, 0); }
.experience-on .is-present .member-caption { transition-delay: 220ms; }
.experience-on .is-present .member-footer { transition-delay: 340ms; }

@media (min-width: 601px) {
  .film-stage[data-chapter="haruka"] .scene-shade,
  .film-stage[data-chapter="sol"] .scene-shade {
    background: linear-gradient(90deg, #030509ad, #03050940 34%, transparent 64%), linear-gradient(0deg, #0305098c, transparent 60%);
  }
  .film-stage[data-chapter="luna"] .scene-shade {
    background: linear-gradient(270deg, #030509ad, #03050940 34%, transparent 64%), linear-gradient(0deg, #0305098c, transparent 60%);
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  .experience-on .scene-copy.member-copy { width: 47vw; bottom: 145px; }
  .experience-on .scene-copy.luna-copy { width: 42vw; }
  .member-copy .member-kicker { letter-spacing: .12em; }
  .member-coordinate { display: none; }
  .member-footer { justify-content: flex-start; }
  .luna-copy .member-footer { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .experience-on .scene-copy.member-copy {
    top: auto;
    bottom: 125px;
    left: 25px;
    right: 25px;
    width: auto;
    max-width: none !important;
    text-align: left;
  }
  .member-copy .member-kicker { max-width: none; margin-bottom: 21px; font-size: 9px; }
  .scene-copy.member-copy .member-name { font-size: 17.3vw; margin-bottom: 17px; }
  .scene-copy.luna-copy .member-name { font-size: 23vw; }
  .scene-copy.sol-copy .member-name { font-size: 29vw; }
  .member-copy .member-phrase { font-size: 17px; }
  .member-copy .member-caption .jp { margin-top: 7px; font-size: 11px; }
  .member-footer { margin-top: 27px; padding-top: 11px; max-width: none; }
  .member-copy .scene-link { gap: 12px; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .experience-on .scene-copy.member-copy { bottom: 90px; }
  .scene-copy.member-copy .member-name { font-size: min(10vw, 18svh); margin-bottom: 12px; }
  .member-copy .member-kicker { margin-bottom: 18px; }
  .member-copy .member-phrase { font-size: 17px; }
  .member-copy .member-caption .jp { margin-top: 6px; font-size: 10px; }
  .member-footer { margin-top: 19px; padding-top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-on .member-name > span,
  .experience-on .member-kicker,
  .experience-on .member-caption,
  .experience-on .member-footer { transition: none; }
}