/* SSA aurora banner from Orginal Games/ssa_aurora_bg_3.html */

#ssa-aurora-bg {
  --ab-strength: 1;
  --ab-stars-strength: 1;
  --ab-ink: #12082e;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 565;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ab-ink);
  isolation: isolate;
}

#ssa-aurora-bg * {
  box-sizing: border-box;
}

#ssa-aurora-bg .ssa-ab-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 120% at 18% 12%, rgba(113, 54, 232, 0.30) 0%, rgba(113, 54, 232, 0) 58%),
    radial-gradient(70% 110% at 86% 8%, rgba(36, 116, 208, 0.26) 0%, rgba(36, 116, 208, 0) 60%),
    linear-gradient(180deg, #070417 0%, #0b0925 46%, #12082e 100%);
}

#ssa-aurora-bg .ssa-ab-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#ssa-aurora-bg .ssa-ab-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

#ssa-aurora-bg .ssa-ab-stars i {
  position: absolute;
  display: block;
  background: #fff;
  border-radius: 50%;
  animation: ssa-ab-twinkle 5s ease-in-out infinite;
}

#ssa-aurora-bg .ssa-ab-stars i.is-big {
  box-shadow: 0 0 7px rgba(190, 225, 255, 0.85);
}

#ssa-aurora-bg .ssa-ab-stars i.is-warm {
  background: #ffe9be;
}

#ssa-aurora-bg .ssa-ab-stars i.is-cool {
  background: #cfe6ff;
}

#ssa-aurora-bg .ssa-ab-meteor {
  position: absolute;
  width: 170px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: rotate(20deg);
  animation: ssa-ab-meteor 17s linear infinite;
}

#ssa-aurora-bg .ssa-ab-m1 {
  top: 14%;
  right: 8%;
  animation-delay: 3s;
}

#ssa-aurora-bg .ssa-ab-m2 {
  top: 32%;
  right: 46%;
  animation-delay: 11s;
  animation-duration: 23s;
  width: 120px;
}

#ssa-aurora-bg .ssa-ab-aurora {
  position: absolute;
  inset: -12% -8% -4%;
  pointer-events: none;
}

#ssa-aurora-bg .ssa-ab-band {
  position: absolute;
  display: block;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  will-change: transform;
}

#ssa-aurora-bg .ssa-ab-band > i {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 6px, #000 12px 17px, rgba(0, 0, 0, 0) 25px 29px);
  mask-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 6px, #000 12px 17px, rgba(0, 0, 0, 0) 25px 29px);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  will-change: mask-position, opacity;
  animation: ssa-ab-shimmer 9s linear infinite;
}

#ssa-aurora-bg .ssa-ab-b1 {
  right: 12%;
  top: -4%;
  width: 66%;
  height: 82%;
  filter: blur(24px);
  opacity: calc(0.72 * var(--ab-strength));
  animation: ssa-ab-drift-a 17s ease-in-out infinite;
}

#ssa-aurora-bg .ssa-ab-b1 > i {
  background: linear-gradient(to top, rgba(85, 207, 94, 0) 0%, rgba(85, 207, 94, 0.55) 30%, rgba(160, 255, 205, 0.95) 58%, rgba(85, 207, 94, 0.20) 84%, rgba(85, 207, 94, 0) 100%);
}

#ssa-aurora-bg .ssa-ab-b2 {
  right: -8%;
  top: 2%;
  width: 58%;
  height: 78%;
  filter: blur(30px);
  opacity: calc(0.52 * var(--ab-strength));
  animation: ssa-ab-drift-b 23s ease-in-out infinite;
}

#ssa-aurora-bg .ssa-ab-b2 > i {
  background: linear-gradient(to top, rgba(36, 116, 208, 0) 0%, rgba(36, 116, 208, 0.50) 32%, rgba(140, 215, 255, 0.80) 62%, rgba(36, 116, 208, 0) 100%);
  animation-duration: 12s;
  animation-direction: reverse;
}

#ssa-aurora-bg .ssa-ab-b3 {
  right: 52%;
  top: -6%;
  width: 58%;
  height: 84%;
  filter: blur(34px);
  opacity: calc(0.48 * var(--ab-strength));
  animation: ssa-ab-drift-c 29s ease-in-out infinite;
}

#ssa-aurora-bg .ssa-ab-b3 > i {
  background: linear-gradient(to top, rgba(113, 54, 232, 0) 0%, rgba(113, 54, 232, 0.48) 30%, rgba(195, 160, 255, 0.78) 60%, rgba(113, 54, 232, 0) 100%);
  animation-duration: 15s;
}

#ssa-aurora-bg .ssa-ab-b4 {
  right: 26%;
  top: 4%;
  width: 30%;
  height: 62%;
  filter: blur(11px);
  opacity: calc(0.42 * var(--ab-strength));
  animation: ssa-ab-drift-d 13s ease-in-out infinite;
}

#ssa-aurora-bg .ssa-ab-b4 > i {
  background: linear-gradient(to top, rgba(205, 255, 235, 0) 0%, rgba(205, 255, 235, 0.70) 44%, rgba(255, 255, 255, 0.55) 70%, rgba(205, 255, 235, 0) 100%);
  animation-duration: 7s;
}

#ssa-aurora-bg .ssa-ab-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, rgba(7, 4, 23, 0) 55%, rgba(7, 4, 23, 0.28) 100%);
  pointer-events: none;
}

#ssa-aurora-bg .ssa-ab-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 2;
}

@keyframes ssa-ab-drift-a {
  0%, 100% { transform: rotate(-10deg) skewX(-20deg) translateX(-7%) scaleY(0.92); }
  35% { transform: rotate(-2deg) skewX(-6deg) translateX(4%) scaleY(1.18); }
  70% { transform: rotate(-7deg) skewX(-14deg) translateX(8%) scaleY(1.02); }
}

@keyframes ssa-ab-drift-b {
  0%, 100% { transform: rotate(9deg) skewX(18deg) translateX(6%) scaleY(1.12); }
  50% { transform: rotate(1deg) skewX(4deg) translateX(-7%) scaleY(0.90); }
}

@keyframes ssa-ab-drift-c {
  0%, 100% { transform: rotate(-1deg) skewX(-4deg) translateX(5%) scaleY(0.94); }
  45% { transform: rotate(-11deg) skewX(-18deg) translateX(-6%) scaleY(1.16); }
}

@keyframes ssa-ab-drift-d {
  0%, 100% { transform: rotate(-13deg) skewX(-24deg) translateX(-6%) scaleY(0.95); }
  50% { transform: rotate(-4deg) skewX(-9deg) translateX(7%) scaleY(1.22); }
}

@keyframes ssa-ab-shimmer {
  0% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0.75; }
  50% { opacity: 1; }
  100% { -webkit-mask-position: 174px 0; mask-position: 174px 0; opacity: 0.75; }
}

@keyframes ssa-ab-twinkle {
  0%, 100% { opacity: calc(var(--s) * 0.28 * var(--ab-stars-strength)); transform: scale(0.85); }
  50% { opacity: calc(var(--s) * 1 * var(--ab-stars-strength)); transform: scale(1.2); }
}

@keyframes ssa-ab-meteor {
  0% { opacity: 0; transform: rotate(20deg) translateX(40px); }
  6% { opacity: 1; }
  18% { opacity: 0; transform: rotate(20deg) translateX(-520px); }
  100% { opacity: 0; transform: rotate(20deg) translateX(-520px); }
}

@media (max-width: 700px) {
  #ssa-aurora-bg .ssa-ab-b1 { filter: blur(14px); }
  #ssa-aurora-bg .ssa-ab-b2 { filter: blur(18px); }
  #ssa-aurora-bg .ssa-ab-b3 { filter: blur(20px); }
  #ssa-aurora-bg .ssa-ab-b4 { filter: blur(7px); }
}

@media (prefers-reduced-motion: reduce) {
  #ssa-aurora-bg .ssa-ab-band,
  #ssa-aurora-bg .ssa-ab-band > i,
  #ssa-aurora-bg .ssa-ab-stars i,
  #ssa-aurora-bg .ssa-ab-meteor {
    animation: none !important;
  }

  #ssa-aurora-bg .ssa-ab-stars i {
    opacity: calc(var(--s) * 0.8 * var(--ab-stars-strength));
  }

  #ssa-aurora-bg .ssa-ab-b1 { transform: rotate(-6deg) skewX(-13deg); }
  #ssa-aurora-bg .ssa-ab-b2 { transform: rotate(4deg) skewX(10deg); }
  #ssa-aurora-bg .ssa-ab-b3 { transform: rotate(-5deg) skewX(-10deg); }
  #ssa-aurora-bg .ssa-ab-b4 { transform: rotate(-7deg) skewX(-15deg); }
}