/* A shared full-width backdrop for spacious, left-aligned page intros. */
.sphere-intro { position: relative; isolation: isolate; overflow: clip; }
.sphere-intro > :not(.hero-sphere) { position: relative; z-index: 1; }
.hero-sphere { position: absolute; inset: 0; pointer-events: none; }
.sphere-intro > .hero-sphere { mask-image: linear-gradient(#000, #000 calc(100% - 140px), transparent); }
.hero-sphere-art { position: absolute; top: -595px; left: -435px; width: 1120px; height: 1400px; opacity: .42; mask-image: radial-gradient(ellipse at 43% 37%, #000 18%, #0009 40%, transparent 68%); }
.hero-sphere-art picture { display: block; width: 100%; height: 100%; }
.hero-sphere-art img, .hero-sphere-art video { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(1.055) saturate(1.12) blur(12px); mix-blend-mode: multiply; }
/* Keep one blended artwork visible: the still paints before video is eligible. */
.hero-sphere-art video { position: absolute; inset: 0; opacity: 0; }
.hero-sphere-art[data-playing="true"] img { visibility: hidden; }
.hero-sphere-art[data-playing="true"] video { opacity: 1; }
@media (max-width: 800px) {
  .hero-sphere-art { width: 900px; height: 1125px; top: -410px; left: -435px; opacity: .32; }
  /* The mobile still has this filter baked in, avoiding a large live paint surface. */
  .hero-sphere-art img { filter: none; }
  .hero-sphere-art video { filter: brightness(1.055) saturate(1.12) blur(15px); }
}