/* ================================================================
   Soka-inspired ambient campus background
   Slow, decorative motion only. All shapes are non-interactive.
================================================================ */

body {
    isolation: isolate;
}

.ambient-campus-bg {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.ambient-campus-bg span {
    position: absolute;
    display: block;
    will-change: transform;
}

.ambient-campus-bg .ambient-blob {
    border: 2px solid rgba(7, 55, 168, .16);
    background: rgba(255, 255, 255, .28);
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .09);
}

.ambient-campus-bg .ambient-blob--green {
    top: 12%;
    left: -96px;
    width: 230px;
    height: 230px;
    border-radius: 46% 54% 61% 39% / 48% 36% 64% 52%;
    background: rgba(83, 203, 145, .22);
}

.ambient-campus-bg .ambient-blob--blue {
    right: -115px;
    bottom: 17%;
    width: 280px;
    height: 280px;
    border-radius: 63% 37% 44% 56% / 42% 58% 42% 58%;
    background: rgba(39, 170, 225, .22);
}

.ambient-campus-bg .ambient-ring {
    width: 112px;
    height: 112px;
    border: 16px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(7, 55, 168, .12);
}

.ambient-campus-bg .ambient-ring--a {
    top: 31%;
    right: 4%;
}

.ambient-campus-bg .ambient-ring--b {
    bottom: 8%;
    left: 8%;
    width: 78px;
    height: 78px;
    border-width: 11px;
    border-color: rgba(255, 209, 26, .42);
}

.ambient-campus-bg .ambient-dot-grid {
    top: 60%;
    left: 2%;
    width: 106px;
    height: 106px;
    opacity: .45;
    background-image: radial-gradient(circle, #0737a8 2px, transparent 2.5px);
    background-size: 18px 18px;
    transform: rotate(-8deg);
}

.ambient-campus-bg .ambient-arc {
    top: 6%;
    right: 22%;
    width: 160px;
    height: 80px;
    border: 3px dashed rgba(255, 255, 255, .58);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 100% 0 0;
    transform: rotate(11deg);
}

.ambient-campus-bg .ambient-leaf {
    width: 44px;
    height: 25px;
    border: 2px solid rgba(7, 55, 168, .28);
    border-radius: 100% 0 100% 0;
    background: rgba(83, 203, 145, .62);
}

.ambient-campus-bg .ambient-leaf--a {
    top: 47%;
    left: 14%;
    transform: rotate(24deg);
}

.ambient-campus-bg .ambient-leaf--b {
    right: 15%;
    bottom: 6%;
    width: 35px;
    height: 20px;
    background: rgba(255, 209, 26, .68);
    transform: rotate(-32deg);
}

.ambient-campus-bg .ambient-orbit {
    top: 76%;
    right: 31%;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(7, 55, 168, .32);
    border-radius: 50%;
    background: #fff;
    box-shadow:
        20px -22px 0 1px rgba(255, 71, 61, .62),
        48px 6px 0 2px rgba(255, 209, 26, .7);
}

@media (prefers-reduced-motion: no-preference) {
    .ambient-campus-bg .ambient-blob--green {
        animation: ambientBlobA 24s ease-in-out infinite alternate;
    }

    .ambient-campus-bg .ambient-blob--blue {
        animation: ambientBlobB 30s ease-in-out infinite alternate;
    }

    .ambient-campus-bg .ambient-ring--a {
        animation: ambientRingA 20s ease-in-out infinite;
    }

    .ambient-campus-bg .ambient-ring--b {
        animation: ambientRingB 26s ease-in-out -8s infinite;
    }

    .ambient-campus-bg .ambient-dot-grid {
        animation: ambientDots 34s ease-in-out infinite alternate;
    }

    .ambient-campus-bg .ambient-arc {
        animation: ambientArc 28s linear infinite;
    }

    .ambient-campus-bg .ambient-leaf--a {
        animation: ambientLeafA 18s ease-in-out infinite;
    }

    .ambient-campus-bg .ambient-leaf--b {
        animation: ambientLeafB 22s ease-in-out -6s infinite;
    }

    .ambient-campus-bg .ambient-orbit {
        animation: ambientOrbit 16s ease-in-out infinite;
    }
}

@keyframes ambientBlobA {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(35px, 45px, 0) rotate(13deg); }
    100% { transform: translate3d(12px, 105px, 0) rotate(-8deg); }
}

@keyframes ambientBlobB {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    55%  { transform: translate3d(-42px, -34px, 0) rotate(-10deg) scale(1.06); }
    100% { transform: translate3d(-16px, -96px, 0) rotate(9deg) scale(.96); }
}

@keyframes ambientRingA {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(-28px, -36px, 0) rotate(180deg); }
}

@keyframes ambientRingB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(46px, -22px, 0) scale(1.12); }
}

@keyframes ambientDots {
    from { transform: translate3d(0, 0, 0) rotate(-8deg); }
    to   { transform: translate3d(42px, -72px, 0) rotate(4deg); }
}

@keyframes ambientArc {
    from { transform: translate3d(0, 0, 0) rotate(11deg); }
    to   { transform: translate3d(-65px, 38px, 0) rotate(371deg); }
}

@keyframes ambientLeafA {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(24deg); }
    50%      { transform: translate3d(28px, -45px, 0) rotate(74deg); }
}

@keyframes ambientLeafB {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-32deg); }
    50%      { transform: translate3d(-42px, -36px, 0) rotate(-82deg); }
}

@keyframes ambientOrbit {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(38px, -28px, 0) rotate(180deg); }
}

@media (max-width: 780px) {
    .ambient-campus-bg .ambient-arc,
    .ambient-campus-bg .ambient-dot-grid,
    .ambient-campus-bg .ambient-ring--b,
    .ambient-campus-bg .ambient-leaf--b {
        display: none;
    }

    .ambient-campus-bg .ambient-blob--green {
        width: 170px;
        height: 170px;
        left: -105px;
    }

    .ambient-campus-bg .ambient-blob--blue {
        width: 190px;
        height: 190px;
        right: -125px;
    }

    .ambient-campus-bg .ambient-ring--a {
        right: -44px;
        width: 84px;
        height: 84px;
        border-width: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-campus-bg span {
        will-change: auto;
    }
}