/* The approved artwork follows the existing scene's scroll transition. */
#experience .unknown .poseidon-art {
  position: absolute;
  inset: 110px 0 0 35%;
  width: 65%;
  height: calc(100% - 110px);
  object-fit: cover;
  object-position: 76% top;
  mask-image: linear-gradient(90deg, transparent, #000 24%);
  pointer-events: none;
  z-index: 1;
}
#experience .unknown::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 5, 16, .3), transparent 65%);
}
#experience .unknown::before {
  content: "";
  position: absolute;
  inset: 110px 0 0 35%;
  z-index: 2;
  pointer-events: none;
  background: rgba(3, 10, 28, .24);
  mask-image: linear-gradient(90deg, transparent, #000 24%);
}
#experience .unknown h2 {
  font-size: clamp(42px, 5.4vw, 92px);
}
#experience .unknown .scene-number,
#experience .unknown h2 {
  z-index: 3;
  text-shadow: 0 2px 24px rgba(2, 5, 16, .45);
}
@media (max-width: 900px), (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  #experience .stage > .unknown {
    min-height: 700px;
    padding-bottom: 430px;
    background: #020510;
  }
  #experience .unknown .poseidon-art {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 470px;
    object-position: 76% center;
    mask-image: none;
  }
  #experience .unknown::after {
    background: linear-gradient(180deg, #020510 0%, #020510 23%, transparent 48%, transparent 90%, #020510 100%);
  }
  #experience .unknown::before {
    inset: auto 0 0;
    height: 470px;
    mask-image: none;
  }
  #experience .unknown h2 {
    font-size: clamp(36px, 8.6vw, 76px);
  }
}