.hero-composition {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--page-bg);
  --ribbon-flow: calc(6.5vw - 20px);
  --body-art-height: 73.0338vw;
  --joint-offset: 56.25vw;
}
.composition-art {
  position: absolute;
  left: -1%;
  top: -0.5vw;
  width: 102%;
  height: 131.87vw;
  pointer-events: none;
  background: url("/optimized-images/lusora-statue-continuation.c1c60bad4be4.webp")
    center top / 100% auto no-repeat;
  transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0);
  mask-image: linear-gradient(
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) calc(100% - 160px),
    transparent 100%
  );
  will-change: transform;
}
.hero-composition .ribbon-bridge {
  background: none;
}
.hero-composition .ribbon-bridge::before {
  display: none;
}
.statue-body {
  position: relative;
  z-index: 1;
  height: max(180px, calc(var(--body-art-height) - var(--ribbon-flow)));
  pointer-events: none;
}
@media (min-width: 1101px) {
  .hero-composition {
    display: flex;
    flex-direction: column;
    min-height: 131.87vw;
  }
  .hero-composition .scene,
  .hero-composition .ribbon-bridge {
    flex-shrink: 0;
  }
  .hero-composition .statue-body {
    flex: 1 0 auto;
  }
  .composition-art {
    height: auto;
    bottom: -100svh;
    background: none;
    clip-path: none;
    mask-image: none;
    transform: none;
    will-change: auto;
  }
  .composition-image {
    position: sticky;
    top: min(0px, calc(100svh - 131.87vw));
    height: 131.87vw;
    background: url("/optimized-images/lusora-statue-continuation.c1c60bad4be4.webp")
      center top / 100% auto no-repeat;
    transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0);
    will-change: transform;
  }
  .hero-composition .body-art-sticky {
    display: none;
  }
  .hero-composition .scene {
    min-height: 0px;
    background: transparent;
  }
  .hero-composition .artwork {
    background: none;
    opacity: 1;
    mask-image: none;
  }
  .hero-composition .background-planes {
    display: none;
  }
}
@media (max-width: 1100px) {
  .composition-art {
    display: none;
  }
  .hero-composition .scene::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: clamp(38px, 7vw, 80px);
    z-index: -1;
    pointer-events: none;
    background: url("/optimized-images/lusora-statue-continuation.c1c60bad4be4.webp")
      center calc(clamp(38px, 7vw, 80px) - var(--joint-offset)) / 100% auto
      no-repeat;
    mask-image: linear-gradient(transparent, rgb(0, 0, 0) 40%);
  }
  .statue-body::before {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: calc(-1 * var(--ribbon-flow));
    bottom: 0px;
    background: url("/optimized-images/lusora-statue-continuation.c1c60bad4be4.webp")
      center calc(-1 * var(--joint-offset)) / 100% auto no-repeat;
    mask-image: linear-gradient(
      rgb(0, 0, 0) 0px,
      rgb(0, 0, 0) 82%,
      transparent 100%
    );
  }
}
@media (max-width: 640px) {
  .hero-composition .body-art-sticky {
    top: calc(-1 * var(--ribbon-flow));
    height: calc(100svh + var(--ribbon-flow));
    margin-top: calc(-1 * var(--ribbon-flow));
    background-position: center -77svh;
    clip-path: polygon(0 var(--ribbon-flow), 100% 0, 100% 100%, 0 100%);
  }
  .hero-composition .statue-body {
    display: flow-root;
  }

  .hero-composition {
    --ribbon-flow: calc(10.5vw + 25px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .composition-art,
  .composition-image {
    transform: none;
    will-change: auto;
  }
}