/*==================================================
 ANIMATIONS.CSS
 Parte 1
==================================================*/

/*=========================
  TRANSITIONS
==========================*/

*{

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

}

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade{

    animation:fadeIn .8s ease forwards;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    opacity:0;

    animation:fadeUp .9s ease forwards;

}

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

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-down{

    opacity:0;

    animation:fadeDown .8s ease forwards;

}

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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-left{

    opacity:0;

    animation:fadeLeft .9s ease forwards;

}

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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    opacity:0;

    animation:fadeRight .9s ease forwards;

}

/*=========================
  SCALE
==========================*/

@keyframes scaleUp{

    from{

        opacity:0;

        transform:scale(.88);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.scale{

    animation:scaleUp .7s ease forwards;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}

.code-card{

    animation:floating 6s ease-in-out infinite;

}

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

@keyframes glow{

    0%{

        box-shadow:
        0 0 0 rgba(59,130,246,.2);

    }

    50%{

        box-shadow:
        0 0 40px rgba(59,130,246,.35);

    }

    100%{

        box-shadow:
        0 0 0 rgba(59,130,246,.2);

    }

}

.btn-primary{

    animation:glow 3.5s infinite;

}

/*=========================
  HERO TITLE
==========================*/

.hero h1{

    animation:
    fadeLeft 1s ease forwards;

}

.hero p{

    animation:
    fadeLeft 1.2s ease forwards;

}

.hero-buttons{

    animation:
    fadeLeft 1.4s ease forwards;

}

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

.logo{

    animation:
    fadeDown .8s ease;

}

/*=========================
  NAVBAR
==========================*/

header{

    animation:
    fadeDown .7s ease;

}

/*=========================
  SKILLS
==========================*/

.skill{

    opacity:0;

    animation:
    fadeUp .8s ease forwards;

}

.skill:nth-child(1){

    animation-delay:.05s;

}

.skill:nth-child(2){

    animation-delay:.10s;

}

.skill:nth-child(3){

    animation-delay:.15s;

}

.skill:nth-child(4){

    animation-delay:.20s;

}

.skill:nth-child(5){

    animation-delay:.25s;

}

.skill:nth-child(6){

    animation-delay:.30s;

}

.skill:nth-child(7){

    animation-delay:.35s;

}

.skill:nth-child(8){

    animation-delay:.40s;

}

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

.project-card{

    opacity:0;

    animation:
    fadeUp .9s ease forwards;

}

.project-card:nth-child(1){

    animation-delay:.2s;

}

.project-card:nth-child(2){

    animation-delay:.35s;

}

.project-card:nth-child(3){

    animation-delay:.5s;

}

.project-card:hover{

    transform:
        translateY(-12px)
        scale(1.02);

}

/*=========================
 SERVICES
==========================*/

.services div{

    opacity:0;

    animation:
    fadeUp .8s ease forwards;

}

.services div:nth-child(1){

    animation-delay:.1s;

}

.services div:nth-child(2){

    animation-delay:.2s;

}

.services div:nth-child(3){

    animation-delay:.3s;

}

.services div:nth-child(4){

    animation-delay:.4s;

}

.services div:nth-child(5){

    animation-delay:.5s;

}

.services div:nth-child(6){

    animation-delay:.6s;

}

/*=========================
 SECTION TITLES
==========================*/

section h2{

    animation:
    fadeUp .9s ease;

}

/*=========================
 PARAGRAPHS
==========================*/

section p{

    animation:
    fadeUp 1.1s ease;

}

/*=========================
 SHINE
==========================*/

@keyframes shine{

    from{

        transform:
        translateX(-150%);

    }

    to{

        transform:
        translateX(350%);

    }

}

.project-card::before{

    animation:
    shine 8s linear infinite;

}

/*==================================================
 ANIMATIONS.CSS
 Parte 2
==================================================*/

/*=========================
 PRELOADER
==========================*/

@keyframes loaderFade{

    from{

        opacity:1;
        visibility:visible;

    }

    to{

        opacity:0;
        visibility:hidden;

    }

}

.preloader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.preloader.hide{

    animation:loaderFade .8s ease forwards;

}

.loader{

    width:70px;

    height:70px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.08);

    border-top:4px solid var(--primary);

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*=========================
 TYPING CURSOR
==========================*/

.typing{

    display:inline-block;

    border-right:3px solid var(--primary);

    white-space:nowrap;

    overflow:hidden;

    animation:cursorBlink .8s infinite;

}

@keyframes cursorBlink{

    50%{

        border-color:transparent;

    }

}

/*=========================
 REVEAL
==========================*/

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================
 REVEAL LEFT
==========================*/

.hidden-left{

    opacity:0;

    transform:translateX(-70px);

    transition:1s;

}

.show-left{

    opacity:1;

    transform:translateX(0);

}

/*=========================
 REVEAL RIGHT
==========================*/

.hidden-right{

    opacity:0;

    transform:translateX(70px);

    transition:1s;

}

.show-right{

    opacity:1;

    transform:translateX(0);

}

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

.glass{

    position:relative;

}

.glass::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(
    120deg,

    transparent,

    rgba(255,255,255,.04),

    transparent

    );

    opacity:0;

    transition:.5s;

}

.glass:hover::after{

    opacity:1;

}

/*=========================
 RIPPLE
==========================*/

@keyframes ripple{

    from{

        transform:scale(.2);

        opacity:.5;

    }

    to{

        transform:scale(2);

        opacity:0;

    }

}

.ripple{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.3);

    animation:ripple .8s linear;

    pointer-events:none;

}

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

.project-card:hover{

    box-shadow:

    0 0 25px rgba(59,130,246,.15),

    0 0 50px rgba(59,130,246,.10),

    0 0 70px rgba(59,130,246,.05);

}

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

.skill:hover{

    box-shadow:

    0 10px 35px rgba(59,130,246,.18);

}

/*=========================
 HERO BACKGROUND
==========================*/

@keyframes heroGlow{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.background-blur{

    animation:heroGlow 12s ease infinite;

}

/*=========================
 SCROLL INDICATOR
==========================*/

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;

    background:linear-gradient(
    to right,
    var(--primary),
    var(--secondary)
    );

    z-index:999999;

}

/*=========================
 BACK TO TOP
==========================*/

.back-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:white;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transform:translateY(30px);

    transition:.4s;

    box-shadow:

    0 20px 40px rgba(37,99,235,.3);

}

.back-top.active{

    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}

.back-top:hover{

    transform:translateY(-8px);

}

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

.float{

    animation:floating 5s ease-in-out infinite;

}

.float-delay{

    animation:floating 7s ease-in-out infinite;

}

/*=========================
 STAGGER
==========================*/

.stagger>*{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.stagger>*:nth-child(1){animation-delay:.05s;}
.stagger>*:nth-child(2){animation-delay:.10s;}
.stagger>*:nth-child(3){animation-delay:.15s;}
.stagger>*:nth-child(4){animation-delay:.20s;}
.stagger>*:nth-child(5){animation-delay:.25s;}
.stagger>*:nth-child(6){animation-delay:.30s;}
.stagger>*:nth-child(7){animation-delay:.35s;}
.stagger>*:nth-child(8){animation-delay:.40s;}

/*=========================
 ACTIVE STATES
==========================*/

.active{

    transition:.4s ease;

}

/*=========================
 HOVER SCALE
==========================*/

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.05);

}

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

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:.5s;

}

.zoom:hover img{

    transform:scale(1.08);

}

/*=========================
 SMOOTH APPEAR
==========================*/

.appear{

    animation:fadeIn .8s ease;

}

/*=========================
 PERFORMANCE
==========================*/

.project-card,
.skill,
.services div,
.btn-primary,
.btn-secondary,
.code-card{

    will-change:transform,opacity;

}

/*=========================
 ACCESSIBILITY
==========================*/

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}