.moii-aurora-bg{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:clamp(92px,13vh,132px);
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  opacity:0;
  filter:saturate(.42) blur(22px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 42%,transparent 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 42%,transparent 100%);
  contain:layout paint size style;
  transition:opacity .8s ease, filter .8s ease;
}

.moii-aurora-bg canvas{
  display:block;
  width:100%;
  height:100%;
}

body.moii-aurora-ready .moii-aurora-bg{
  opacity:.06;
}

body.moii-aurora-paused .moii-aurora-bg{
  opacity:.02;
  filter:saturate(.42) blur(22px);
}

body.moii-aurora-windows.moii-aurora-ready .moii-aurora-bg{
  opacity:.075;
  filter:saturate(.56) blur(18px);
}

body.moii-aurora-fallback .moii-aurora-bg{
  opacity:.08;
  filter:saturate(.58) blur(18px);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,234,244,.72), transparent 56%),
    radial-gradient(circle at 72% 12%, rgba(240,255,251,.68), transparent 58%),
    linear-gradient(90deg, rgba(255,234,244,.34), rgba(241,243,255,.32));
}

body.moii-aurora-fallback .moii-aurora-bg canvas{
  display:none;
}

body.moii-aurora-ready .bg-orb{
  opacity:.12;
  filter:blur(58px);
}

body.moii-aurora-ready .star{
  animation:none !important;
  opacity:0 !important;
}

body.moii-aurora-ready .care-bubbles-wrap{
  overflow:hidden;
}

@media(max-width:760px){
  .moii-aurora-bg{
    height:96px;
  }

  body.moii-aurora-ready .moii-aurora-bg{
    opacity:.05;
  }
}

@media(max-width:420px){
  .moii-aurora-bg{
    height:88px;
  }

  body.moii-aurora-ready .moii-aurora-bg{
    opacity:.05;
  }
}

@media(max-width:760px){
  body.moii-aurora-paused .moii-aurora-bg{
    opacity:.02;
    filter:saturate(.42) blur(22px);
  }

  body.moii-aurora-windows.moii-aurora-ready .moii-aurora-bg,
  body.moii-aurora-fallback .moii-aurora-bg{
    opacity:.06;
    filter:saturate(.54) blur(17px);
  }
}

@media(max-width:420px){
  body.moii-aurora-paused .moii-aurora-bg{
    opacity:.02;
  }
}

@media(prefers-reduced-motion:reduce){
  .moii-aurora-bg{
    display:none;
  }
}

@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .moii-aurora-bg{
    -webkit-mask-image:none;
    mask-image:none;
  }
}
