.lead-portrait-layer {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.lead-portrait-layer.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body:has(#choices:not(.hide):not([hidden])) .lead-portrait-layer,
body:has(#choicePanel:not(.hide):not([hidden])) .lead-portrait-layer,
body:has(#choice-panel:not(.hide):not([hidden])) .lead-portrait-layer {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

.lead-portrait-layer::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent 48%, rgba(5, 6, 11, 0.04) 66%, rgba(5, 6, 11, 0.28) 100%),
    linear-gradient(0deg, rgba(5, 6, 11, 0.5) 0%, transparent 34%);
}

.lead-portrait-image {
  position: absolute;
  right: clamp(2.5vw, 5vw, 86px);
  bottom: -18vh;
  width: min(46vw, 700px);
  height: 112vh;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(-22px 20px 28px rgba(0, 0, 0, 0.5));
}

.lead-portrait-placeholder {
  position: absolute;
  right: clamp(5vw, 8vw, 128px);
  bottom: clamp(96px, 16vh, 154px);
  display: none;
  width: min(28vw, 360px);
  height: min(68vh, 720px);
  color: rgba(255, 255, 255, 0.72);
}

.lead-portrait-layer.is-placeholder .lead-portrait-image {
  display: none;
}

.lead-portrait-layer.is-placeholder .lead-portrait-placeholder {
  display: grid;
  place-items: end center;
}

.lead-portrait-placeholder::before {
  position: absolute;
  inset: 4% 13% 9%;
  content: "";
  border: 1px solid rgba(255, 212, 121, 0.16);
  border-radius: 45% 45% 10% 10% / 21% 21% 7% 7%;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.11) 0 12%, transparent 12.5%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(9, 10, 15, 0.76) 45%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.lead-portrait-placeholder span {
  position: relative;
  z-index: 1;
  margin-bottom: 11%;
  padding: 9px 16px;
  border: 1px solid rgba(255, 212, 121, 0.24);
  background: rgba(8, 9, 14, 0.74);
  font-size: 12px;
  letter-spacing: 3px;
}

@media (max-width: 900px), (max-height: 500px) {
  .lead-portrait-layer {
    z-index: 6;
  }

  .lead-portrait-image {
    right: max(8px, env(safe-area-inset-right));
    bottom: -25vh;
    width: min(46vw, 390px);
    height: 120vh;
  }

  .lead-portrait-placeholder {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 68px));
    width: min(31vw, 230px);
    height: min(64vh, 300px);
  }

  .lead-portrait-placeholder span {
    padding: 6px 10px;
    font-size: 9px;
    letter-spacing: 2px;
  }
}

@media (max-width: 760px) and (max-height: 380px) {
  .lead-portrait-image {
    bottom: -28vh;
    width: min(44vw, 320px);
    height: 122vh;
  }
}