.atmosphere-page {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

.atmosphere-page > .page-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.atmosphere-page > main,
.atmosphere-page > .studio-footer {
    position: relative;
    z-index: 1;
}

.project-atmosphere {
    background:
        radial-gradient(ellipse at 17% 8%, rgba(178, 128, 44, 0.16), transparent 38rem),
        radial-gradient(ellipse at 86% 58%, rgba(112, 76, 25, 0.09), transparent 44rem),
        linear-gradient(155deg, #100d08 0%, #090806 52%, #080808 100%);
}

.project-atmosphere .page-atmosphere::before,
.project-atmosphere .page-atmosphere::after {
    content: "";
    position: absolute;
    width: min(64vw, 58rem);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.18;
}

.project-atmosphere .page-atmosphere::before {
    top: -28%;
    left: -18%;
    background: radial-gradient(circle, rgba(225, 175, 77, 0.44), transparent 66%);
}

.project-atmosphere .page-atmosphere::after {
    right: -24%;
    bottom: -34%;
    background: radial-gradient(circle, rgba(150, 98, 31, 0.32), transparent 68%);
}

.gold-dust-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.82;
}

.project-atmosphere .form-panel,
.license-atmosphere .form-panel {
    background: rgba(18, 18, 18, 0.9);
    backdrop-filter: blur(12px);
}

.form-context a {
    color: inherit;
    text-underline-offset: 0.18em;
}

.optional-label {
    margin-left: 0.45em;
    color: var(--funnel-muted);
    font-size: 0.72em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.license-atmosphere {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(114, 132, 155, 0.16), transparent 42rem),
        linear-gradient(175deg, #090a0c 0%, #08090a 48%, #080808 100%);
}

.spectral-haze {
    position: absolute;
    width: 125vw;
    height: 72vh;
    left: -18vw;
    opacity: 0.4;
    filter: blur(36px) saturate(1.1);
    mix-blend-mode: screen;
    will-change: transform;
}

.spectral-haze-one {
    top: -18vh;
    background:
        linear-gradient(108deg, transparent 10%, rgba(105, 135, 163, 0.26) 29%, rgba(224, 215, 180, 0.3) 43%, rgba(131, 104, 151, 0.18) 57%, transparent 76%),
        radial-gradient(ellipse at 64% 44%, rgba(231, 226, 199, 0.27), transparent 43%);
    transform: rotate(-9deg) translate3d(-14%, -4%, 0) scale(1.02);
    animation: spectral-drift-one 18s linear infinite alternate;
}

.spectral-haze-one::after {
    content: "";
    position: absolute;
    inset: 9% 17%;
    background: linear-gradient(108deg, transparent 28%, rgba(255, 246, 214, 0.2) 50%, transparent 72%);
    filter: blur(22px);
}

.spectral-haze-two {
    top: 42vh;
    background:
        linear-gradient(122deg, transparent 14%, rgba(89, 116, 145, 0.22) 36%, rgba(177, 153, 132, 0.16) 52%, rgba(117, 133, 160, 0.21) 68%, transparent 84%),
        radial-gradient(ellipse at 28% 54%, rgba(119, 151, 181, 0.2), transparent 40%);
    transform: rotate(11deg) translate3d(12%, 5%, 0) scale(1.02);
    animation: spectral-drift-two 24s linear infinite alternate;
}

.spectral-grain {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.18) 0 0.6px, transparent 0.9px),
        radial-gradient(circle at 73% 31%, rgba(195, 211, 225, 0.13) 0 0.5px, transparent 0.8px),
        radial-gradient(circle at 39% 76%, rgba(255, 245, 222, 0.12) 0 0.5px, transparent 0.85px);
    background-size: 143px 137px, 197px 181px, 229px 211px;
}

@keyframes spectral-drift-one {
    to {
        transform: rotate(2deg) translate3d(20%, 12%, 0) scale(1.15);
    }
}

@keyframes spectral-drift-two {
    to {
        transform: rotate(1deg) translate3d(-20%, -12%, 0) scale(1.12);
    }
}

@media (max-width: 640px) {
    .project-atmosphere .page-atmosphere::before,
    .project-atmosphere .page-atmosphere::after {
        width: 34rem;
        filter: blur(56px);
    }

    .gold-dust-canvas {
        opacity: 0.72;
    }

    .spectral-haze {
        width: 170vw;
        left: -35vw;
        opacity: 0.32;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spectral-haze {
        animation: none;
        will-change: auto;
    }

    .spectral-haze-one {
        transform: rotate(-4deg) translate3d(2%, 2%, 0);
    }

    .spectral-haze-two {
        transform: rotate(5deg) translate3d(-2%, -2%, 0);
    }
}