/* ==========================================================
   ANIMATIONS.CSS
   Todas las animaciones del sitio
   TuFuturaWeb - Alexis Silva
========================================================== */


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

.robot{
    animation: robotFloat 4s ease-in-out infinite;
}

@keyframes robotFloat{

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

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

}


/* ==========================================================
   CABEZA
========================================================== */

.head{

    animation: headMove 3s ease-in-out infinite;

}

@keyframes headMove{

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

    25%{
        transform:translateX(-50%) rotate(-2deg);
    }

    75%{
        transform:translateX(-50%) rotate(2deg);
    }

}


/* ==========================================================
   OJOS
========================================================== */

.eyes span{

    animation: blink 5s infinite;

}

@keyframes blink{

    0%,45%,100%{

        transform:scaleY(1);

    }

    47%{

        transform:scaleY(.1);

    }

    50%{

        transform:scaleY(1);

    }

}


/* ==========================================================
   ANTENA
========================================================== */

.light{

    animation: antennaLight 1.5s ease-in-out infinite;

}

@keyframes antennaLight{

    0%{

        box-shadow:
        0 0 5px cyan;

        opacity:.6;

    }

    50%{

        box-shadow:
        0 0 15px cyan,
        0 0 35px cyan,
        0 0 60px cyan;

        opacity:1;

    }

    100%{

        box-shadow:
        0 0 5px cyan;

        opacity:.6;

    }

}


/* ==========================================================
   BRAZO IZQUIERDO
========================================================== */

.arm.left{

    transform-origin:top center;

    animation:leftArm .45s ease-in-out infinite alternate;

}

@keyframes leftArm{

    from{

        transform:rotate(18deg);

    }

    to{

        transform:rotate(36deg);

    }

}


/* ==========================================================
   BRAZO DERECHO
========================================================== */

.arm.right{

    transform-origin:top center;

    animation:rightArm .45s ease-in-out infinite alternate;

}

@keyframes rightArm{

    from{

        transform:rotate(-18deg);

    }

    to{

        transform:rotate(-36deg);

    }

}


/* ==========================================================
   MONITOR
========================================================== */

.monitor{

    animation:monitorGlow 3s ease-in-out infinite;

}

@keyframes monitorGlow{

    0%,100%{

        box-shadow:

        0 0 20px rgba(0,255,255,.18);

    }

    50%{

        box-shadow:

        0 0 40px rgba(0,255,255,.35);

    }

}


/* ==========================================================
   TECLADO
========================================================== */

.keyboard{

    animation:keyboardLight .45s infinite;

}

@keyframes keyboardLight{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.3);

    }

    100%{

        filter:brightness(1);

    }

}


/* ==========================================================
   HUMO CAFÉ
========================================================== */

.steam{

    animation:steam 3s linear infinite;

}

.s2{

    animation-delay:1s;

}

.s3{

    animation-delay:2s;

}

@keyframes steam{

    from{

        transform:
        translateY(0)
        scale(.5);

        opacity:.55;

    }

    to{

        transform:
        translateY(-55px)
        scale(2);

        opacity:0;

    }

}


/* ==========================================================
   BOTÓN WHATSAPP
========================================================== */

.whatsapp-float{

    animation:whatsappPulse 2s infinite;

}

@keyframes whatsappPulse{

    0%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,.65);

    }

    70%{

        box-shadow:

        0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,0);

    }

}


/* ==========================================================
   BOTONES
========================================================== */

.btnWhatsapp{

    transition:.35s;

}

.btnWhatsapp:hover{

    transform:

        translateY(-6px)

        scale(1.03);

}


/* ==========================================================
   TARJETAS
========================================================== */

.card{

    transition:.35s;

}

.card:hover{

    transform:

        translateY(-8px);

}


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

.logo{

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

}

@keyframes logoGlow{

    0%,100%{

        filter:

        drop-shadow(0 0 10px rgba(0,255,255,.3));

    }

    50%{

        filter:

        drop-shadow(0 0 25px rgba(0,255,255,.7));

    }

}

/* ==========================================================
   PARTÍCULAS
========================================================== */

#particles{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.particle{

    position:absolute;

    bottom:-10px;

    width:4px;

    height:4px;

    border-radius:50%;

    background:#47d7ff;

    box-shadow:0 0 8px #47d7ff;

    opacity:.7;

    animation:particle linear infinite;

}

@keyframes particle{

    from{

        transform:translateY(0);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        transform:translateY(-120vh);

        opacity:0;

    }

}



/* ==========================================================
   APARICIÓN SUAVE
========================================================== */

.fadeIn{

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   LOADER
========================================================== */

.loader{

    overflow:hidden;

}

.loader::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

    animation:loaderLight 2s linear infinite;

}

@keyframes loaderLight{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}