/* Blend the decorative orbits into the existing scene; preserve assets and layout. */
.hero-scene > .q-art::before,
.hero-scene > .q-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: -11%;
  top: 20%;
  width: 122%;
  height: 40%;
  box-sizing: border-box;
  border: 1px solid rgba(130, 226, 216, .10);
  border-top-color: rgba(155, 240, 224, .17);
  border-right-color: rgba(130, 226, 216, .07);
  border-bottom-color: rgba(130, 226, 216, .045);
  border-radius: 50%;
  transform: rotate(-15deg);
  filter: drop-shadow(0 0 4px rgba(104, 225, 207, .09));
}
.hero-scene > .q-art::after {
  left: -16%;
  width: 132%;
  transform: rotate(23deg);
  border-top-color: rgba(155, 240, 224, .12);
  border-left-color: rgba(130, 226, 216, .075);
}
/* Feather only the scenic side edges. The second mask preserves the platform. */
.hero-scene > .q-art > .q-subject {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 64%, #000 82%);
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 64%, #000 82%);
  mask-composite: add;
}
@media (max-width: 560px) {
  .hero-scene > .q-art::before { left: -1%; width: 102%; }
  .hero-scene > .q-art::after { left: -5%; width: 110%; }
}
@media (forced-colors: active) {
  .hero-scene > .q-art::before,
  .hero-scene > .q-art::after { display: none; }
  .hero-scene > .q-art > .q-subject { -webkit-mask-image: none; mask-image: none; }
}