/* The source glow has a #101010 canvas, so the hero uses the same surface. */
.product-hero, .hero { background: #101010; }
.product-hero::before { background: none; }
.product-hero > .shell { position: relative; z-index: 1; }

.app-glow-frame {
  --app-glow-radius: 16px;
  position: relative;
  border-radius: var(--app-glow-radius);
}

.app-glow-frame > img { border-radius: inherit; }

.app-glow-video {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  max-width: none;
  object-fit: fill;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}