/* Static rendering of the SPA hero artwork (frontend/app HomePage/HeroSection.css) at its resting angles. */

.hero-art {
  container-type: inline-size;
}

.hero-art-scrim {
  background-image:
    linear-gradient(to bottom, var(--theme-page-hero-bg) 0%, transparent 15%),
    linear-gradient(to top, var(--theme-page-hero-bg) 0%, transparent 20%);
}

.hero-copy-scrim {
  background-image: linear-gradient(
    to right,
    transparent 0,
    var(--theme-page-hero-bg) 200px,
    var(--theme-page-hero-bg) 58%,
    transparent 96%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 100%) 0%,
    rgb(0 0 0 / 100%) 48%,
    rgb(0 0 0 / 0%) 86%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 100%) 0%,
    rgb(0 0 0 / 100%) 48%,
    rgb(0 0 0 / 0%) 86%
  );
}

.hero-art__shape {
  position: absolute;
  background: var(--theme-content-accent-muted);
}

.hero-art__pent-lg,
.hero-art__pent-far,
.hero-art__pent-md,
.hero-art__pent-sm {
  clip-path: polygon(
    50% 0%,
    100% 38.197%,
    80.902% 100%,
    19.098% 100%,
    0% 38.197%
  );
}

.hero-art__arrow-lg,
.hero-art__arrow-sm,
.hero-art__arrow-left {
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  transform-origin: 55.01% 50%;
}

.hero-art__orbit-near,
.hero-art__orbit-far,
.hero-art__orbit-left,
.hero-art__drift {
  border-radius: 50%;
  background: var(--theme-page-hero-title);
}

.hero-art__pent-lg {
  left: 43.332cqw;
  top: calc(50% - 15.947cqw);
  width: 78.279cqw;
  height: 74.447cqw;
  opacity: 0.07;
  transform: rotate(107.849898deg);
}

.hero-art__square {
  left: 43.328cqw;
  top: calc(50% - 47.469cqw);
  width: 36.263cqw;
  height: 36.263cqw;
  opacity: 0.06;
  transform: rotate(-104.755169deg);
}

.hero-art__pent-far {
  left: -27.87cqw;
  top: calc(50% - 43.09cqw);
  width: 64.518cqw;
  height: 61.36cqw;
  opacity: 0.05;
  transform: rotate(179.858074deg);
}

.hero-art__pent-md {
  left: 62.072cqw;
  top: calc(50% - 2.663cqw);
  width: 23.799cqw;
  height: 22.634cqw;
  opacity: 0.1;
  transform: rotate(179.858074deg);
}

.hero-art__arrow-lg {
  left: 33.872cqw;
  top: calc(50% + 13.468cqw);
  width: 17.022cqw;
  height: 20.207cqw;
  opacity: 0.11;
}

.hero-art__pent-sm {
  left: 38.731cqw;
  top: calc(50% - 20.75cqw);
  width: 13.755cqw;
  height: 13.082cqw;
  opacity: 0.14;
  transform: rotate(179.858074deg);
}

.hero-art__arrow-sm {
  left: 78.549cqw;
  top: calc(50% - 21.45cqw);
  width: 6.653cqw;
  height: 7.898cqw;
  opacity: 0.16;
  transform: rotate(390.798193deg);
}

.hero-art__arrow-left {
  left: 4.56cqw;
  top: calc(50% - 15.225cqw);
  width: 5.457cqw;
  height: 6.478cqw;
  opacity: 0.15;
}

.hero-art__orbit-near {
  left: 6.475cqw;
  top: calc(50% + 16.306cqw);
  width: 7.472cqw;
  height: 7.472cqw;
  opacity: 0.16;
}

.hero-art__orbit-far {
  left: 66.052cqw;
  top: calc(50% - 15.598cqw);
  width: 3.457cqw;
  height: 3.457cqw;
  opacity: 0.2;
}

.hero-art__orbit-left {
  left: 2.058cqw;
  top: calc(50% - 7.562cqw);
  width: 2.891cqw;
  height: 2.891cqw;
  opacity: 0.22;
}

.hero-art__drift {
  left: 88.992cqw;
  top: calc(50% + 19.91cqw);
  width: 2.572cqw;
  height: 2.572cqw;
  opacity: 0.26;
}