/* The intro is an enhancement. Without JavaScript, the modalities retain their normal layout. */
.page-home .modality-intro { display: none; }

html.has-modality-morph .page-home .modality-intro {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #0c0e14;
}

.page-home .modality-intro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

html.modality-morph-active .page-home .modality-intro img {
  visibility: hidden;
}

.modality-morph-layer {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  background: #0c0e14;
  will-change: left, top, width, height, border-radius;
}

.modality-morph-layer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

html.modality-morph-active .page-home [data-modality-target] {
  visibility: hidden;
}

@media (max-width: 878px) {
  html.has-modality-morph .page-home .modality-intro {
    height: 70vh;
    height: min(70svh, 620px);
  }
}