.landing-page .ambient {
    z-index: 1;
    opacity: 1;
    perspective: 800px;
}

.landing-page .ambient::before {
    position: absolute;
    inset: 0;
    content: '';
    background:
        radial-gradient(circle at 18% 32%, rgba(202, 174, 112, .055), transparent 18%),
        radial-gradient(circle at 78% 62%, rgba(89, 163, 143, .065), transparent 22%);
    animation: ambient-breathe 10s ease-in-out infinite alternate;
}

.landing-page .ambient .particle {
    --particle-x: 50%;
    --particle-y: 50%;
    --particle-duration: 14s;
    --particle-delay: 0s;
    --particle-scale: .7;
    width: 45px;
    height: 45px;
    left: var(--particle-x);
    top: var(--particle-y);
    display: grid;
    place-items: center;
    color: #719288;
    font-size: 0;
    opacity: .31;
    will-change: transform, opacity;
    transform-origin: center;
}

.landing-page .ambient .particle svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.25;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2));
}

.landing-page .ambient .particle--fork {
    width: 39px;
    height: 39px;
    color: #9b8d6c;
    opacity: .25;
}

.landing-page .ambient .particle--drift-a {
    animation: papyrus-drift-a var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.landing-page .ambient .particle--drift-b {
    animation: papyrus-drift-b var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.landing-page .ambient .particle--drift-c {
    animation: papyrus-drift-c var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.landing-page .ambient .particle--drift-d {
    animation: papyrus-drift-d var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

@keyframes papyrus-drift-a {
    0%, 100% { transform: translate3d(-7px, 10px, 0) rotate(-9deg) scale(var(--particle-scale)); opacity: .2; }
    28% { transform: translate3d(13px, -17px, 0) rotate(4deg) scale(var(--particle-scale)); opacity: .36; }
    62% { transform: translate3d(-12px, -31px, 0) rotate(13deg) scale(var(--particle-scale)); opacity: .27; }
    82% { transform: translate3d(8px, -7px, 0) rotate(2deg) scale(var(--particle-scale)); opacity: .34; }
}

@keyframes papyrus-drift-b {
    0%, 100% { transform: translate3d(12px, -5px, 0) rotate(8deg) scale(var(--particle-scale)); opacity: .23; }
    31% { transform: translate3d(-14px, 15px, 0) rotate(-11deg) scale(var(--particle-scale)); opacity: .34; }
    68% { transform: translate3d(18px, 29px, 0) rotate(7deg) scale(var(--particle-scale)); opacity: .2; }
    86% { transform: translate3d(3px, 8px, 0) rotate(-3deg) scale(var(--particle-scale)); opacity: .31; }
}

@keyframes papyrus-drift-c {
    0%, 100% { transform: translate3d(-5px, -14px, 0) rotate(11deg) scale(var(--particle-scale)); opacity: .18; }
    25% { transform: translate3d(18px, 3px, 0) rotate(-3deg) scale(var(--particle-scale)); opacity: .32; }
    57% { transform: translate3d(7px, 27px, 0) rotate(-13deg) scale(var(--particle-scale)); opacity: .25; }
    79% { transform: translate3d(-17px, 9px, 0) rotate(5deg) scale(var(--particle-scale)); opacity: .35; }
}

@keyframes papyrus-drift-d {
    0%, 100% { transform: translate3d(4px, 15px, 0) rotate(-12deg) scale(var(--particle-scale)); opacity: .21; }
    34% { transform: translate3d(-19px, -4px, 0) rotate(1deg) scale(var(--particle-scale)); opacity: .36; }
    66% { transform: translate3d(5px, -28px, 0) rotate(14deg) scale(var(--particle-scale)); opacity: .24; }
    84% { transform: translate3d(16px, -6px, 0) rotate(3deg) scale(var(--particle-scale)); opacity: .32; }
}

@keyframes ambient-breathe {
    from { opacity: .55; transform: scale(1); }
    to { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 800px) {
    .landing-page .ambient {
        top: 86px;
    }

    .landing-page .ambient .particle {
        width: 35px;
        height: 35px;
        opacity: .24;
    }

    .landing-page .ambient .particle:nth-child(3n) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page .ambient .particle,
    .landing-page .ambient::before {
        animation: none !important;
    }
}