/* ==========================================================
   PORTAL DAS JORNADAS CIENTÍFICAS
   Universidade Jean Piaget de Angola
   Ficheiro: animations.css
   ========================================================== */

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

*{

    transition:var(--transition);

}

/*==========================================================
  FADE IN
==========================================================*/

.fade-in{

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
  FADE DOWN
==========================================================*/

.fade-down{

    opacity:0;

    transform:translateY(-40px);

    animation:fadeDown .8s ease forwards;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.fade-left{

    opacity:0;

    transform:translateX(-50px);

    animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.fade-right{

    opacity:0;

    transform:translateX(50px);

    animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.zoom-in{

    animation:zoomIn .6s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================================
  ROTATE
==========================================================*/

.rotate{

    animation:rotate 8s linear infinite;

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
  BOUNCE
==========================================================*/

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-12px);

    }

    60%{

        transform:translateY(-6px);

    }

}

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

.btn:hover{

    transform:translateY(-3px);

}

.btn:active{

    transform:scale(.97);

}

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

.card:hover,

.dashboard-card:hover,

.section-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

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

.logo img:hover{

    transform:scale(1.08);

}

/*==========================================================
  SOCIAL
==========================================================*/

.social-links a:hover{

    transform:translateY(-5px) rotate(8deg);

}

/*==========================================================
  MENU
==========================================================*/

.nav-menu a{

    position:relative;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:12px;

    width:0;

    height:2px;

    background:var(--gold);

    transform:translateX(-50%);

    transition:.35s;

}

.nav-menu a:hover::after{

    width:60%;

}

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

img{

    transition:.4s;

}

.img-hover:hover{

    transform:scale(1.05);

}

/*==========================================================
  DROPDOWN
==========================================================*/

.dropdown-menu{

    animation:dropdown .35s ease;

}

@keyframes dropdown{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
  LOADING
==========================================================*/

.spinner{

    width:45px;

    height:45px;

    border:4px solid #EEE;

    border-top-color:var(--gold);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
  DELAY
==========================================================*/

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}

.delay-5{

    animation-delay:1s;

}

/*==========================================================
  RESPONSIVO
==========================================================*/

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

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}