/* ==========================================
   Page Fade
========================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(35px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================
   Floating
========================================== */

@keyframes floating {

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


/* ==========================================
   Glow
========================================== */

@keyframes glow {

    0%{

        box-shadow:0 0 0 rgba(255,255,255,.25);

    }

    50%{

        box-shadow:0 0 35px rgba(255,255,255,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(255,255,255,.25);

    }

}


/* ==========================================
   Gradient Move
========================================== */

@keyframes gradientMove {

    0%{

        background-position:0% 50%;

    }

    100%{

        background-position:100% 50%;

    }

}


/* ==========================================
   Floating Elements
========================================== */

.floating-card{

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

}

.card-bottom{

    animation-delay:2.2s;

}


/* ==========================================
   Fade Sequence
========================================== */

.branding{

    animation:fadeUp .7s ease forwards;

}

.hero-section{

    animation:fadeUp .8s ease forwards;

}

.illustration{

    animation:fadeUp 1s ease forwards;

}

.feature-grid{

    animation:fadeUp 1.2s ease forwards;

}

.trust-section{

    animation:fadeUp 1.4s ease forwards;

}

.login-card{

    animation:fadeUp .8s ease forwards;

}


/* ==========================================
   Hover Cards
========================================== */

.feature-card,
.trust-card,
.security-card{

    transition:.35s ease;

}

.feature-card:hover,
.trust-card:hover,
.security-card:hover{

    transform:translateY(-6px);

}


/* ==========================================
   Login Button
========================================== */

.login-btn{

    background-size:200% 200%;

}

.login-btn:hover{

    animation:gradientMove 2s linear infinite;

}


/* ==========================================
   Input Animation
========================================== */

.form-control{

    transition:.3s ease;

}

.form-control:hover{

    border-color:var(--primary-light);

}


/* ==========================================
   Logo
========================================== */

.brand-logo img{

    animation:glow 4s infinite;

}


/* ==========================================
   Trust Icons
========================================== */

.trust-item i,
.security-item i{

    transition:.3s;

}

.trust-item:hover i,
.security-item:hover i{

    transform:scale(1.2);

}


/* ==========================================
   Arrow Animation
========================================== */

.feature-arrow{

    transition:.3s;

}

.feature-card:hover .feature-arrow{

    transform:translateX(8px);

}


/* ==========================================
   Scroll Smooth
========================================== */

html{

    scroll-behavior:smooth;

}