@charset "UTF-8";

/* Keep the color inside the viewport. Motion is an enhancement to this static scene. */
.ambient-backdrop {
    contain: paint;
    overflow: hidden;
    pointer-events: none;
}
.ambient-orb {
    width: clamp(500px, 66vw, 1050px);
    aspect-ratio: 1;
    opacity: .85;
    animation: none;
    transform-origin: center;
}
.ambient-orb:nth-child(1) {
    top: -26vh;
    right: -14vw;
    bottom: auto;
    left: auto;
    background: radial-gradient(ellipse at 48% 47%, #e462c347 0%, #d78aeb2e 28%, #f1c8f116 48%, transparent 70%);
    transform: translate(-18px, 22px) scale(1.02);
}
.ambient-orb:nth-child(2) {
    top: 34vh;
    left: -23vw;
    right: auto;
    bottom: auto;
    background: radial-gradient(ellipse at 52% 46%, #f99c6740 0%, #f6b69a2e 29%, #ffc3dc14 49%, transparent 70%);
    transform: translate(24px, -14px) scale(1.02);
}
.ambient-orb:nth-child(3) {
    top: auto;
    bottom: -37vh;
    right: -8vw;
    left: auto;
    background: radial-gradient(ellipse at 48% 48%, #9275e743 0%, #bd9de82b 30%, #d8a3ec14 48%, transparent 70%);
    transform: translate(-8px, -30px) scale(1.02);
}

/* Quiet orbital lines frame the gradients without passing in front of content. */
.ambient-ribbon {
    position: absolute;
    display: block;
    width: clamp(650px, 78vw, 1300px);
    aspect-ratio: 1.4;
    border: 1.5px solid;
    border-color: #d17bae32 #dd936b1e #a47cc62b #cb73b521;
    border-radius: 50%;
    opacity: .64;
    animation: none;
    transform-origin: center;
}
.ambient-ribbon::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid;
    border-color: #d17bae16 transparent #a47cc61b #cb73b518;
    border-radius: inherit;
}
.ambient-ribbon:nth-of-type(4) {
    top: -30vh;
    right: -27vw;
    transform: rotate(-24deg) translate(-10px, 0);
}
.ambient-ribbon:nth-of-type(5) {
    top: 56vh;
    left: -37vw;
    transform: rotate(28deg) translate(0, -10px);
}

.js-ready .ambient-orb:nth-child(1) {
    animation: atlas-pink-flow 16s ease-in-out -3s infinite;
}
.js-ready .ambient-orb:nth-child(2) {
    animation: atlas-coral-flow 19s ease-in-out -9s infinite;
}
.js-ready .ambient-orb:nth-child(3) {
    animation: atlas-violet-flow 22s ease-in-out -14s infinite;
}
.js-ready .ambient-ribbon:nth-of-type(4) {
    animation: atlas-orbit-right 24s ease-in-out -5s infinite;
}
.js-ready .ambient-ribbon:nth-of-type(5) {
    animation: atlas-orbit-left 21s ease-in-out -11s infinite;
}

@keyframes atlas-pink-flow {
    0%, 100% { transform: translate(-18px, 22px) scale(1.02); opacity: .78; }
    35% { transform: translate(-88px, 72px) scale(1.09); opacity: .96; }
    70% { transform: translate(-36px, -22px) scale(.98); opacity: .82; }
}
@keyframes atlas-coral-flow {
    0%, 100% { transform: translate(24px, -14px) scale(1.02); opacity: .76; }
    40% { transform: translate(85px, -56px) scale(1.11); opacity: .94; }
    75% { transform: translate(48px, 36px) scale(.99); opacity: .81; }
}
@keyframes atlas-violet-flow {
    0%, 100% { transform: translate(-8px, -30px) scale(1.02); opacity: .78; }
    38% { transform: translate(-82px, -76px) scale(1.10); opacity: .97; }
    74% { transform: translate(25px, -18px) scale(.99); opacity: .82; }
}
@keyframes atlas-orbit-right {
    0%, 100% { transform: rotate(-24deg) translate(-10px, 0) scale(1); opacity: .58; }
    50% { transform: rotate(-11deg) translate(-48px, 30px) scale(1.04); opacity: .85; }
}
@keyframes atlas-orbit-left {
    0%, 100% { transform: rotate(28deg) translate(0, -10px) scale(1); opacity: .56; }
    50% { transform: rotate(13deg) translate(44px, -35px) scale(1.04); opacity: .82; }
}

[data-theme=dark] .ambient-orb:nth-child(1) {
    background: radial-gradient(ellipse at 48% 47%, #d948ae33 0%, #8a49bc29 28%, #873fb710 48%, transparent 70%);
}
[data-theme=dark] .ambient-orb:nth-child(2) {
    background: radial-gradient(ellipse at 52% 46%, #de6d4e29 0%, #ad4a8a24 29%, #bd49850e 49%, transparent 70%);
}
[data-theme=dark] .ambient-orb:nth-child(3) {
    background: radial-gradient(ellipse at 48% 48%, #9770e835 0%, #794db82b 30%, #8b4cbd0e 48%, transparent 70%);
}
[data-theme=dark] .ambient-orb { opacity: .85; }
[data-theme=dark] .ambient-ribbon {
    border-color: #cb83bc26 #e58e6c1b #b88cde2b #c17cad1f;
}

@media (max-width: 900px) {
    .ambient-orb { width: 660px; }
    .ambient-orb:nth-child(1) { top: -23vh; right: -245px; }
    .ambient-orb:nth-child(2) { top: 37vh; left: -280px; }
    .ambient-orb:nth-child(3) { bottom: -43vh; right: -210px; }
    .ambient-ribbon { width: 920px; }
    .ambient-ribbon:nth-of-type(4) { top: -18vh; right: -570px; }
    .ambient-ribbon:nth-of-type(5) { top: 51vh; left: -580px; }
}
@media (max-width: 650px) {
    .ambient-orb { width: 520px; }
    .ambient-orb:nth-child(1) { top: -180px; right: -175px; }
    .ambient-orb:nth-child(2) { top: 34vh; left: -210px; }
    .ambient-orb:nth-child(3) { bottom: -220px; right: -180px; }
    .ambient-ribbon { width: 690px; }
    .ambient-ribbon:nth-of-type(4) { top: -130px; right: -435px; }
    .ambient-ribbon:nth-of-type(5) { top: 53vh; left: -450px; }
}

/* The site control applies to every decorative layer, including future additions. */
.js-ready[data-motion-paused=true] .ambient-backdrop *,
.js-ready[data-motion-paused=true] .ambient-backdrop *::before,
.js-ready[data-motion-paused=true] .ambient-backdrop *::after {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .ambient-backdrop *, .ambient-backdrop *::before, .ambient-backdrop *::after {
        animation: none !important;
    }
}