/* ==========================================================
   LC SUPLEMENTOS
   LANDING VISUAL
========================================================== */

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

.logo{

    display:block;

    transition:
        transform .35s ease,
        filter .35s ease;

    filter:
        drop-shadow(0 0 12px rgba(160,70,255,.80))
        drop-shadow(0 0 30px rgba(160,70,255,.70))
        drop-shadow(0 0 55px rgba(160,70,255,.55));

}

/* ==========================================================
   CARDS
========================================================== */

.card{

    transform-origin:center;

    transition:
        transform .30s ease,
        filter .30s ease;

}

.card:hover{

    transform:translateY(-6px);

}

/* ==========================================================
   CARD ESQUERDO
========================================================== */

.card-left{

    filter:
        drop-shadow(0 0 12px rgba(255,120,0,.85))
        drop-shadow(0 0 28px rgba(255,120,0,.70))
        drop-shadow(0 0 45px rgba(255,120,0,.45));

}

.card-left:hover{

    filter:
        drop-shadow(0 0 18px #ff8a00)
        drop-shadow(0 0 40px #ff7a00)
        drop-shadow(0 0 70px #ff6a00);

}

/* ==========================================================
   CARD CENTRAL
========================================================== */

.card-center{

    filter:
        drop-shadow(0 0 12px rgba(120,255,0,.90))
        drop-shadow(0 0 30px rgba(120,255,0,.75))
        drop-shadow(0 0 50px rgba(120,255,0,.50));

}

.card-center:hover{

    filter:
        drop-shadow(0 0 18px #8cff00)
        drop-shadow(0 0 40px #7dff00)
        drop-shadow(0 0 70px #78ff00);

}

/* ==========================================================
   CARD DIREITO
========================================================== */

.card-right{

    filter:
        drop-shadow(0 0 12px rgba(150,60,255,.85))
        drop-shadow(0 0 28px rgba(150,60,255,.70))
        drop-shadow(0 0 45px rgba(150,60,255,.45));

}

.card-right:hover{

    filter:
        drop-shadow(0 0 18px #b95cff)
        drop-shadow(0 0 40px #9e3cff)
        drop-shadow(0 0 70px #8d2cff);

}

/* ==========================================================
   WHATSAPP
========================================================== */

.whatsapp-area{

    transition:
        transform .30s ease,
        filter .30s ease;

    filter:
        drop-shadow(0 0 14px rgba(90,255,90,.90))
        drop-shadow(0 0 32px rgba(90,255,90,.75))
        drop-shadow(0 0 55px rgba(90,255,90,.45));

}

.whatsapp-area img{

    display:block;
    width:200%;
    max-width:none;

}

/* ==========================================================
   HOVERS
========================================================== */

.logo:hover{

    transform:scale(1.03);

    filter:
        drop-shadow(0 0 16px #b25dff)
        drop-shadow(0 0 36px #a64dff)
        drop-shadow(0 0 65px #8d2cff);

}

.whatsapp-area:hover{

    transform:translateY(-6px);

    filter:
        drop-shadow(0 0 18px #69ff69)
        drop-shadow(0 0 40px #4cff4c)
        drop-shadow(0 0 70px #3dff3d);

}

/* ==========================================================
   OTIMIZAÇÃO DE RENDERIZAÇÃO
========================================================== */

.logo,
.card,
.whatsapp-area{

    display:inline-flex;

    transition:
        transform .30s ease,
        filter .30s ease;
        
    will-change:transform,filter;

    backface-visibility:hidden;

    transform:translateZ(0);

}

/* ==========================================================
   EVITA SELEÇÃO E ARRASTE
========================================================== */

.logo,
.card img,
.whatsapp-area img{

    display:block;
    -webkit-user-drag:none;
    user-select:none;

    width:100%;
    height:auto;
}

/* ==========================================================
   FOOTER
========================================================== */

.footer-img{

    filter:

        drop-shadow(0 8px 20px rgba(0,0,0,.12));

}