/*==========================================================
    I.N.K. ENGINEERING (PRIVATE) LIMITED
    animations.css
==========================================================*/

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

*{
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .45s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;
}

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

#preloader{

    animation:
    fadeOut .8s ease forwards;

    animation-delay:1.2s;

}

.loader-logo img{

    animation:
    logoPulse 2s infinite ease-in-out;

}

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

.hero-tag{

    animation:
    fadeDown 1s ease forwards;

}

.hero h1{

    opacity:0;

    animation:
    fadeUp 1.2s ease forwards;

    animation-delay:.3s;

}

.hero p{

    opacity:0;

    animation:
    fadeUp 1.2s ease forwards;

    animation-delay:.6s;

}

.hero-buttons{

    opacity:0;

    animation:
    fadeUp 1.2s ease forwards;

    animation-delay:.9s;

}

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

.scroll-indicator span{

    animation:
    scrollLine 2s infinite;

}

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

.glass{

    transition:.45s ease;

}

.glass:hover{

    backdrop-filter:blur(30px);

    transform:translateY(-8px);

}

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

.service-card{

    overflow:hidden;

    position:relative;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(200,161,74,.08),
        transparent
    );

    opacity:0;

    transition:.45s;

}

.service-card:hover::before{

    opacity:1;

}

.service-icon{

    transition:.45s;

}

.service-card:hover .service-icon{

    transform:rotate(8deg) scale(1.1);

}

/*=========================
PROJECT IMAGE
=========================*/

.project-image{

    overflow:hidden;

}

.project-image img{

    transition:1.1s;

}

.project-card:hover img{

    transform:scale(1.08);

}

/*=========================
BUTTONS
=========================*/

.btn-gold{

    position:relative;

    overflow:hidden;

}

.btn-gold::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

}

.btn-gold:hover::before{

    animation:
    shine 1.2s;

}

.btn-glass:hover{

    transform:translateY(-4px);

}

/*=========================
NAVIGATION
=========================*/

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-6px;

    left:0;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

/*=========================
IMAGE HOVER
=========================*/

img{

    transition:1s ease;

}

.image-column:hover img{

    transform:scale(1.04);

}

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

.floating{

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

}

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

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

.fade-left{

    opacity:0;

    transform:translateX(-70px);

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

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

.fade-right{

    opacity:0;

    transform:translateX(70px);

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}

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

.zoom{

    opacity:0;

    transform:scale(.9);

}

.zoom.active{

    opacity:1;

    transform:scale(1);

}

/*=========================
COUNTER
=========================*/

.counter{

    transition:1s;

}

/*=========================
KEYFRAMES
=========================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(70px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

@keyframes logoPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes scrollLine{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(35px);

opacity:0;

}

}

@keyframes shine{

100%{

left:150%;

}

}

@keyframes fadeOut{

to{

visibility:hidden;

opacity:0;

}

}

@keyframes rotateSlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@keyframes pulseGold{

0%{

box-shadow:0 0 0 rgba(200,161,74,.2);

}

50%{

box-shadow:0 0 35px rgba(200,161,74,.4);

}

100%{

box-shadow:0 0 0 rgba(200,161,74,.2);

}

}

@keyframes fadeScale{

0%{

opacity:0;

transform:scale(.92);

}

100%{

opacity:1;

transform:scale(1);

}

}

/*=========================
ANIMATION DELAYS
=========================*/

.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;}
.delay-6{animation-delay:1.2s;}
.delay-7{animation-delay:1.4s;}
.delay-8{animation-delay:1.6s;}
.delay-9{animation-delay:1.8s;}

/*=========================
END OF animations.css
=========================*/