/*=========================================================
  GPTTips Enterprise Website
  Animation Library
=========================================================*/

/* ===========================
   GLOBAL TRANSITION
=========================== */

*{
    transition:
    background-color .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .9s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.fade-left{

    opacity:0;

    transform:translateX(-50px);

    animation:fadeLeft .9s 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 .9s forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(50px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

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

.robot{

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

}

@keyframes robotFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(0,200,83,.25),
    transparent 70%);

    top:-180px;

    right:-180px;

    border-radius:50%;

    filter:blur(60px);

    z-index:0;

}

/* ===========================
   CARD HOVER
=========================== */

.card{

    overflow:hidden;

    position:relative;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}

/* ===========================
   GREEN TOP LINE
=========================== */

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#00C853;

    transition:.35s;

}

.card:hover::before{

    width:100%;

}

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

.btn-start{

    position:relative;

    overflow:hidden;

}

.btn-start:hover{

    box-shadow:

    0 0 25px rgba(0,200,83,.45);

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

/* ===========================
   FLOATING ICONS
=========================== */

.ai-icon{

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

}

@keyframes floatIcon{

    0%{

        transform:translateY(0);

    }

    25%{

        transform:translateY(-10px);

    }

    50%{

        transform:translateY(6px);

    }

    75%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:transform .6s;

}

.zoom:hover img{

    transform:scale(1.06);

}

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

.header{

    animation:headerFade .8s;

}

@keyframes headerFade{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.delay1{

    animation-delay:.2s;

}

.delay2{

    animation-delay:.4s;

}

.delay3{

    animation-delay:.6s;

}

.delay4{

    animation-delay:.8s;

}