#Auroras{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  z-index:0;
  animation: FadeIn 2.5s ease-out;
}


.Aurora{
  position:absolute;
  left:var(--x,70%);
  top:var(--y,25%);

  width:var(--w,160px);    
  height:var(--h,72px);    
  transform: translate(-50%,-50%) rotate(var(--rot,-10deg));
  opacity:var(--op,0.28);  

  filter: blur(var(--blur,10px)) saturate(115%); 
  mix-blend-mode: lighten; 
    filter: saturate(155%) contrast(108%) brightness(1.04);
}


.Aurora::before,
.Aurora::after{
  content:"";
  position:absolute;
  inset:-35%;
  border-radius:999px;


  -webkit-mask-image: radial-gradient(70% 55% at 50% 50%, #000 35%, transparent 72%);
  mask-image: radial-gradient(70% 55% at 50% 50%, #000 35%, transparent 72%);

  background-size: 220% 140%;
  background-position: 0% 50%;

  animation: auroraShift var(--dur,9s) ease-in-out infinite alternate;
}

.Aurora::before{
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      hsla(var(--hue,155), 100%, 70%, 0.00) 12%,
      hsla(calc(var(--hue,155) + 10), 100%, 70%, 0.75) 30%,
      hsla(calc(var(--hue,155) + 45), 100%, 72%, 0.65) 48%,
      hsla(calc(var(--hue,155) + 85), 100%, 70%, 0.55) 62%,
      hsla(calc(var(--hue,155) + 115),100%, 70%, 0.35) 74%,
      hsla(calc(var(--hue,155) + 140),100%, 70%, 0.00) 88%,
      transparent 100%
    );
  filter: drop-shadow(0 0 10px hsla(var(--hue,155), 100%, 70%, .22));
}


.Aurora::after{
  opacity:0.65;
  filter: blur(6px);
  transform: translateX(8%) scaleY(0.95);
  animation-duration: calc(var(--dur,9s) * 1.25);
  animation-delay: var(--delay, -2s);
  background-image:
    radial-gradient(70% 55% at 50% 50%,
      hsla(calc(var(--hue,155) + 35),100%,70%,0.35),
      transparent 65%
    ),
    linear-gradient(90deg,
      transparent 0%,
      hsla(calc(var(--hue,155) + 35),100%,70%,0.0) 18%,
      hsla(calc(var(--hue,155) + 75),100%,70%,0.35) 50%,
      transparent 82%
    );
}


@keyframes auroraShift{
  0%   { background-position: 0% 50%;   transform: translateX(-6%) skewX(-10deg) scaleY(0.95); }
  50%  { background-position: 55% 45%;  transform: translateX(2%)  skewX(-16deg) scaleY(1.10); }
  100% { background-position: 100% 50%; transform: translateX(8%)  skewX(-12deg) scaleY(0.98); }
}

@keyframes auroraFloat{
  0%,100% { transform: translate(-50%,-50%) rotate(var(--rot,-12deg)) translateY(0px); }
  50%     { transform: translate(-50%,-50%) rotate(calc(var(--rot,-12deg) + 6deg)) translateY(-10px); }
}


@keyframes FadeIn{
  from{opacity:0}
  to{opacity:1}
}


@media (prefers-reduced-motion: reduce){
  .Aurora, .Aurora::before, .Aurora::after{ animation:none !important; }
}