/* The shared background: an aurora of drifting light plus a dot grid whose
   dots light up inside a circle that follows the pointer. Used by the landing
   page hero, auth.html and the legal pages. Markup:

   <div class="backdrop" aria-hidden="true">
       <div class="aurora"><i></i><i></i><i></i><i></i></div>
       <div class="dots"></div><div class="spot"></div>
   </div>

   The aurora animates transform and opacity only. The spot is a 440px layer
   moved by transform; JavaScript/backdrop.js shifts its background by the
   same amount so its dots stay on the grid, which means only that circle
   repaints as the pointer moves, never the whole page. */

.backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop.is-fixed { position: fixed; }

.aurora { position: absolute; inset: 0; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { top: -38vmax; left: -12vmax; background: radial-gradient(closest-side, rgba(92, 131, 116, 0.42), transparent); }
.aurora i:nth-child(2) { top: -30vmax; right: -22vmax; background: radial-gradient(closest-side, rgba(24, 61, 61, 0.9), transparent); }
.aurora i:nth-child(3) { top: -10vmax; left: 25%; width: 50vmax; height: 50vmax; background: radial-gradient(closest-side, rgba(245, 221, 174, 0.10), transparent); }
.aurora i:nth-child(4) { top: -28vmax; left: 30%; background: radial-gradient(closest-side, rgba(86, 200, 150, 0.14), transparent); opacity: 0; }

.dots, .spot { background-size: 28px 28px; }
.dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(147, 177, 166, 0.16) 1px, transparent 1.3px);
    -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 30%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 65% 60% at 50% 30%, #000 25%, transparent 80%);
}
.spot {
    position: absolute; left: 0; top: 0; width: 440px; height: 440px; will-change: transform;
    background-image: radial-gradient(rgba(190, 222, 208, 0.95) 1.7px, transparent 2.3px);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    transition: opacity .4s;
}
.spot.off { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .aurora i:nth-child(1) { animation: drift-a 26s ease-in-out infinite alternate; }
    .aurora i:nth-child(2) { animation: drift-b 32s ease-in-out infinite alternate; }
    .aurora i:nth-child(3) { animation: drift-c 22s ease-in-out infinite alternate; }
    .aurora i:nth-child(4) { animation: hue 18s ease-in-out infinite; }
}
@keyframes drift-a { to { transform: translate(28vmax, 10vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-30vmax, 14vmax) scale(0.9); } }
@keyframes drift-c { to { transform: translate(-18vmax, 6vmax) scale(1.3); } }
@keyframes hue { 0%, 100% { opacity: 0; transform: translateX(-10vmax); } 50% { opacity: 1; transform: translateX(12vmax); } }

/* Behind a form or long text the lit dots are quieter, so they never
   compete with what is being read. */
.backdrop.is-fixed .spot, .backdrop.is-legal .spot { opacity: 0.55; }
.backdrop.is-fixed .spot.off, .backdrop.is-legal .spot.off { opacity: 0; }