/* Current Embel shell + an autonomous demonstration. Native source provenance:
   docs/embel-website/current-native-design-v3.md. */
.emble-orb {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  background: radial-gradient(
    circle at 28% 20%,
    #c3cbdf 0%,
    #777f9e 28%,
    #354363 62%,
    #11172b 100%
  );
  box-shadow:
    inset 0 0 0 0.65px #e3ecff80,
    inset -2px -3px 5px #10192b55,
    0 0 5px #abbcff20;
}
.orb-light,
.orb-sheen {
  position: absolute;
  display: block;
  pointer-events: none;
}
.orb-light-low {
  inset: 23% -25% -12% -20%;
  background: radial-gradient(
    ellipse at center,
    #8199e6b8 0%,
    #768bc473 34%,
    #728fd000 69%
  );
  transform: rotate(-28deg);
  animation: orb-lower-flow 10.4s cubic-bezier(0.45, 0, 0.55, 1) infinite
    alternate;
}
.orb-light-high {
  inset: -24% -26% 13% 3%;
  background: radial-gradient(
    ellipse,
    #b1bcf4a8 0%,
    #7d91d944 38%,
    #728bd000 70%
  );
  transform: rotate(-34deg);
  animation: orb-upper-flow 8.8s cubic-bezier(0.45, 0, 0.55, 1) infinite
    alternate;
}
.orb-sheen {
  inset: -5%;
  background: radial-gradient(
    circle at 26% 21%,
    #fcfdffcf 0%,
    #dce6fc66 20%,
    #b6c4f514 42%,
    #dce6fc00 65%
  );
  animation: orb-sheen-flow 12.5s cubic-bezier(0.45, 0, 0.55, 1) infinite
    alternate;
}
@keyframes orb-lower-flow {
  from {
    transform: translate(-7%, 5%) rotate(-42deg) scaleX(0.94);
  }
  to {
    transform: translate(8%, -8%) rotate(-6deg) scaleX(1.12);
  }
}
@keyframes orb-upper-flow {
  from {
    transform: translate(5%, -9%) rotate(-53deg);
    opacity: 0.75;
  }
  to {
    transform: translate(-8%, 12%) rotate(-8deg);
    opacity: 1;
  }
}
@keyframes orb-sheen-flow {
  from {
    transform: translate(-5%, 0);
    opacity: 0.95;
  }
  to {
    transform: translate(7%, 8%);
    opacity: 0.7;
  }
}