/* Animated Electron Logo Styles */
/* COMMENTED OUT - conflicts with styles.css
.logo-container {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: visible;
    transform: scale(0.57) scaleX(-1);
}
*/

.logo-container div {
    width: 100px;
    height: 85px;
    border-radius: 100px 0px 0px 100px;
    background: #fff;
    box-shadow: 0px 0px 14px #fff;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    position: absolute;
}

.logo-container div ul {
    margin: 0;
    padding: 0;
}

.logo-container div ul li {
    list-style: none;
    display: block;
}

/* First orbit - Purple */
.logo-container .first {
    background-color: #5048A0;
    height: 130px;
    width: 145px;
    box-shadow: 2px 0px 10px #5048A0, -5px 0px 10px #5b2096;
}

.logo-container .first li:nth-child(1) {
    width: 140px;
    height: 32.5px;
    background: linear-gradient(to right, #5048A0 60%, transparent);
    margin-left: 70px;
    border-radius: 80px;
    animation: glowbg 2.7s ease-in-out infinite;
    animation-delay: 0.2s;
}

.logo-container .first li:nth-child(2) {
    width: 150px;
    height: 32.5px;
    background: linear-gradient(to right, #5048A0 60%, transparent);
    margin-left: 70px;
    border-radius: 80px;
    animation: glowbg 3.2s ease-in-out infinite;
    animation-delay: 0.4s;
}

.logo-container .first li:nth-child(3) {
    width: 160px;
    height: 32.5px;
    background: linear-gradient(to right, #5048A0 60%, transparent);
    margin-left: 70px;
    border-radius: 80px;
    animation: glowbg 2.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.logo-container .first li:nth-child(4) {
    width: 135px;
    height: 32.5px;
    background: linear-gradient(to right, #5048A0 60%, transparent);
    margin-left: 70px;
    border-radius: 80px;
    animation: glowbg 3.5s ease-in-out infinite;
    animation-delay: 0.8s;
}

/* Second orbit - Cyan */
.logo-container .second {
    background-color: #85EDE8;
    opacity: 0.6;
    height: 115px;
    width: 130px;
    box-shadow: 0px 0px 15px #85EDE8;
}

.logo-container .second li:nth-child(1) {
    width: 170px;
    background: linear-gradient(to right, #85EDE8 50%, transparent);
    height: 30px;
    margin-left: 50px;
    border-radius: 200px;
    animation: glowbg 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.logo-container .second li:nth-child(2) {
    width: 160px;
    background: linear-gradient(to right, #85EDE8 50%, transparent);
    height: 40px;
    margin-left: 50px;
    border-radius: 200px;
    margin-top: 45px;
    animation: glowbg 2.5s ease-in-out infinite;
    animation-delay: 0.8s;
}

/* Third orbit - Cyan with floating particles */
.logo-container .third {
    background-color: #85EDE8;
    height: 100px;
    width: 100px;
    margin-left: -8px;
    box-shadow: 0px 0px 15px #85EDE8;
}

.logo-container .third li:nth-child(1),
.logo-container .third .floating-1:nth-child(3) {
    width: 55px;
    height: 10px;
    background: #85EDE8;
    margin-left: 50px;
    border-radius: 300px;
    position: relative;
    left: 0px;
    transition: all 0.3s ease;
    animation: anim1 1s ease infinite;
}

.logo-container .third li:nth-child(2),
.logo-container .third .floating-2:nth-child(5) {
    width: 90px;
    height: 10px;
    background: #85EDE8;
    margin-left: 50px;
    border-radius: 300px;
    position: relative;
    margin-top: 80px;
    left: 0px;
    transition: all 0.3s ease;
    animation: anim1 1s ease infinite;
    animation-delay: 0.5s;
}

.logo-container .third .floating-1,
.logo-container .third .floating-2 {
    position: absolute;
    top: 0;
    box-shadow: 0px 0px 5px #85EDE8;
}

.logo-container .third li:nth-child(3).floating-1 {
    width: 40px;
    left: 65px;
    animation: f1 2s ease-out infinite;
}

.logo-container .third li:nth-child(4).floating-1 {
    width: 15px;
    left: 115px;
    animation: f11 1.8s ease-out infinite;
    animation-delay: 0s;
}

.logo-container .third .floating-2 {
    bottom: 0;
}

.logo-container .third li:nth-child(5).floating-2 {
    width: 30px;
    left: 0px;
    animation: f11 1s ease-out infinite;
    animation-delay: 0.3s;
}

.logo-container .third li:nth-child(6).floating-2 {
    width: 10px;
    left: 0px;
    animation: f11 1.5s ease-out infinite;
    animation-delay: 0.5s;
}

/* Core - Happy face */
.logo-container .fourth {
    width: 80px;
    margin-left: -10px;
    height: 80px;
}

.logo-container .fourth span {
    display: block;
    position: absolute;
}

.logo-container .fourth .eyes {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #000;
    top: 30px;
    left: 25px;
}

.logo-container .fourth .eyes::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #000;
    position: absolute;
    left: 28px;
}

.logo-container .fourth .smile {
    position: absolute;
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 90px;
    width: 10px;
    height: 6px;
    background: transparent;
    border: 4px solid #000;
    left: 36px;
    top: 38px;
}

.logo-container .fourth .smile::before {
    background: #fff;
    width: 23px;
    height: 5px;
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
}

.logo-container .fourth .cheeks {
    width: 10px;
    height: 10px;
    background: #85EDE8;
    display: block;
    position: absolute;
    border-radius: 200px;
    top: 40px;
    left: 20px;
}

.logo-container .fourth .cheeks::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #85EDE8;
    left: 40px;
    top: 0px;
    border-radius: 200px;
}

.logo-container .fourth li {
    position: relative;
    transition: all 0.2s ease;
}

.logo-container .fourth li:nth-child(1) {
    width: 90px;
    height: 12px;
    background: #fff;
    left: 50px;
    border-radius: 200px;
    box-shadow: 0px 0px 10px #fff;
    animation: anim2 1.5s ease-out infinite;
}

.logo-container .fourth li:nth-child(2) {
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 4px, #fff 5px);
    width: 70px;
    height: 10px;
    margin-left: 50px;
    animation: anim3 1.6s ease-out infinite;
    animation-delay: 0.5s;
}

.logo-container .fourth li:nth-child(3) {
    width: 105px;
    height: 12px;
    background: #fff;
    left: 45px;
    border-radius: 200px;
    box-shadow: 0px 0px 10px #fff;
    animation: anim2 1.2s ease-out infinite;
    animation-delay: 1s;
}

.logo-container .fourth li:nth-child(4) {
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 4px, #fff 5px);
    width: 65px;
    height: 10px;
    margin-left: 70px;
    animation: anim3 2s ease-out infinite;
    animation-delay: 0.5s;
}

.logo-container .fourth li:nth-child(5) {
    width: 85px;
    height: 12px;
    background: #fff;
    left: 60px;
    border-radius: 200px;
    box-shadow: 0px 0px 10px #fff;
    animation: anim4 2s ease-out infinite;
    animation-delay: 0.5s;
}

.logo-container .fourth li:nth-child(6) {
    background: radial-gradient(circle at 100% 50%, rgba(204, 0, 0, 0) 5px, #fff 6px);
    width: 65px;
    height: 12px;
    margin-left: 75px;
    animation: anim3 1s ease-out infinite;
    animation-delay: 0.5s;
}

.logo-container .fourth li:nth-child(7) {
    width: 100px;
    height: 12px;
    background: #fff;
    left: 55px;
    border-radius: 200px;
    box-shadow: 0px 0px 10px #fff;
    animation: anim2 1.3s ease-out infinite;
    animation-delay: 0.5s;
}

.logo-container .fourth .floating {
    position: absolute;
    background: #fff;
    border-radius: 100px;
    transition: all 0.5s ease;
    box-shadow: 0px 0px 10px #85EDE8;
    z-index: -2;
    opacity: 0;
}

.logo-container .fourth li:nth-child(8).floating {
    width: 12px;
    height: 12px;
    top: 0;
    left: 50px;
    animation: float1 3s ease infinite;
    animation-delay: 0.4s;
}

.logo-container .fourth li:nth-child(9).floating {
    width: 12px;
    height: 12px;
    top: 22px;
    animation: float2 3s ease infinite;
    animation-delay: 2.5s;
}

.logo-container .fourth li:nth-child(10).floating {
    width: 12px;
    height: 12px;
    top: 44px;
    left: 50px;
    animation: float3 3s ease infinite;
    animation-delay: 1.5s;
}

.logo-container .fourth li:nth-child(11).floating {
    width: 12px;
    height: 12px;
    top: 67px;
    left: 50px;
    animation: float4 3s ease infinite;
    animation-delay: 1.5s;
}

/* Keyframe Animations */
@keyframes f1 {
    0% {
        left: 15px;
        width: 70px;
    }

    50% {
        left: 150px;
        opacity: 0.5;
        width: 50px;
    }

    60% {
        left: 150px;
        opacity: 0;
        width: 4px;
    }

    100% {
        left: 15px;
        opacity: 0;
        width: 0px;
    }
}

@keyframes f11 {
    0% {
        left: 65px;
    }

    50% {
        left: 185px;
        opacity: 0.5;
    }

    60% {
        opacity: 0;
        left: 185px;
    }

    100% {
        left: 65px;
        opacity: 0;
    }
}

@keyframes anim1 {
    0% {
        left: 0px;
    }

    50% {
        left: 30px;
    }

    100% {
        left: 0px;
    }
}

@keyframes anim2 {
    0% {
        left: 45px;
    }

    50% {
        left: 65px;
    }

    100% {
        left: 45px;
    }
}

@keyframes anim3 {
    0% {
        left: 0px;
    }

    50% {
        left: 5px;
    }

    100% {
        left: 0px;
    }
}

@keyframes anim4 {
    0% {
        left: 60px;
    }

    50% {
        left: 80px;
    }

    100% {
        left: 60px;
    }
}

@keyframes float1 {
    0% {
        left: 50px;
        opacity: 0;
    }

    50% {
        left: 160px;
        opacity: 1;
    }

    70% {
        left: 160px;
        opacity: 0;
    }

    100% {
        left: 50px;
        opacity: 0;
    }
}

@keyframes float2 {
    0% {
        left: 60px;
        opacity: 0;
    }

    50% {
        left: 175px;
        opacity: 1;
    }

    70% {
        left: 175px;
        opacity: 0;
    }

    100% {
        left: 60px;
        opacity: 0;
    }
}

@keyframes float3 {
    0% {
        left: 50px;
        opacity: 0;
    }

    50% {
        left: 160px;
        opacity: 1;
    }

    70% {
        left: 160px;
        opacity: 0;
    }

    100% {
        left: 50px;
        opacity: 0;
    }
}

@keyframes float4 {
    0% {
        left: 50px;
        opacity: 0;
    }

    50% {
        left: 180px;
        opacity: 1;
    }

    70% {
        left: 180px;
        opacity: 0;
    }

    100% {
        left: 50px;
        opacity: 0;
    }
}

@keyframes glowbg {
    0% {
        width: 120px;
    }

    25% {
        width: 200px;
    }

    100% {
        width: 120px;
    }
}