:root {
    --ambient-base: #fff;
    --ambient-sky: rgba(91, 164, 185, .2);
    --ambient-green: rgba(62, 166, 119, .2);
}

html {
    min-height: 100%;
    background: var(--ambient-base);
}

body.ambient-page {
    isolation: isolate;
    background: transparent;
}

body.ambient-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 8% 20%, rgba(91,164,185,.08), transparent 46%),
        radial-gradient(circle at 92% 80%, rgba(62,166,119,.07), transparent 46%),
        var(--ambient-base);
    pointer-events: none;
}

body.ambient-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #fff 7%,
        rgba(255,255,255,.94) 12%,
        rgba(255,255,255,.68) 20%,
        rgba(255,255,255,.22) 33%,
        rgba(255,255,255,.22) 67%,
        rgba(255,255,255,.68) 80%,
        rgba(255,255,255,.94) 88%,
        #fff 93%,
        #fff 100%
    );
    pointer-events: none;
}

.ambient-background-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    contain: strict;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
    pointer-events: none;
}

.ambient-background-orb {
    position: absolute;
    width: max(76vw, 560px);
    height: max(76vw, 560px);
    border-radius: 50%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.ambient-background-orb.sky {
    top: -18%;
    left: -34%;
    background: radial-gradient(circle, rgba(91,164,185,.28) 0%, rgba(91,164,185,.12) 38%, transparent 70%);
}

.ambient-background-orb.green {
    right: -36%;
    bottom: -18%;
    background: radial-gradient(circle, rgba(62,166,119,.28) 0%, rgba(62,166,119,.12) 38%, transparent 70%);
}

@media (prefers-reduced-motion: reduce), (update: slow) {
    .ambient-background-orb { will-change: auto; }
}

@media print {
    .ambient-background-layer,
    body.ambient-page::after { display: none; }
}