/* ==================================================
   FARMNOVA AI
   HEADER ANIMATIONS
================================================== */


/* ==================================================
   HEADER ENTRY
================================================== */

.fn-header {
    animation: fnHeaderEnter 0.7s ease both;
}


@keyframes fnHeaderEnter {

    from {
        opacity: 0;

        transform: translateY(-15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* ==================================================
   BRAND
================================================== */

.fn-brand {
    animation: fnBrandEnter 0.7s 0.1s ease both;
}


@keyframes fnBrandEnter {

    from {
        opacity: 0;

        transform: translateX(-15px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}


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

.fn-nav-link {
    animation: fnNavEnter 0.5s ease both;
}


.fn-nav-link:nth-child(1) {
    animation-delay: 0.15s;
}

.fn-nav-link:nth-child(2) {
    animation-delay: 0.20s;
}

.fn-nav-link:nth-child(3) {
    animation-delay: 0.25s;
}

.fn-nav-link:nth-child(4) {
    animation-delay: 0.30s;
}

.fn-nav-link:nth-child(5) {
    animation-delay: 0.35s;
}

.fn-nav-link:nth-child(6) {
    animation-delay: 0.40s;
}


@keyframes fnNavEnter {

    from {
        opacity: 0;

        transform: translateY(-8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


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

.fn-analyze-btn {
    animation: fnButtonEnter 0.6s 0.35s ease both;
}


@keyframes fnButtonEnter {

    from {
        opacity: 0;

        transform: translateY(-8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


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

.fn-mobile-link,
.fn-mobile-analyze {
    opacity: 0;

    transform: translateY(-8px);
}


.fn-mobile-menu.open .fn-mobile-link,
.fn-mobile-menu.open .fn-mobile-analyze {

    animation: fnMobileItemEnter 0.35s ease forwards;
}


.fn-mobile-menu.open .fn-mobile-link:nth-child(1) {
    animation-delay: 0.05s;
}

.fn-mobile-menu.open .fn-mobile-link:nth-child(2) {
    animation-delay: 0.10s;
}

.fn-mobile-menu.open .fn-mobile-link:nth-child(3) {
    animation-delay: 0.15s;
}

.fn-mobile-menu.open .fn-mobile-link:nth-child(4) {
    animation-delay: 0.20s;
}

.fn-mobile-menu.open .fn-mobile-link:nth-child(5) {
    animation-delay: 0.25s;
}

.fn-mobile-menu.open .fn-mobile-link:nth-child(6) {
    animation-delay: 0.30s;
}

.fn-mobile-menu.open .fn-mobile-analyze {
    animation-delay: 0.35s;
}


@keyframes fnMobileItemEnter {

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


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

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

    .fn-header,
    .fn-brand,
    .fn-nav-link,
    .fn-analyze-btn,
    .fn-mobile-link,
    .fn-mobile-analyze {

        animation: none !important;

        transition: none !important;
    }

}
/* ==================================================
   AJAX PAGE TRANSITION
================================================== */

#farmNovaApp {
    position: relative;

    min-height: 400px;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


#farmNovaApp.fn-page-loading {

    opacity: 0.35;

    transform: translateY(8px);

    pointer-events: none;
}


#farmNovaApp.fn-page-loading::after {

    content: "";

    position: fixed;

    top: 88px;

    left: 0;

    width: 100%;

    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #2f8f35,
        transparent
    );

    background-size: 200% 100%;

    animation:
        fnLoadingBar 1.2s linear infinite;

    z-index: 2000;
}


@keyframes fnLoadingBar {

    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }

}