/* Local composition study: the laboratory is the opening scene. */
body[data-product="firmware"] .homunculus-fullscreen {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 650px;
  height: calc(100svh - 78px);
  margin: 0;
  padding: 0;
  background: #080e10;
  overflow: hidden;
}

.homunculus-fullscreen .homunculus-laboratory {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.homunculus-fullscreen .homunculus-laboratory > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  border: 0;
  box-shadow: none;
}

.homunculus-fullscreen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, #100b18 0, #100b1866 8%, transparent 32%);
}

body[data-product="firmware"] .homunculus-fullscreen .hero-art {
  flex: 0 0 auto;
  align-self: flex-end;
  width: clamp(230px, 22vw, 350px);
  height: auto;
  margin: 0 auto 28px;
  padding: 0 0 26px;
  z-index: 1;
  mix-blend-mode: screen;
}

.homunculus-fullscreen .hero-halo {
  width: 110%;
  background: radial-gradient(ellipse, #100b18d9, #100b1840 45%, transparent 70%);
}

.homunculus-fullscreen .hero-emblem > .hero-logo {
  filter: drop-shadow(0 2px 8px #000b);
}

.homunculus-fullscreen .hero-caption {
  left: 5%;
  right: 5%;
  font-size: .58rem;
  color: #d2c4db;
  text-shadow: 0 2px 5px #000;
}

body[data-product="firmware"] .homunculus-introduction {
  padding-top: 52px;
}

.homunculus-introduction .hero-tagline {
  margin-inline: auto;
}

/* A wide parchment needs its full width on a tall phone display. */
@media (max-aspect-ratio: 6/5) {
  body[data-product="firmware"] .homunculus-fullscreen {
    min-height: max(620px, calc(55.82vw + clamp(250px, 65vw, 420px) + 60px));
    height: calc(100svh - 78px);
    align-items: center;
    justify-content: center;
    padding-top: 55.82vw;
    background: radial-gradient(ellipse at 50% 58%, #1b2527, #080e10 70%);
  }

  .homunculus-fullscreen .homunculus-laboratory > img {
    height: auto;
    object-fit: contain;
  }

  .homunculus-fullscreen .homunculus-laboratory::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #080e10 0, transparent 60%),
      linear-gradient(0deg, #080e10, transparent 20%);
    pointer-events: none;
  }

  body[data-product="firmware"] .homunculus-fullscreen .hero-art {
    align-self: center;
    width: clamp(250px, 65vw, 420px);
    margin: 0 auto 20px;
  }
}

@media (max-width: 480px) {
  body[data-product="firmware"] .homunculus-fullscreen {
    min-height: 560px;
    height: calc(100svh - 96px);
  }

  body[data-product="firmware"] .homunculus-fullscreen .hero-art {
    width: min(78vw, 320px);
    margin-bottom: 20px;
  }
}