/* Statues: the layer heroes-statues.js adds inside the Construction opening's photograph (.bleed), right after the
   image, so the scrims and fades over the photo lie over the statues too. The layer is the photo's size and takes
   the photo's slow zoom (copied by the script); the stage inside it is the photograph's own 1920 x 1200 pixels,
   placed as object-fit: cover places the image, so every piece sits on the photo pixel it was cut from.
   Decorative: no pointer events, nothing laid out round it. */
main > header.hero > .bleed > .hs-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  transform-origin: 50% 50%;
}
main > header.hero > .bleed > .hs-layer > .hs-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1200px;
  transform-origin: 0 0;
}
.hs-stage > .hs-patch, .hs-stage > .hs-fig {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hs-stage > .hs-patch { z-index: 1; }
.hs-stage > .hs-fig {
  left: 0;
  top: 0;
  z-index: 2;
  transform-origin: 50% 100%;
  will-change: transform;
}
/* The soft shadow under a statue's feet while it stands on the cornice (photo px, before the stage's scale). */
.hs-stage > .hs-shadow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  opacity: 0;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  main > header.hero > .bleed > .hs-layer { display: none; }
}
html[data-solva-motion="paused"] main > header.hero > .bleed > .hs-layer,
body[data-solva-quiet="true"] main > header.hero > .bleed > .hs-layer { display: none; }