/* =========================================================
   DARK FUTURISTIC INFO LOGO
   Small • Premium • Orbital • Cyber SaaS
   ========================================================= */

.info-logo {
    --cyan: #00c8d7;
    --cyan-bright: #24f3ff;
    --blue: #0758a8;
    --dark: #020b14;

    position: relative;

    width: 86px;
    height: 86px;

    margin: 18px auto;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
}


/* =========================================================
   DARK CORE
   ========================================================= */

.info-core {
    position: relative;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #173746 0%,
            #0b202c 35%,
            #04111c 70%,
            #01070d 100%
        );

    border: 1px solid rgba(36,243,255,.65);

    box-shadow:
        0 0 7px rgba(0,200,215,.55),
        0 0 18px rgba(0,150,190,.25),
        inset 0 0 12px rgba(0,220,255,.12);

    z-index: 10;

    animation: corePulse 3s ease-in-out infinite;
}


/* inner technical ring */

.info-core::before {
    content: "";

    position: absolute;
    inset: 5px;

    border-radius: 50%;

    border: 1px solid rgba(36,243,255,.22);

    box-shadow:
        inset 0 0 7px rgba(0,220,255,.12);
}


/* subtle crosshair */

.info-core::after {
    content: "";

    position: absolute;

    width: 48px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(36,243,255,.2),
        transparent
    );

    z-index: -1;
}


/* INFO SYMBOL */

.info-core span {
    position: relative;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 25px;
    font-weight: 800;

    line-height: 1;

    color: #d9fbff;

    text-shadow:
        0 0 5px rgba(36,243,255,.9),
        0 0 12px rgba(0,200,215,.5);

    z-index: 3;
}


/* =========================================================
   ORBITAL RINGS
   ========================================================= */

.info-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    border: 1px solid rgba(0,200,215,.35);

    box-shadow:
        0 0 5px rgba(0,200,215,.12);

    pointer-events: none;
}


/* primary orbit */

.orbit-1 {
    width: 67px;
    height: 30px;

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

    animation:
        orbit1 4s linear infinite;
}


/* secondary orbit */

.orbit-2 {
    width: 73px;
    height: 34px;

    border-color: rgba(7,88,168,.55);

    transform:
        translate(-50%, -50%)
        rotate(58deg);

    animation:
        orbit2 5.5s linear infinite reverse;
}


/* third orbit */

.orbit-3 {
    width: 62px;
    height: 26px;

    border-color: rgba(36,243,255,.24);

    transform:
        translate(-50%, -50%)
        rotate(-55deg);

    animation:
        orbit3 3.2s linear infinite;
}


/* =========================================================
   ORBIT NODES
   ========================================================= */

.info-orbit b {
    position: absolute;

    width: 5px;
    height: 5px;

    top: 50%;
    right: -3px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--cyan-bright);

    box-shadow:
        0 0 4px var(--cyan-bright),
        0 0 10px var(--cyan),
        0 0 17px rgba(0,200,215,.6);
}


.orbit-2 b {
    width: 4px;
    height: 4px;

    background: #0874b8;

    box-shadow:
        0 0 5px #0874b8,
        0 0 13px rgba(0,120,200,.7);
}


.orbit-3 b {
    width: 3px;
    height: 3px;

    background: #8cffff;

    box-shadow:
        0 0 5px #8cffff,
        0 0 12px var(--cyan);
}


/* =========================================================
   FLOATING MICRO PARTICLES
   ========================================================= */

.info-particle {
    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #62faff;

    box-shadow:
        0 0 5px #00dce8,
        0 0 10px rgba(0,220,240,.7);

    z-index: 6;
}


/* positions */

.p1 {
    top: 8px;
    left: 29px;

    animation: particle1 3s ease-in-out infinite;
}

.p2 {
    top: 20px;
    right: 5px;

    animation: particle2 2.4s ease-in-out infinite;
}

.p3 {
    right: 9px;
    bottom: 16px;

    animation: particle3 3.5s ease-in-out infinite;
}

.p4 {
    left: 11px;
    bottom: 11px;

    animation: particle4 2.8s ease-in-out infinite;
}

.p5 {
    left: 5px;
    top: 32px;

    width: 1.5px;
    height: 1.5px;

    animation: particle5 3.8s ease-in-out infinite;
}


/* =========================================================
   ORBIT ANIMATION
   ========================================================= */

@keyframes orbit1 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes orbit2 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(58deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(-302deg);
    }
}


@keyframes orbit3 {

    from {
        transform:
            translate(-50%, -50%)
            rotate(-55deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(305deg);
    }
}


/* =========================================================
   CORE ENERGY
   ========================================================= */

@keyframes corePulse {

    0%, 100% {
        box-shadow:
            0 0 6px rgba(0,200,215,.45),
            0 0 16px rgba(0,150,190,.2),
            inset 0 0 10px rgba(0,220,255,.08);
    }

    50% {
        box-shadow:
            0 0 9px rgba(0,230,240,.7),
            0 0 24px rgba(0,170,210,.3),
            inset 0 0 14px rgba(0,220,255,.14);
    }
}


/* =========================================================
   PARTICLE MOTION
   ========================================================= */

@keyframes particle1 {
    0%, 100% {
        transform: translate(0,0);
        opacity: .25;
    }

    50% {
        transform: translate(7px,-5px);
        opacity: 1;
    }
}


@keyframes particle2 {
    0%, 100% {
        transform: translate(0,0);
        opacity: .2;
    }

    50% {
        transform: translate(-6px,8px);
        opacity: 1;
    }
}


@keyframes particle3 {
    0%, 100% {
        transform: translate(0,0);
        opacity: .3;
    }

    50% {
        transform: translate(8px,-7px);
        opacity: 1;
    }
}


@keyframes particle4 {
    0%, 100% {
        transform: translate(0,0);
        opacity: .25;
    }

    50% {
        transform: translate(7px,5px);
        opacity: 1;
    }
}


@keyframes particle5 {
    0%, 100% {
        transform: translate(0,0);
        opacity: .2;
    }

    50% {
        transform: translate(5px,-9px);
        opacity: .9;
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.info-logo:hover .info-core {
    transform: scale(1.06);
}

.info-logo:hover .info-orbit {
    border-color: rgba(36,243,255,.55);
    filter: brightness(1.25);
}