/* Glass stays inside the intro text, above the calls to action. */
.hero { isolation: isolate; }
.hero-intro { position: relative; isolation: isolate; }
.hero-intro > p {
  font-size: 16px;
  line-height: 1.9;
  max-width: 470px;
  color: var(--color-muted);
}
.hero-motion {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* Feather within the text block; never extend under the photo or buttons. */
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 80%, transparent),
    linear-gradient(to right, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
.hero-motion > svg { width: 150%; height: 100%; margin-left: -20%; display: block; }
.hero-motion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 48% at 42% 46%, rgba(250,245,244,.80) 8%, rgba(250,245,244,.66) 36%, rgba(250,245,244,.25) 68%, rgba(250,245,244,0) 100%);
}
@media (min-width: 481px) and (max-width: 800px) {
  .hero h1 span::after { content: '\00a0'; }
}
@media (max-width: 800px) {
  .hero-intro > p { max-width: 560px; }
}
@media (forced-colors: active), print {
  .hero-motion { display: none; }
}