*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    background:transparent;
}

/* =========================
   HERO SECTION
========================= */

.hero-scene{
    position:relative;
    width:100%;
    height:480px;
    overflow:visible;
}

/* =========================
   3D GLOBE
========================= */

#globe3d{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:550px;
}

/* =========================
   DESKTOP ROBOT
========================= */

.robot-image{
    position:absolute;

    /* POSITION */
    right:10px;
    top:-80px;

    /* SIZE */
    width:800px;
    height:auto;
    max-width:none;

    transform:scale(0.6);
    transform-origin:right center;

    -webkit-mask-image:linear-gradient(
        to bottom,
        black 0%,
        black 85%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to bottom,
        black 0%,
        black 75%,
        transparent 100%
    );
}







/* =========================
   FLOAT ANIMATION
========================= */

@keyframes robotFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }
}












/* =====================================
   ROBOT EYE LASER BEAM
===================================== */



.eye-beam{

    position:absolute;

    /* ROBOT EYE POSITION */
    right:80px;
    top:90px;

    /* LONG BEAM */
    width:250px;
    height:28px;

    background:linear-gradient(
        to left,
        rgba(0,217,255,0),
        rgba(0,217,255,.25),
        rgba(0,217,255,.8),
        rgba(255,255,255,1)
    );

    border-radius:70px;

    filter:blur(10px);

    opacity:0.4;

    z-index:90;

    pointer-events:none;

    transform-origin:right center;

    transform:rotate(-13deg);

    animation:beamPulse 2s ease-in-out infinite;
}





@keyframes beamPulse{

    0%{
        opacity:.4;
        transform:
        rotate(-13deg)
        scaleX(.8);
    }

    50%{
        opacity:1;
        transform:
        rotate(-13deg)
        scaleX(1);
    }

    100%{
        opacity:.4;
        transform:
        rotate(-13deg)
        scaleX(.8);
    }

}





.eye-beam::after{

    content:"";

    position:absolute;

    inset:-12px;

    background:inherit;

    filter:blur(25px);

    opacity:.2;

    border-radius:50px;
}







@keyframes beamMove{

    0%{
        transform:rotate(-13deg) translateX(0);
    }

    50%{
        transform:rotate(-13deg) translateX(-20px);
    }

    100%{
        transform:rotate(-13deg) translateX(0);
    }

}