/* Connect demos — the site's own animated background (the .ellipses block of front/public/css/site.css, as in demo1), used when no shared default is set at /bg/. */
:root { --spot: 83 245 126; }
@property --a-x { syntax: "<percentage>"; inherits: false; initial-value: 72%; }
@property --a-y { syntax: "<percentage>"; inherits: false; initial-value: 24%; }
@property --b-x { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --b-y { syntax: "<percentage>"; inherits: false; initial-value: 76%; }
@property --a-alpha { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --b-alpha { syntax: "<number>"; inherits: false; initial-value: 0; }

.ellipses {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    --a-x: 72%;
    --a-y: 24%;
    --b-x: 20%;
    --b-y: 76%;
    --a-alpha: 0;
    --b-alpha: 0;
    background-image:
        radial-gradient(circle 42vmax at var(--a-x) var(--a-y),
            rgb(var(--spot) / var(--a-alpha)) 0%,
            rgb(var(--spot) / calc(var(--a-alpha) * 0.78)) 18%,
            rgb(var(--spot) / calc(var(--a-alpha) * 0.45)) 40%,
            rgb(var(--spot) / calc(var(--a-alpha) * 0.18)) 62%,
            rgb(var(--spot) / calc(var(--a-alpha) * 0.05)) 82%,
            transparent 100%),
        radial-gradient(circle 42vmax at var(--b-x) var(--b-y),
            rgb(var(--spot) / var(--b-alpha)) 0%,
            rgb(var(--spot) / calc(var(--b-alpha) * 0.78)) 18%,
            rgb(var(--spot) / calc(var(--b-alpha) * 0.45)) 40%,
            rgb(var(--spot) / calc(var(--b-alpha) * 0.18)) 62%,
            rgb(var(--spot) / calc(var(--b-alpha) * 0.05)) 82%,
            transparent 100%);
    animation:
        fade-relocate-a 16s linear -4.8s infinite,
        fade-relocate-b 16s linear -8.8s infinite;
}

@keyframes fade-relocate-a {
    0%, 100% { --a-alpha: 0; }
    3% { --a-alpha: 0.15; }
    16% { --a-alpha: 0.24; }
    30% { --a-alpha: 0.34; }
    50% { --a-alpha: 0.27; }
    68% { --a-alpha: 0.2; }
    82% { --a-alpha: 0.16; }
    96% { --a-alpha: 0; }
}

@keyframes fade-relocate-b {
    0%, 100% { --b-alpha: 0; }
    3% { --b-alpha: 0.14; }
    16% { --b-alpha: 0.25; }
    30% { --b-alpha: 0.38; }
    50% { --b-alpha: 0.3; }
    68% { --b-alpha: 0.21; }
    82% { --b-alpha: 0.16; }
    96% { --b-alpha: 0; }
}