/* Animated futuristic backdrop: drifting auroras in the logo colours, a perspective grid floor and a particle canvas. */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg) 70%); }

.backdrop-aurora { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .22; mix-blend-mode: screen; will-change: transform; }
.backdrop-aurora.is-a { background: var(--blue);   top: -25vmax; left: -15vmax; animation: aurora-a 22s ease-in-out infinite alternate; }
.backdrop-aurora.is-b { background: var(--rose);   bottom: -30vmax; right: -20vmax; animation: aurora-b 26s ease-in-out infinite alternate; }
.backdrop-aurora.is-c { background: var(--violet); top: 20%; right: -25vmax; width: 45vmax; height: 45vmax; opacity: .16; animation: aurora-c 30s ease-in-out infinite alternate; }

.backdrop-grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%;
  background-image:
    linear-gradient(rgba(155, 114, 203, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 133, 244, .22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: grid-run 3.2s linear infinite;
}
.backdrop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop-scan { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(255, 255, 255, .018) 50%); background-size: 100% 4px; opacity: .6; }
.backdrop-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .65)); }

@keyframes aurora-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-16vmax, -10vmax) scale(1.2); } }
@keyframes aurora-c { to { transform: translate(-22vmax, 14vmax) scale(.9); } }
@keyframes grid-run { to { background-position: 0 64px, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .backdrop-aurora, .backdrop-grid { animation: none; }
}