/*
 * Animated backdrop behind every screen. Only transform and opacity are animated, so phones can run it on the GPU
 * without repainting the page underneath.
 */

.sc-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(ellipse 120% 80% at 50% 0%, var(--sc-bg-glow, #0c2050) 0%, var(--sc-bg) 65%);
    pointer-events: none;
    --sc-bg-strength: 0.55;
}

.sc-bg.is-vivid {
    --sc-bg-strength: 1;
}

/* Slow-drifting colour glows */

.sc-bg-glow {
    position: absolute;
    width: 90vmax;
    height: 90vmax;
    border-radius: 50%;
    opacity: calc(0.55 * var(--sc-bg-strength));
    will-change: transform;
}

.sc-bg-glow-1 {
    top: -45vmax;
    left: -30vmax;
    background: radial-gradient(circle, rgba(var(--sc-primary-rgb), 0.55) 0%, transparent 62%);
    animation: sc-bg-drift-1 26s ease-in-out infinite alternate;
}

.sc-bg-glow-2 {
    right: -40vmax;
    bottom: -50vmax;
    background: radial-gradient(circle, rgba(157, 123, 255, 0.6) 0%, transparent 62%);
    animation: sc-bg-drift-2 32s ease-in-out infinite alternate;
}

.sc-bg-glow-3 {
    top: 20vh;
    left: 30vw;
    width: 60vmax;
    height: 60vmax;
    background: radial-gradient(circle, rgba(255, 200, 61, 0.28) 0%, transparent 60%);
    animation: sc-bg-drift-3 38s ease-in-out infinite alternate;
}

/* Neon grid floor rolling towards the viewer */

.sc-bg-floor {
    position: absolute;
    right: -50%;
    bottom: 0;
    left: -50%;
    height: 55%;
    overflow: hidden;
    opacity: calc(0.7 * var(--sc-bg-strength));
    transform: perspective(420px) rotateX(64deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 85%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 85%);
}

.sc-bg-floor-lines {
    position: absolute;
    top: -56px;
    right: 0;
    bottom: 0;
    left: 0;
    background-image:
        linear-gradient(rgba(var(--sc-primary-rgb), 0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--sc-primary-rgb), 0.3) 1px, transparent 1px);
    background-size: 56px 56px;
    animation: sc-bg-floor 2.4s linear infinite;
    will-change: transform;
}

/* A scanner beam sweeping down the screen every few seconds */

.sc-bg-beam {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent 0%, rgba(var(--sc-primary-rgb), 0.07) 70%, rgba(var(--sc-primary-rgb), 0.35) 98%, rgba(190, 245, 255, 0.8) 100%);
    opacity: 0;
    transform: translateY(-160px);
    animation: sc-bg-beam 9s cubic-bezier(0.45, 0, 0.55, 1) 1.5s infinite;
    will-change: transform, opacity;
}

/* Sparks rising like scanned data */

.sc-bg-sparks span {
    position: absolute;
    bottom: -12px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--hue);
    box-shadow: 0 0 8px 1px var(--hue);
    opacity: 0;
    animation: sc-bg-spark var(--duration) linear var(--delay) infinite;
    will-change: transform, opacity;
}

.sc-bg-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 70% at 50% 40%, transparent 40%, rgba(var(--sc-bg-rgb), 0.75) 100%),
        linear-gradient(180deg, rgba(var(--sc-bg-rgb), 0.15) 0%, rgba(var(--sc-bg-rgb), calc(0.55 - 0.35 * var(--sc-bg-strength))) 100%);
}

@keyframes sc-bg-drift-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(18vw, 14vh, 0) scale(1.15); }
}

@keyframes sc-bg-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to { transform: translate3d(-20vw, -16vh, 0) scale(0.95); }
}

@keyframes sc-bg-drift-3 {
    from { transform: translate3d(-10vw, 0, 0) scale(0.9); }
    to { transform: translate3d(12vw, -18vh, 0) scale(1.1); }
}

@keyframes sc-bg-floor {
    to { transform: translate3d(0, 56px, 0); }
}

@keyframes sc-bg-beam {
    0% {
        opacity: 0;
        transform: translateY(-160px);
    }
    8% {
        opacity: calc(0.9 * var(--sc-bg-strength));
    }
    55% {
        opacity: calc(0.9 * var(--sc-bg-strength));
        transform: translateY(100vh);
    }
    60%, 100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}

@keyframes sc-bg-spark {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
    10% {
        opacity: calc(0.9 * var(--sc-bg-strength));
    }
    80% {
        opacity: calc(0.6 * var(--sc-bg-strength));
    }
    100% {
        opacity: 0;
        transform: translate3d(24px, -105vh, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-bg *,
    .sc-bg *::before {
        animation: none !important;
    }

    .sc-bg-beam,
    .sc-bg-sparks {
        display: none;
    }
}