.home-image-hero-page .hero--image-experiment {
  background:
    #000000;
  min-height: clamp(620px, 84vh, 900px);
}

.home-image-hero-page .hero-image-stage,
.home-image-hero-page .hero-image-stage__image,
.home-image-hero-page .hero-image-treatment {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-image-hero-page .hero-image-stage {
  background: #000000;
  z-index: 0;
}

.home-image-hero-page .hero-image-stage__image {
  display: block;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.02);
  transition:
    opacity 1100ms ease,
    transform 1400ms cubic-bezier(0.2, 0.72, 0.22, 1);
  width: 100%;
}

.home-image-hero-page .hero-image-stage__image.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.home-image-hero-page .hero-image-stage.is-initializing .hero-image-stage__image.is-active {
  opacity: 0;
  transform: scale(1.02);
}

.home-image-hero-page .hero-image-stage::after {
  background:
    radial-gradient(circle at 50% 58%, rgba(96, 67, 42, 0.2), transparent 22rem),
    rgba(10, 8, 6, 0.78);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 520ms ease;
  z-index: 3;
}

.home-image-hero-page .hero-image-stage.is-dissolving::after {
  animation: heroDarkroomDissolve 1200ms ease both;
}

@keyframes heroDarkroomDissolve {
  0%, 100% {
    opacity: 0;
  }

  44%, 58% {
    opacity: 0.46;
  }
}

.home-image-hero-page .hero-image-treatment {
  background: none;
  z-index: 2;
}

.home-image-hero-page .hero__shade {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.2) 34%, transparent 62%);
  opacity: 0.56;
  z-index: 3;
}

.home-image-hero-page .hero__content {
  z-index: 4;
}

@media (min-width: 1121px) {
  .home-image-hero-page .hero h1 {
    font-size: clamp(3.5rem, 6.9vw, 6.6rem);
    text-shadow:
      0 0 0.08rem rgba(0, 0, 0, 0.95),
      0 0 1.4rem rgba(0, 0, 0, 0.78),
      0 0 2.8rem rgba(0, 0, 0, 0.42);
  }

  .home-image-hero-page .hero-title-line:first-child {
    text-shadow:
      0 0 0.06rem rgba(0, 0, 0, 0.95),
      0 0 1.1rem rgba(0, 0, 0, 0.78);
  }
}

@media (max-width: 1120px) {
  .home-image-hero-page .hero-image-stage__image {
    object-position: center top;
  }

  .home-image-hero-page .hero-image-treatment {
    background: none;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .home-image-hero-page .hero--image-experiment {
    min-height: clamp(600px, 72svh, 800px);
  }
}

@media (min-width: 761px) and (max-width: 1120px) and (orientation: portrait) {
  .home-image-hero-page .hero-image-stage__image {
    object-position: 52% top;
  }

  .home-image-hero-page .hero-image-treatment {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.28) 34%,
        rgba(0, 0, 0, 0.04) 68%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.24) 26%,
        rgba(0, 0, 0, 0.14) 56%,
        transparent 76%
      );
  }
}

@media (max-width: 760px) {
  .home-image-hero-page .hero--image-experiment {
    min-height: max(600px, calc(100svh - var(--site-header-height)));
  }

  .home-image-hero-page .hero-image-stage__image {
    object-position: 54% top;
  }

  .home-image-hero-page .hero-image-treatment {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.26) 22%,
        rgba(0, 0, 0, 0.34) 38%,
        rgba(0, 0, 0, 0.16) 56%,
        transparent 72%
      );
  }
}