/* Ambient magic, synchronized with the primary site hero. */
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.banner::before {
  inset: -28%;
  background:
    radial-gradient(ellipse at 69% 56%, rgba(82, 208, 255, .32), transparent 19%),
    radial-gradient(ellipse at 74% 50%, rgba(255, 202, 87, .19), transparent 14%),
    linear-gradient(112deg, transparent 38%, rgba(80, 187, 255, .16) 48%, transparent 59%);
  mix-blend-mode: screen;
  filter: blur(7px);
  animation: banner-aura 10s ease-in-out infinite alternate;
}

.banner::after {
  inset: 0;
  background: linear-gradient(116deg, transparent 38%, rgba(194, 241, 255, .18) 47%, transparent 56%);
  transform: translateX(-135%);
  animation: banner-sheen 5.5s ease-in-out infinite;
}

.banner-copy { z-index: 2; }

.banner-particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.banner-particles i {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f7dc77;
  box-shadow: 0 0 8px 3px rgba(255, 220, 119, .44), 0 0 22px 6px rgba(83, 187, 255, .2);
  opacity: 0;
  animation: banner-spark 8s linear infinite;
}

.banner-particles i:nth-child(1) { left: 55%; top: 74%; animation-delay: -1s; animation-duration: 9s; }
.banner-particles i:nth-child(2) { left: 69%; top: 67%; width: 4px; height: 4px; animation-delay: -5.4s; animation-duration: 11s; }
.banner-particles i:nth-child(3) { left: 78%; top: 78%; width: 5px; height: 5px; animation-delay: -2.8s; animation-duration: 10s; }
.banner-particles i:nth-child(4) { left: 86%; top: 48%; width: 3px; height: 3px; animation-delay: -7.3s; animation-duration: 9.5s; }
.banner-particles i:nth-child(5) { left: 62%; top: 89%; width: 4px; height: 4px; animation-delay: -3.6s; animation-duration: 12s; }
.banner-particles i:nth-child(6) { left: 92%; top: 72%; animation-delay: -6.2s; animation-duration: 10.5s; }
.banner-particles i:nth-child(7) { left: 72%; top: 92%; width: 3px; height: 3px; animation-delay: -.6s; animation-duration: 8.5s; }
.banner-particles i:nth-child(8) { left: 48%; top: 83%; width: 3px; height: 3px; animation-delay: -4.6s; animation-duration: 11.5s; }

@keyframes banner-aura {
  from { transform: translate3d(-2%, 1%, 0) scale(.96); opacity: .52; }
  to { transform: translate3d(3%, -2%, 0) scale(1.08); opacity: .95; }
}

@keyframes banner-sheen {
  0%, 25% { transform: translateX(-135%); opacity: 0; }
  44% { opacity: 1; }
  66%, 100% { transform: translateX(135%); opacity: 0; }
}

@keyframes banner-spark {
  0% { transform: translate3d(0, 26px, 0) scale(.45); opacity: 0; }
  16% { opacity: .82; }
  54% { opacity: .36; }
  100% { transform: translate3d(38px, -270px, 0) scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner::before,
  .banner::after,
  .banner-particles i { animation: none; }
}