:root {
    --planet-size: 600vw;
    --atmosphere-thickness: 12vh;
    --fadeout-width: 35vw;
    --halo-height: 4.5px;
    --delta: calc((1 - cos(asin(50vw / var(--planet-size)))) * var(--planet-size) * 2);
    
    /* Master timing control */
    --base-time: 16s;
    
    /* Additional color variables */
    --base-color: var(--background-color);
    --base-color-rgba-506: rgba(var(--white-rgb), 0.506);
    --base-color-rgba-189: rgba(var(--white-rgb), 0.189);
    --base-color-rgba-0: rgba(var(--white-rgb), 0);
    --green-rgba-25: rgba(0, 128, 0, 0.25);
    --purple-rgba-25: rgba(128, 0, 122, 0.25);
    --transparent: transparent;
}

.hero-logo, .hero-logo-contrast {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20vmax;
    height: 20vmax;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: var(--hero-logo-color);
    display: flex;
    justify-content: center;
    align-items: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-position: center;
    -webkit-mask-position: center;
    mix-blend-mode: overlay;
    animation: floatUpDown 10s ease-in-out infinite alternate;
}

@keyframes floatUpDown {
    0% {
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        transform: translate(-50%, -50%)translateY(-20px);
    }
}

.hero-logo-contrast {
    z-index: 1001;
    /* border-radius: 50%; */
    /* mask: none; */
    background: radial-gradient(circle, var(--hero-logo-color) 20%, transparent);
    /* border: 1px solid red; */
    opacity: .4;
    mix-blend-mode: screen;
}

@media (orientation: portrait) {
    .hero-logo {
        width: 60vw;
        height: 60vw;
        transform: translate(-50%, -200%);
    }

    .hero-logo-contrast {
        width: 60vw;
        height: 60vw;
        transform: translate(-50%, -100%);
    }    
}

/* Container */
.atmosphere-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    /* background-image: url('./bg.jpg'); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

/* Planet Elements */
.planet {
    position: absolute;
    top: calc(100% - var(--delta));
    left: 50%;
    transform: translateX(-50%);
    width: var(--planet-size);
    height: var(--planet-size);
    background-color: var(--planet-color);
    border-radius: 50%;
    z-index: 9;
    box-shadow: inset 0 0 25px var(--planet-halo-color);
}

.planet-halo {
    position: absolute;
    top: calc(100% - var(--delta) - var(--halo-height));
    left: 50%;
    transform: translateX(-50%);
    width: var(--planet-size);
    height: calc(var(--planet-size) * 1.1);
    background-color: var(--planet-halo-color);
    box-shadow: 0 0 25px var(--planet-halo-color);
    border-radius: 50%;
    z-index: 8;
}

.planet-linear-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    height: calc(var(--delta) / 100 * 1.4);
    background: linear-gradient(0deg, var(--base-color-rgba-506) 0%, var(--base-color-rgba-189) 48%, var(--base-color-rgba-0) 100%);
    z-index: 8;
    filter: blur(50px);
}

.planet-radial-glow {
    position: absolute;
    top: calc(100% - var(--delta));
    left: calc(50% - var(--planet-size) * 0.6 / 2);
    width: calc(var(--planet-size) * 0.6);
    height: calc(var(--planet-size) * 0.6);
    background: conic-gradient(from 180deg at 50% 50%, var(--atmosphere-cyan), var(--atmosphere-purple), var(--atmosphere-pink), var(--atmosphere-orange), var(--atmosphere-green), var(--atmosphere-cyan));
    border-radius: 50%;
    z-index: 9;
    filter: blur(100px);
    transform-origin: center center;
    animation: rotate-in-place-cw var(--base-time) linear infinite;
}

/* Atmosphere Effects */
.atmosphere {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 15vw;
    height: 170vh;
    border-radius: 50%;
    background: linear-gradient(to top, var(--planet-glow-blue), transparent);
    filter: blur(100px);
    z-index: 3;
    /* animation: atmosphere-glow 4s ease-in-out infinite alternate; */
}

.atmosphere-left {
    position: absolute;
    bottom: -30%;
    left: 8%;
    width: 50%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to top, var(--green-rgba-25), var(--transparent));
    filter: blur(100px);
    z-index: 4;
    animation: atmosphere-glow 5s ease-in-out infinite alternate;
}

.atmosphere-right {
    position: absolute;
    bottom: -10%;
    right: 8%;
    width: 50%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to top, var(--purple-rgba-25), var(--transparent));
    filter: blur(100px);
    z-index: 4;
    animation: atmosphere-glow 3s ease-in-out infinite alternate;
}

.center-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 35%);
    width: 20vw;
    height: 8vw;
    border-radius: 50%;
    background: var(--base-color);
    filter: blur(70px);
    z-index: 4;
}

.center-glow::before {
    content: "";
    position: absolute;
    bottom: 70%;
    left: 50%;
    width: 10px;
    height: 300px;
    transform: translateX(-50%);
    background: var(--base-color);
    z-index: 5;
}

/* Fadeout Effects */
.fadeout {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: calc(var(--delta) / 25);
    z-index: 10;
}

.fadeout::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--fadeout-width);
    height: 100vh;
    background: linear-gradient(90deg, var(--background-color) 0%, rgba(var(--background-color-rgb), .7) 45%, var(--transparent) 100%);
}

.fadeout::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--fadeout-width);
    height: 100vh;
    background: linear-gradient(-90deg, var(--background-color) 0%, rgba(var(--background-color-rgb), .7) 45%, var(--transparent) 100%);
}

/* Orbital Objects */
.orbit-object {
    position: absolute;
    bottom: calc(-1 * var(--fadeout-width) / 3.5);
    width: calc(var(--fadeout-width) * 1.1);
    height: calc(var(--fadeout-width) * 0.8);
    border-radius: 50%;
    filter: blur(100px);
    margin: auto;
}

.orbit-object-center {
    bottom: 10%;
    left: calc(50% - var(--fadeout-width) * .75 / 2);
    background: conic-gradient(from 0deg, transparent, var(--atmosphere-orange), var(--atmosphere-purple) 50%, transparent 80%);
    animation: rotate-in-place-ccw calc(var(--base-time) * 1.2) linear infinite;
    animation-delay: -0.5s;
    width: calc(var(--fadeout-width) * .6);
    height: calc(var(--fadeout-width) * 0.4);
}

.orbit-object-bottom-center {
    bottom: -15%;
    left: calc(50% - var(--fadeout-width) * 0.9 / 2);
    background: conic-gradient(from 0deg, transparent, var(--atmosphere-purple), var(--atmosphere-green) 50%, transparent 80%);
    animation: rotate-in-place-cw calc(var(--base-time) * 0.85) linear infinite;
    animation-delay: -4.2s;
    width: calc(var(--fadeout-width) * 0.9);
    height: calc(var(--fadeout-width) * 0.7);
}

/* Animations */
@keyframes rotate-in-place-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotate-in-place-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes atmosphere-glow {
    0% {
        opacity: 0.6;
        transform: translate(-50%, 50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 50%) scale(1.1);
    }
}

@keyframes pulse-glow {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

/* Particle System */
.particles-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20vw;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--particles-color-1) 0%, var(--particles-color-2) 50%, transparent 100%);
    animation: float-particle 15s linear infinite;
}

/* Individual particle variations - Evenly distributed across 20vw width */
.particle-1 {
    width: 2px;
    height: 2px;
    top: 10%;
    left: 1vw;
    animation-duration: 20s;
    animation-delay: 0s;
}

.particle-2 {
    width: 1px;
    height: 1px;
    top: 25%;
    left: 3vw;
    animation-duration: 18s;
    animation-delay: -2s;
}

.particle-3 {
    width: 3px;
    height: 3px;
    top: 40%;
    left: 5vw;
    animation-duration: 22s;
    animation-delay: -5s;
}

.particle-4 {
    width: 1.5px;
    height: 1.5px;
    top: 60%;
    left: 7vw;
    animation-duration: 16s;
    animation-delay: -8s;
}

.particle-5 {
    width: 2.5px;
    height: 2.5px;
    top: 15%;
    left: 9vw;
    animation-duration: 25s;
    animation-delay: -3s;
}

.particle-6 {
    width: 1px;
    height: 1px;
    top: 70%;
    left: 11vw;
    animation-duration: 19s;
    animation-delay: -7s;
}

.particle-7 {
    width: 2px;
    height: 2px;
    top: 30%;
    left: 13vw;
    animation-duration: 21s;
    animation-delay: -4s;
}

.particle-8 {
    width: 1.5px;
    height: 1.5px;
    top: 80%;
    left: 15vw;
    animation-duration: 17s;
    animation-delay: -6s;
}

.particle-9 {
    width: 3px;
    height: 3px;
    top: 5%;
    left: 17vw;
    animation-duration: 24s;
    animation-delay: -1s;
}

.particle-10 {
    width: 1px;
    height: 1px;
    top: 50%;
    left: 19vw;
    animation-duration: 18s;
    animation-delay: -9s;
}

.particle-11 {
    width: 2px;
    height: 2px;
    top: 35%;
    left: 2vw;
    animation-duration: 20s;
    animation-delay: -2.5s;
}

.particle-12 {
    width: 1.5px;
    height: 1.5px;
    top: 65%;
    left: 4vw;
    animation-duration: 16s;
    animation-delay: -5.5s;
}

.particle-13 {
    width: 2.5px;
    height: 2.5px;
    top: 20%;
    left: 6vw;
    animation-duration: 23s;
    animation-delay: -3.5s;
}

.particle-14 {
    width: 1px;
    height: 1px;
    top: 75%;
    left: 8vw;
    animation-duration: 17s;
    animation-delay: -7.5s;
}

.particle-15 {
    width: 3px;
    height: 3px;
    top: 45%;
    left: 10vw;
    animation-duration: 26s;
    animation-delay: -1.5s;
}

.particle-16 {
    width: 1.5px;
    height: 1.5px;
    top: 12%;
    left: 12vw;
    animation-duration: 19s;
    animation-delay: -4.5s;
}

.particle-17 {
    width: 2px;
    height: 2px;
    top: 55%;
    left: 14vw;
    animation-duration: 21s;
    animation-delay: -6.5s;
}

.particle-18 {
    width: 1px;
    height: 1px;
    top: 85%;
    left: 16vw;
    animation-duration: 18s;
    animation-delay: -8.5s;
}

.particle-19 {
    width: 2.5px;
    height: 2.5px;
    top: 8%;
    left: 18vw;
    animation-duration: 24s;
    animation-delay: -2s;
}

.particle-20 {
    width: 1.5px;
    height: 1.5px;
    top: 90%;
    left: 0.5vw;
    animation-duration: 17s;
    animation-delay: -5s;
}

.particle-21 {
    width: 1px;
    height: 1px;
    top: 18%;
    left: 1.5vw;
    animation-duration: 19s;
    animation-delay: -1.2s;
}

.particle-22 {
    width: 2.5px;
    height: 2.5px;
    top: 65%;
    left: 3.5vw;
    animation-duration: 23s;
    animation-delay: -3.8s;
}

.particle-23 {
    width: 1.5px;
    height: 1.5px;
    top: 35%;
    left: 5.5vw;
    animation-duration: 16s;
    animation-delay: -6.2s;
}

.particle-24 {
    width: 2px;
    height: 2px;
    top: 75%;
    left: 7.5vw;
    animation-duration: 20s;
    animation-delay: -4.5s;
}

.particle-25 {
    width: 1px;
    height: 1px;
    top: 22%;
    left: 9.5vw;
    animation-duration: 18s;
    animation-delay: -7.8s;
}

.particle-26 {
    width: 3px;
    height: 3px;
    top: 48%;
    left: 11.5vw;
    animation-duration: 25s;
    animation-delay: -2.1s;
}

.particle-27 {
    width: 1.5px;
    height: 1.5px;
    top: 82%;
    left: 13.5vw;
    animation-duration: 17s;
    animation-delay: -5.7s;
}

.particle-28 {
    width: 2px;
    height: 2px;
    top: 28%;
    left: 15.5vw;
    animation-duration: 21s;
    animation-delay: -3.3s;
}

.particle-29 {
    width: 1px;
    height: 1px;
    top: 58%;
    left: 17.5vw;
    animation-duration: 19s;
    animation-delay: -8.9s;
}

.particle-30 {
    width: 2.5px;
    height: 2.5px;
    top: 12%;
    left: 0.2vw;
    animation-duration: 24s;
    animation-delay: -1.8s;
}

.particle-31 {
    width: 1.5px;
    height: 1.5px;
    top: 68%;
    left: 2.2vw;
    animation-duration: 16s;
    animation-delay: -6.8s;
}

.particle-32 {
    width: 2px;
    height: 2px;
    top: 42%;
    left: 4.2vw;
    animation-duration: 22s;
    animation-delay: -4.2s;
}

.particle-33 {
    width: 1px;
    height: 1px;
    top: 88%;
    left: 6.2vw;
    animation-duration: 18s;
    animation-delay: -7.1s;
}

.particle-34 {
    width: 3px;
    height: 3px;
    top: 32%;
    left: 8.2vw;
    animation-duration: 26s;
    animation-delay: -2.7s;
}

.particle-35 {
    width: 1.5px;
    height: 1.5px;
    top: 78%;
    left: 10.2vw;
    animation-duration: 17s;
    animation-delay: -5.4s;
}

.particle-36 {
    width: 2px;
    height: 2px;
    top: 52%;
    left: 12.2vw;
    animation-duration: 20s;
    animation-delay: -3.9s;
}

.particle-37 {
    width: 1px;
    height: 1px;
    top: 15%;
    left: 14.2vw;
    animation-duration: 19s;
    animation-delay: -8.3s;
}

.particle-38 {
    width: 2.5px;
    height: 2.5px;
    top: 62%;
    left: 16.2vw;
    animation-duration: 23s;
    animation-delay: -1.5s;
}

.particle-39 {
    width: 1.5px;
    height: 1.5px;
    top: 38%;
    left: 18.2vw;
    animation-duration: 16s;
    animation-delay: -6.5s;
}

.particle-40 {
    width: 2px;
    height: 2px;
    top: 72%;
    left: 0.8vw;
    animation-duration: 21s;
    animation-delay: -4.8s;
}

.particle-41 {
    width: 1px;
    height: 1px;
    top: 25%;
    left: 2.8vw;
    animation-duration: 18s;
    animation-delay: -7.6s;
}

.particle-42 {
    width: 3px;
    height: 3px;
    top: 55%;
    left: 4.8vw;
    animation-duration: 25s;
    animation-delay: -2.4s;
}

.particle-43 {
    width: 1.5px;
    height: 1.5px;
    top: 85%;
    left: 6.8vw;
    animation-duration: 17s;
    animation-delay: -5.1s;
}

.particle-44 {
    width: 2px;
    height: 2px;
    top: 45%;
    left: 8.8vw;
    animation-duration: 20s;
    animation-delay: -3.6s;
}

.particle-45 {
    width: 1px;
    height: 1px;
    top: 95%;
    left: 10.8vw;
    animation-duration: 19s;
    animation-delay: -8.7s;
}

.particle-46 {
    width: 2.5px;
    height: 2.5px;
    top: 8%;
    left: 12.8vw;
    animation-duration: 24s;
    animation-delay: -1.9s;
}

.particle-47 {
    width: 1.5px;
    height: 1.5px;
    top: 65%;
    left: 14.8vw;
    animation-duration: 16s;
    animation-delay: -6.9s;
}

.particle-48 {
    width: 2px;
    height: 2px;
    top: 35%;
    left: 16.8vw;
    animation-duration: 22s;
    animation-delay: -4.1s;
}

.particle-49 {
    width: 1px;
    height: 1px;
    top: 78%;
    left: 18.8vw;
    animation-duration: 18s;
    animation-delay: -7.3s;
}

.particle-50 {
    width: 3px;
    height: 3px;
    top: 48%;
    left: 0.3vw;
    animation-duration: 26s;
    animation-delay: -2.6s;
}

/* Particle animations */
@keyframes float-particle {
    0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .orbit-object {
        width: 30vw;
        height: 30vw;
        filter: blur(60px);
    }
    
    .orbit-object-left,
    .orbit-object-right {
        width: 45%;
        height: 80%;
    }
    
    .orbit-object-center {
        width: 25%;
        height: 50%;
    }
    
    .orbit-object-top-left,
    .orbit-object-top-right {
        width: 35%;
        height: 40%;
    }
    
    .orbit-object-bottom-center {
        width: 40%;
        height: 60%;
    }
    
    .orbit-object-far-left,
    .orbit-object-far-right {
        width: 25%;
        height: 30%;
    }
    
    .particle {
        animation-duration: 12s;
    }
}