/* WebGL math object in the first hero story. The CSS orb is its resilient fallback. */
.ms-home .ms-scene-art-orb {
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 42%, rgba(255,255,255,.72), transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(24,61,55,.035));
}
.ms-home .ms-scene-art-orb::before,
.ms-home .ms-scene-art-orb::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.ms-home .ms-scene-art-orb::before {
  left: 8%;
  right: 8%;
  bottom: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(40,76,60,.2), transparent);
}
.ms-home .ms-scene-art-orb::after {
  width: 52%;
  height: 14%;
  left: 24%;
  bottom: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(27,91,97,.13), transparent 70%);
  filter: blur(7px);
}
.ms-home .ms-water-atmosphere {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .96;
}
.ms-home .ms-orb-fallback {
  position: absolute;
  z-index: 1;
  width: min(48%, 190px);
  aspect-ratio: 1;
  left: 50%;
  top: 45%;
  border: 1px solid rgba(27,91,97,.26);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.96), rgba(234,244,214,.7) 18%, rgba(74,146,151,.28) 61%, rgba(13,48,63,.12) 100%);
  box-shadow: inset -18px -22px 34px rgba(11,41,68,.13), 0 28px 42px rgba(20,74,81,.14);
  transform: translate(-50%, -50%);
}
.ms-home .ms-scene-art-orb.is-webgl .ms-orb-fallback { opacity: 0; }
.ms-home .ms-scene-art-orb .ms-art-formula {
  z-index: 3;
  border: 1px solid rgba(24,61,55,.1);
  letter-spacing: .04em;
  text-transform: lowercase;
}
@media (max-width: 560px) {
  .ms-home .ms-water-atmosphere { opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-home .ms-water-atmosphere { opacity: .9; }
}