/* Flowing light ribbons shared by every page. */
body { isolation: isolate; }
body:has(> .ambient-bg) { background-image: none; }

/* Let the shared animation show through the empty areas of the live feed. */
.app-layout .live-sidebar { background: rgba(5, 10, 17, .48); }

.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    color: rgb(var(--ambient-color));
    --ambient-color: var(--accent-rgb, 34, 197, 94);
    background:
        radial-gradient(ellipse at 30% 0%, rgba(var(--ambient-color), .075), transparent 55%),
        radial-gradient(ellipse at 100% 80%, rgba(var(--ambient-color), .045), transparent 50%);
}

.ambient-light {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    max-width: none;
    animation: ambient-flow 22s ease-in-out -6s infinite alternate;
}

.ambient-light--right {
    animation-duration: 29s;
    animation-delay: -17s;
    animation-direction: alternate-reverse;
}

.ambient-light--left {
    animation-duration: 33s;
    animation-delay: -9s;
}

.ambient-bloom { fill: none; stroke: currentColor; stroke-width: 100; opacity: .08; filter: blur(24px); }
.ambient-ribbon { fill: none; stroke: currentColor; stroke-width: 26; opacity: .055; filter: blur(5px); }
.ambient-contour { fill: none; stroke: currentColor; stroke-width: 1; opacity: .14; }
.ambient-contour--soft { opacity: .055; }

.ambient-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 52% 44%, rgba(4, 7, 12, .45), transparent 72%);
}

@keyframes ambient-flow {
    from { transform: translate3d(-1.5%, -1%, 0) rotate(-2deg) scale(1); opacity: .7; }
    to { transform: translate3d(2%, 2%, 0) rotate(2deg) scale(1.04); opacity: 1; }
}

@media (max-width: 768px) {
    .ambient-light { inset: -5% -35%; width: 170%; height: 110%; animation-duration: 28s; }
    .ambient-bloom { filter: none; stroke-width: 65; opacity: .045; }
    .ambient-ribbon { filter: none; opacity: .035; }
    .ambient-contour--soft { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-light { animation: none !important; opacity: .85; }
}

html[data-ambient-paused] .ambient-light { animation-play-state: paused !important; }