/* =========================================================
   LBS SOFTWARE
   HOMEPAGE SLIDER LOGO ANIMATION
   assets/css/home-logo-animation.css

   Lightweight:
   - No external library
   - CSS animation
   - GPU-friendly transforms
   - Responsive
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --lbs-blue: #087cff;
    --lbs-cyan: #18c9e8;
    --lbs-purple: #7657ff;
    --lbs-pink: #ec4899;
    --lbs-green: #20b86b;
    --lbs-orange: #ff9f43;

    --lbs-navy: #061a33;

}


/* =========================================================
   MAIN ANIMATION CONTAINER
   ========================================================= */

.lbs-logo-animation {

    position: relative;

    width: min(500px, 82vw);
    height: min(500px, 82vw);

    margin: 0 auto;

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

    isolation: isolate;

    user-select: none;

}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.lbs-logo-glow {

    position: absolute;

    width: 270px;
    height: 270px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8, 124, 255, .20),
            rgba(118, 87, 255, .12) 40%,
            rgba(236, 72, 153, .05) 58%,
            transparent 74%
        );

    filter: blur(6px);

    pointer-events: none;

    will-change: transform, opacity;

    animation:
        lbsLogoGlow 4s ease-in-out infinite;

}


@keyframes lbsLogoGlow {

    0%,
    100% {

        transform: scale(.90);

        opacity: .60;

    }

    50% {

        transform: scale(1.10);

        opacity: 1;

    }

}


/* =========================================================
   CENTER LOGO
   ========================================================= */

.lbs-logo-center {

    position: relative;

    z-index: 20;

    width: 165px;
    height: 165px;

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

    padding: 23px;

    border:
        1px solid
        rgba(255, 255, 255, .75);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .97);

    box-shadow:

        0 18px 48px
        rgba(6, 26, 51, .14),

        0 0 0 11px
        rgba(8, 124, 255, .035);

    will-change: transform;

    animation:
        lbsLogoFloat 4s ease-in-out infinite;

}


.lbs-logo-center img {

    display: block;

    width: 100%;
    max-width: 118px;

    height: auto;

    object-fit: contain;

}


/* =========================================================
   LOGO CAPTION
   ========================================================= */

.lbs-logo-caption {

    display: block;

    margin-top: 5px;

    color:
        var(--lbs-navy);

    font-family:
        Arial,
        sans-serif;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .14em;

    text-align: center;

    white-space: nowrap;

    opacity: .72;

}


@keyframes lbsLogoFloat {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

    }

    50% {

        transform:
            translate3d(0, -7px, 0);

    }

}


/* =========================================================
   ORBIT BASE
   ========================================================= */

.lbs-logo-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform;

}


/* =========================================================
   ORBIT 1
   ========================================================= */

.orbit-1 {

    width: 320px;
    height: 320px;

    border:
        1px solid
        rgba(8, 124, 255, .18);

    transform:
        translate3d(-50%, -50%, 0);

    animation:
        lbsOrbitOne 18s linear infinite;

}


@keyframes lbsOrbitOne {

    from {

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

    }

    to {

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

    }

}


/* =========================================================
   ORBIT 2
   ========================================================= */

.orbit-2 {

    width: 425px;
    height: 245px;

    border:
        1px dashed
        rgba(118, 87, 255, .17);

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

    animation:
        lbsOrbitTwo 22s linear infinite;

}


@keyframes lbsOrbitTwo {

    from {

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

    }

    to {

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

    }

}


/* =========================================================
   SIX MAIN TECHNOLOGY CIRCLES
   ========================================================= */

.lbs-tech-dot {

    position: absolute;

    z-index: 30;

    width: 68px;
    height: 68px;

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

    padding: 7px;

    border:
        2px solid
        rgba(8, 124, 255, .18);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .97);

    color:
        var(--lbs-navy);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .03em;

    line-height: 1.15;

    text-align: center;

    white-space: normal;

    box-shadow:
        0 10px 28px
        rgba(6, 26, 51, .10);

    cursor: default;

    will-change: transform;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    animation:
        lbsDotFloat 3.5s ease-in-out infinite;

}


@keyframes lbsDotFloat {

    0%,
    100% {

        margin-top: 0;

    }

    50% {

        margin-top: -7px;

    }

}


/* =========================================================
   DOT 1 — AI
   ========================================================= */

.dot-1 {

    left: 50%;
    top: 2px;

    transform:
        translateX(-50%);

    border-color:
        rgba(8, 124, 255, .32);

    color:
        var(--lbs-blue);

    animation-delay: 0s;

}


/* =========================================================
   DOT 2 — SOFTWARE
   ========================================================= */

.dot-2 {

    right: 0;
    top: 88px;

    border-color:
        rgba(118, 87, 255, .32);

    color:
        var(--lbs-purple);

    animation-delay: .5s;

}


/* =========================================================
   DOT 3 — WEB
   ========================================================= */

.dot-3 {

    right: 0;
    bottom: 88px;

    border-color:
        rgba(236, 72, 153, .32);

    color:
        var(--lbs-pink);

    animation-delay: 1s;

}


/* =========================================================
   DOT 4 — MOBILE
   ========================================================= */

.dot-4 {

    left: 50%;
    bottom: 2px;

    transform:
        translateX(-50%);

    border-color:
        rgba(24, 201, 232, .32);

    color:
        #159bb6;

    animation-delay: 1.5s;

}


/* =========================================================
   DOT 5 — CLOUD
   ========================================================= */

.dot-5 {

    left: 0;
    bottom: 88px;

    border-color:
        rgba(32, 184, 107, .32);

    color:
        #15915a;

    animation-delay: 2s;

}


/* =========================================================
   DOT 6 — AUTOMATION
   ========================================================= */

.dot-6 {

    left: 0;
    top: 88px;

    border-color:
        rgba(255, 159, 67, .32);

    color:
        #dc7d1e;

    animation-delay: 2.5s;

}


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

.lbs-logo-animation:hover
.lbs-logo-center {

    box-shadow:

        0 22px 58px
        rgba(8, 124, 255, .19),

        0 0 0 13px
        rgba(8, 124, 255, .05);

}


.lbs-logo-animation:hover
.lbs-tech-dot {

    box-shadow:

        0 14px 34px
        rgba(8, 124, 255, .15);

}


/* =========================================================
   SECONDARY MINI TECHNOLOGY NODES
   ========================================================= */

.lbs-tech-mini {

    position: absolute;

    z-index: 25;

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

    min-width: 55px;
    min-height: 25px;

    padding: 5px 8px;

    border:
        1px solid
        rgba(8, 124, 255, .12);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .88);

    color:
        #62758a;

    font-family:
        Arial,
        sans-serif;

    font-size: 5px;

    font-weight: 900;

    letter-spacing: .06em;

    box-shadow:
        0 6px 16px
        rgba(6, 26, 51, .06);

    opacity: .85;

}


/* =========================================================
   MINI NODE POSITIONS
   ========================================================= */

.mini-1 {

    left: 16%;
    top: 23%;

}


.mini-2 {

    right: 16%;
    top: 23%;

}


.mini-3 {

    right: 14%;
    bottom: 23%;

}


.mini-4 {

    left: 14%;
    bottom: 23%;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .lbs-logo-animation {

        width: 430px;
        height: 430px;

    }


    .lbs-logo-center {

        width: 150px;
        height: 150px;

    }


    .orbit-1 {

        width: 290px;
        height: 290px;

    }


    .orbit-2 {

        width: 385px;
        height: 220px;

    }


    .lbs-tech-dot {

        width: 62px;
        height: 62px;

        font-size: 7px;

    }


    .dot-2,
    .dot-6 {

        top: 75px;

    }


    .dot-3,
    .dot-5 {

        bottom: 75px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .lbs-logo-animation {

        width: 350px;
        height: 350px;

    }


    .lbs-logo-glow {

        width: 185px;
        height: 185px;

    }


    .lbs-logo-center {

        width: 112px;
        height: 112px;

        padding: 16px;

    }


    .lbs-logo-center img {

        max-width: 82px;

    }


    .lbs-logo-caption {

        font-size: 4px;

        margin-top: 3px;

    }


    .orbit-1 {

        width: 225px;
        height: 225px;

    }


    .orbit-2 {

        width: 300px;
        height: 170px;

    }


    /* -----------------------------------------------
       MOBILE SIX CIRCLES
       ----------------------------------------------- */

    .lbs-tech-dot {

        width: 50px;
        height: 50px;

        padding: 5px;

        border-width: 1px;

        font-size: 6px;

        box-shadow:
            0 7px 20px
            rgba(6, 26, 51, .08);

    }


    .dot-1 {

        top: 0;

    }


    .dot-2 {

        right: 1px;
        top: 68px;

    }


    .dot-3 {

        right: 1px;
        bottom: 68px;

    }


    .dot-4 {

        bottom: 0;

    }


    .dot-5 {

        left: 1px;
        bottom: 68px;

    }


    .dot-6 {

        left: 1px;
        top: 68px;

    }


    /* -----------------------------------------------
       MOBILE MINI NODES
       ----------------------------------------------- */

    .lbs-tech-mini {

        min-width: 46px;
        min-height: 21px;

        padding: 4px 6px;

        font-size: 4px;

    }


    .mini-1 {

        left: 11%;
        top: 24%;

    }


    .mini-2 {

        right: 11%;
        top: 24%;

    }


    .mini-3 {

        right: 9%;
        bottom: 24%;

    }


    .mini-4 {

        left: 9%;
        bottom: 24%;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .lbs-logo-animation {

        width: 300px;
        height: 300px;

    }


    .lbs-logo-center {

        width: 94px;
        height: 94px;

        padding: 13px;

    }


    .lbs-logo-center img {

        max-width: 70px;

    }


    .lbs-logo-caption {

        display: none;

    }


    .orbit-1 {

        width: 190px;
        height: 190px;

    }


    .orbit-2 {

        width: 255px;
        height: 145px;

    }


    .lbs-tech-dot {

        width: 43px;
        height: 43px;

        font-size: 5px;

    }


    .dot-2,
    .dot-6 {

        top: 58px;

    }


    .dot-3,
    .dot-5 {

        bottom: 58px;

    }


    .lbs-tech-mini {

        display: none;

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lbs-logo-animation *,
    .lbs-logo-animation {

        animation: none !important;

    }

}