/* v50 — Pika Valge ja Mantise tingimuslikud laevakontakti paarisstseenid.
   Aktiveeriv andmeatribuut tuleb juhtiva koherentsuse (lead) valikust. */

.scene[data-contact-form="ship"][data-contact-host="white"],
.scene[data-contact-form="ship"][data-contact-host="mantis"] {
  --screen-x: 39.2%;
  --screen-y: 11.8%;
  --screen-w: 44.2%;
  --screen-h: 59.2%;
}

.scene[data-contact-form="ship"][data-contact-host="white"] .scene-background,
.scene[data-contact-form="ship"][data-contact-host="mantis"] .scene-background {
  object-position: center center !important;
  filter: none !important;
}

.scene[data-contact-form="ship"][data-contact-host="white"] .contact-stage.visible,
.scene[data-contact-form="ship"][data-contact-host="mantis"] .contact-stage.visible {
  display: grid !important;
  left: 26.4% !important;
  bottom: 7.9% !important;
  width: 15.5% !important;
  height: 58% !important;
  place-items: end center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9 !important;
}

.scene[data-contact-form="ship"][data-contact-host="white"] .contact-sprite,
.scene[data-contact-form="ship"][data-contact-host="mantis"] .contact-sprite {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  filter:
    drop-shadow(0 .34cqw .28cqw rgba(0, 7, 18, .32))
    drop-shadow(0 0 .34cqw rgba(95, 218, 255, .18)) !important;
}

.scene[data-contact-form="ship"][data-contact-host="white"] .contact-name,
.scene[data-contact-form="ship"][data-contact-host="mantis"] .contact-name {
  display: none !important;
}

/* Tööaken algab pärast inimese keha. Alien ja inimene jäävad vasakule vabaks. */
.scene[data-contact-form="ship"][data-contact-host="white"] .holo-console,
.scene[data-contact-form="ship"][data-contact-host="mantis"] .holo-console {
  left: var(--screen-x) !important;
  top: var(--screen-y) !important;
  width: var(--screen-w) !important;
  height: var(--screen-h) !important;
}

@media (max-width: 900px) {
  .scene[data-contact-form="ship"][data-contact-host="white"],
  .scene[data-contact-form="ship"][data-contact-host="mantis"] {
    --screen-x: 39%;
    --screen-w: 44.5%;
  }

  .scene[data-contact-form="ship"][data-contact-host="white"] .contact-stage.visible,
  .scene[data-contact-form="ship"][data-contact-host="mantis"] .contact-stage.visible {
    left: 26.1% !important;
    width: 15.9% !important;
  }
}