:root {
  --shareai-aurora-background: #fff8f1;
  --shareai-aurora-one: #ffe1b8;
  --shareai-aurora-two: #ff8a2a;
  --shareai-aurora-three: #f05a00;
  --shareai-aurora-duration: 160s;
  --shareai-aurora-opacity: 0.16;
  --shareai-grain-opacity: 0.025;
  --shareai-grain-size: 260px;
  --shareai-grain-duration: 240s;
}

html {
  min-height: 100%;
  background: var(--shareai-aurora-background);
}

body {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent !important;
}

.shareai-aurora-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: var(--shareai-aurora-background);
}

.shareai-aurora-blob {
  position: absolute;
  width: max(58vw, 680px);
  height: max(58vw, 680px);
  border-radius: 50%;
  opacity: var(--shareai-aurora-opacity);
  filter: blur(105px);
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform;
  animation: shareai-aurora-drift var(--shareai-aurora-duration) ease-in-out infinite alternate;
}

.shareai-aurora-blob--one {
  top: -42%;
  left: -24%;
  background: radial-gradient(circle at 52% 48%, var(--shareai-aurora-one) 0 18%, transparent 68%);
}

.shareai-aurora-blob--two {
  top: 6%;
  right: -35%;
  background: radial-gradient(circle at 48% 52%, var(--shareai-aurora-two) 0 12%, transparent 67%);
  animation-delay: -67s;
  animation-direction: alternate-reverse;
}

.shareai-aurora-blob--three {
  bottom: -48%;
  left: 22%;
  background: radial-gradient(circle at 50% 50%, var(--shareai-aurora-three) 0 10%, transparent 66%);
  animation-delay: -109s;
}

.shareai-aurora-grain {
  position: absolute;
  inset: -12%;
  opacity: var(--shareai-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: var(--shareai-grain-size) var(--shareai-grain-size);
  mix-blend-mode: soft-light;
  animation: shareai-grain-drift var(--shareai-grain-duration) linear infinite;
}

@keyframes shareai-aurora-drift {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(0.94) rotate(-4deg);
  }
  45% {
    transform: translate3d(7%, 5%, 0) scale(1.08) rotate(3deg);
  }
  100% {
    transform: translate3d(-1%, 10%, 0) scale(0.98) rotate(7deg);
  }
}

@keyframes shareai-grain-drift {
  to {
    transform: translate3d(11%, 8%, 0);
  }
}

@media (max-width: 720px) {
  .shareai-aurora-blob {
    width: 94vw;
    height: 94vw;
    filter: blur(76px);
  }

  .shareai-aurora-blob--one {
    top: -18%;
    left: -44%;
  }

  .shareai-aurora-blob--two {
    top: 20%;
    right: -54%;
  }

  .shareai-aurora-blob--three {
    bottom: -20%;
    left: 14%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shareai-aurora-blob,
  .shareai-aurora-grain {
    animation: none;
  }
}

@media print {
  .shareai-aurora-background {
    display: none;
  }
}
