body {

    margin: 0;
    overflow: hidden;
    background: black;
    font-family: sans-serif;

}

#field {

    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #16204a 0%,
            #090b1f 22%,
            #02030a 55%,
            #000000 100%
        );

    transition:
        background 8s ease-in-out; 

}

/* STARS */

.stars {

    position: absolute;

    inset: -50%;

    background-image:

        radial-gradient(
            rgba(255,255,255,0.95) 1.2px,
            transparent 1.2px
        ),

        radial-gradient(
            rgba(140,180,255,0.7) 1px,
            transparent 1px
        ),

        radial-gradient(
            rgba(255,255,255,0.5) 2px,
            transparent 2px
        ),

        radial-gradient(
            rgba(180,220,255,0.35) 3px,
            transparent 3px
        );

    background-size:

        140px 140px,
        220px 220px,
        320px 320px,
        480px 480px;

    opacity: 0.32;

    animation:
        starsDrift 180s linear infinite,
        starsTwinkle 10s ease-in-out infinite;

}

/* ATMOSPHERIC LIGHT */

.layer {

    position: absolute;

    width: 120vw;
    height: 120vh;

    filter: blur(140px);

    opacity: 0.14;

    pointer-events: none;

}

.layer1 {

    background: #294cff;

    top: -10%;
    left: -10%;

}

.layer2 {

    background: #7f3fff;

    top: 20%;
    left: 40%;

}

.layer3 {

    background: #00c2a8;

    top: 40%;
    left: 10%;

}

/* ORBS */

.pai-orb {

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    cursor: pointer;

    opacity: 0.82;

    transition:
        transform 1.2s ease,
        opacity 4s ease;

    
        

}

.pai-orb:hover {

    transform: scale(1.08);

    opacity: 1;

    filter: brightness(1.2);

}

/* CHAKRA POSITIONS + COLORS */

.crown {

    top: 8%;
    left: 46%;

    background:
        radial-gradient(
            circle,
            #f1b3ff,
            #9b4dff
        );

    box-shadow:
        0 0 60px rgba(170,100,255,0.5);
    animation-delay: 0s;

}

.third-eye {

    top: 25%;
    left: 24%;

    background:
        radial-gradient(
            circle,
            #8ea2ff,
            #3b42ff
        );

    box-shadow:
        0 0 60px rgba(100,120,255,0.45);
    animation-delay: 2s;

}

.throat {

    top: 23%;
    left: 67%;

    background:
        radial-gradient(
            circle,
            #aefcff,
            #2bbcff
        );

    box-shadow:
        0 0 60px rgba(80,220,255,0.45);
    animation-delay: 4s;

}

.heart {

    top: 48%;
    left: 56%;

    background:
        radial-gradient(
            circle,
            #aaffc5,
            #26d96a
        );

    box-shadow:
        0 0 60px rgba(80,255,150,0.4);
    animation-delay: 1s;

}

.solar {

    top: 60%;
    left: 38%;

    background:
        radial-gradient(
            circle,
            #fff0a8,
            #ffc400
        );

    box-shadow:
        0 0 60px rgba(255,210,80,0.45);
    animation-delay: 5s;

}

.sacral {

    top: 72%;
    left: 60%;

    background:
        radial-gradient(
            circle,
            #ffd0a8,
            #ff7a00
        );

    box-shadow:
        0 0 60px rgba(255,140,50,0.45);
    animation-delay: 3s;

}

.root {

    top: 80%;
    left: 26%;

    background:
        radial-gradient(
            circle,
            #ff9ea8,
            #ff2555
        );

    box-shadow:
        0 0 60px rgba(255,80,100,0.45);
    animation-delay: 6s;

}

/* EXPERIENCE */

#experience {

    position: absolute;

    inset: 0;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 6s ease-in-out;

    overflow: hidden;

    backdrop-filter: blur(20px);

}

/* PARTICLES */

#experience-particles {

    position: absolute;

    inset: -20%;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.06),
            transparent 12%
        ),

        radial-gradient(
            circle at 70% 40%,
            rgba(255,255,255,0.05),
            transparent 16%
        ),

        radial-gradient(
            circle at 40% 70%,
            rgba(255,255,255,0.04),
            transparent 12%
        ),

        radial-gradient(
            circle at center,
            rgba(255,255,255,0.03),
            transparent 60%
        );

    filter: blur(60px);

    opacity: 0.7;

    animation:
        atmosphereDrift 24s ease-in-out infinite;

}

@keyframes atmosphereDrift {

    0% {

        transform:
            translate(0px, 0px)
            scale(1);

    }

    50% {

        transform:
            translate(-40px, -30px)
            scale(1.08);

    }

    100% {

        transform:
            translate(0px, 0px)
            scale(1);

    }

}

/* RETURN ORB */

#return-orb {

    position: absolute;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    left: 50%;
    bottom: 50px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.7),
            rgba(255,255,255,0.08)
        );

    opacity: 0.25;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}

#return-orb:hover {

    transform:
        translateX(-50%)
        scale(1.1);

    opacity: 0.45;

}

#experience-wave {

    position: absolute;

    width: 160vw;
    height: 160vh;

    left: -30vw;
    top: -30vh;

    border-radius: 40%;

    opacity: 0.18;

    filter: blur(120px);

    mix-blend-mode: screen;

    animation:
        slowWave 18s ease-in-out infinite;

}

@keyframes slowWave {

    0% {

        transform:
            rotate(0deg)
            scale(1);

    }

    50% {

        transform:
            rotate(180deg)
            scale(1.15);

    }

    100% {

        transform:
            rotate(360deg)
            scale(1);

    }

}

/* FLUID ORBITAL DRIFT */

.crown {

    animation:
        driftCrown 38s ease-in-out infinite;

}

.third-eye {

    animation:
        driftThirdEye 42s ease-in-out infinite;

}

.throat {

    animation:
        driftThroat 36s ease-in-out infinite;

}

.heart {

    animation:
        driftHeart 48s ease-in-out infinite;

}

.solar {

    animation:
        driftSolar 40s ease-in-out infinite;

}

.sacral {

    animation:
        driftSacral 52s ease-in-out infinite;

}

.root {

    animation:
        driftRoot 44s ease-in-out infinite;

}

/* KEYFRAMES */

@keyframes driftCrown {

    0% {

        transform:
            translate(0px, 0px);

    }

    25% {

        transform:
            translate(30px, -18px);

    }

    50% {

        transform:
            translate(-12px, 24px);

    }

    75% {

        transform:
            translate(20px, 8px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

@keyframes driftThirdEye {

    0% {

        transform:
            translate(0px, 0px);

    }

    30% {

        transform:
            translate(-24px, 16px);

    }

    60% {

        transform:
            translate(20px, -28px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

@keyframes driftThroat {

    0% {

        transform:
            translate(0px, 0px);

    }

    40% {

        transform:
            translate(-34px, -14px);

    }

    70% {

        transform:
            translate(14px, 24px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

@keyframes driftHeart {

    0% {

        transform:
            translate(0px, 0px);

    }

    20% {

        transform:
            translate(18px, -10px);

    }

    50% {

        transform:
            translate(-30px, 22px);

    }

    80% {

        transform:
            translate(14px, -18px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

@keyframes driftSolar {

    0% {

        transform:
            translate(0px, 0px);

    }

    30% {

        transform:
            translate(24px, 20px);

    }

    60% {

        transform:
            translate(-16px, -22px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

@keyframes driftSacral {

    0% {

        transform:
            translate(0px, 0px);

    }

    35% {

        transform:
            translate(-28px, 18px);

    }

    70% {

        transform:
            translate(18px, -26px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}

@keyframes driftRoot {

    0% {

        transform:
            translate(0px, 0px);

    }

    25% {

        transform:
            translate(20px, 28px);

    }

    50% {

        transform:
            translate(-22px, -12px);

    }

    75% {

        transform:
            translate(12px, 14px);

    }

    100% {

        transform:
            translate(0px, 0px);

    }

}
/* STARFIELD */

.stars {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}

.stars::before,
.stars::after {

    content: "";

    position: absolute;

    inset: -50%;

    background-repeat: repeat;

}

/* SMALL STARS */

.stars::before {

    background-image:

        radial-gradient(
            white 1px,
            transparent 1.5px
        ),

        radial-gradient(
            rgba(180,220,255,0.8) 1px,
            transparent 1.5px
        ),

        radial-gradient(
            rgba(255,255,255,0.4) 2px,
            transparent 2.5px
        );

    background-size:

        240px 240px,
        340px 340px,
        520px 520px;

    opacity: 0.45;

    animation:
        starDriftSlow 180s linear infinite;

}

/* LARGE GLOW STARS */

.stars::after {

    background-image:

        radial-gradient(
            rgba(255,255,255,0.9) 3px,
            transparent 6px
        ),

        radial-gradient(
            rgba(120,180,255,0.8) 2px,
            transparent 5px
        );

    background-size:

        700px 700px,
        900px 900px;

    opacity: 0.22;

    filter: blur(1px);

    animation:
        starDriftFast 120s linear infinite,
        starPulse 8s ease-in-out infinite;

}

@keyframes starDriftSlow {

    from {

        transform:
            translateY(0px)
            translateX(0px);

    }

    to {

        transform:
            translateY(-120px)
            translateX(-40px);

    }

}

@keyframes starDriftFast {

    from {

        transform:
            translateY(0px)
            translateX(0px);

    }

    to {

        transform:
            translateY(-220px)
            translateX(-80px);

    }

}

@keyframes starPulse {

    0% {

        opacity: 0.14;

    }

    50% {

        opacity: 0.3;

    }

    100% {

        opacity: 0.14;

    }

}

/* EXPERIENCE SHAPE */

#experience-shape {

    position: absolute;

    width: 40vw;
    height: 40vw;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    opacity: 0.18;

    filter: blur(20px);

    mix-blend-mode: screen;

    animation:
        shapePulse 16s ease-in-out infinite;

}

@keyframes shapePulse {

    0% {

        transform:
            translate(-50%, -50%)
            scale(0.9)
            rotate(0deg);

        border-radius: 42%;

    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.12)
            rotate(180deg);

        border-radius: 55%;

    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(0.9)
            rotate(360deg);

        border-radius: 42%;

    }

}

#experience::before {

    content: "";

    position: absolute;

    inset: -20%;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.08),
            transparent 60%
        );

    filter: blur(120px);

    animation:
        breatheField 12s ease-in-out infinite;

}

@keyframes breatheField {

    0% {

        transform: scale(1);

        opacity: 0.08;

    }

    50% {

        transform: scale(1.08);

        opacity: 0.18;

    }

    100% {

        transform: scale(1);

        opacity: 0.08;

    }

}