/* ==========================================
   BADDIE PLACE STUDIO
   ANIMATIONS
========================================== */


/* ===========================
TRANSIÇÕES GLOBAIS
=========================== */

*{

    transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    opacity .3s ease,
    box-shadow .3s ease;

}



/* ===========================
FADE UP
=========================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}



/* ===========================
FADE LEFT
=========================== */

.fade-left{

    opacity:0;

    transform:translateX(-50px);

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}



/* ===========================
FADE RIGHT
=========================== */

.fade-right{

    opacity:0;

    transform:translateX(50px);

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}



/* ===========================
ZOOM
=========================== */

.zoom{

    opacity:0;

    transform:scale(.8);

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}



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

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}



/* ===========================
PULSE
=========================== */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}



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

.glow:hover{

    box-shadow:

    0 0 25px rgba(154,0,255,.5);

}



/* ===========================
BOTÕES
=========================== */

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary:hover{

    transform:translateY(-4px);

}



/* ===========================
GALERIA
=========================== */

/* =======================================
GALERIA
======================================= */

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title span{

    color:var(--green);

    letter-spacing:3px;

}

.section-title h2{

    margin:15px 0;

}

.gallery{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:15px;

}



.gallery .item{

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

}



.gallery img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    transition:.4s;

}



.gallery img:hover{

    transform:scale(1.08);

}

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

.services article:hover,
.cards article:hover{

    transform:

    translateY(-10px);

}



/* ===========================
FAQ
=========================== */

details{

    transition:.3s;

}

details[open]{

    transform:scale(1.01);

}



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

.whatsapp-button{

    animation:whats 2s infinite;

}

@keyframes whats{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.1);

    }

    100%{

        transform:scale(1);

    }

}



/* ===========================
MARQUEE
=========================== */

.marquee div{

    animation:

    marquee 20s linear infinite;

}

@keyframes marquee{

    from{

        transform:

        translateX(0);

    }

    to{

        transform:

        translateX(-50%);

    }

}



/* ===========================
IMAGENS
=========================== */

img{

    user-select:none;

}



/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#080808;

}

::-webkit-scrollbar-thumb{

    background:var(--purple);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--pink);

}

@keyframes flow{

    from{

        left:-20px;

    }

    to{

        left:100%;

    }

}