/* =====================================================
   KNOW SERVICES - ANIMATIONS
===================================================== */


/* =====================================================
   REVEAL ON SCROLL
===================================================== */

.reveal{
    opacity:0;
    transform:translateY(42px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    transition-delay:var(--reveal-delay,0ms);

    will-change:opacity,transform;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}


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

.hero-content{
    animation:heroContentEntry .9s ease forwards;
}

@keyframes heroContentEntry{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.hero-badge{
    animation:badgeEntry .8s ease .15s both;
}

@keyframes badgeEntry{

    from{
        opacity:0;
        transform:translateY(-14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.hero-title{
    animation:titleEntry .9s ease .25s both;
}

@keyframes titleEntry{

    from{
        opacity:0;
        transform:translateY(28px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.hero-description{
    animation:textEntry .9s ease .38s both;
}

@keyframes textEntry{

    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.hero-buttons{
    animation:buttonsEntry .9s ease .5s both;
}

@keyframes buttonsEntry{

    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.hero-tags{
    animation:tagsEntry .9s ease .62s both;
}

@keyframes tagsEntry{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =====================================================
   NETWORK ENTRY
===================================================== */

.hero-network{
    animation:networkEntry 1.1s ease .3s both;
}

@keyframes networkEntry{

    from{
        opacity:0;
        transform:translateX(35px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateX(0) scale(1);
    }

}

/* =====================================================
   SVG NETWORK
===================================================== */

.network-links path{

    stroke:url(#linkGradient);

    stroke-width:3;

    fill:none;

    stroke-linecap:round;

    stroke-dasharray:14 10;

    animation:flowAnimation 8s linear infinite;

}

@keyframes flowAnimation{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-240;
    }

}


.network-nodes circle{

    fill:var(--primary);

    animation:pulseNode 3s ease-in-out infinite;

    transform-origin:center;

}

.network-nodes circle:nth-child(2){
    animation-delay:.2s;
}

.network-nodes circle:nth-child(3){
    animation-delay:.4s;
}

.network-nodes circle:nth-child(4){
    animation-delay:.6s;
}

.network-nodes circle:nth-child(5){
    animation-delay:.8s;
}

.network-nodes circle:nth-child(6){
    animation-delay:1s;
}

.network-nodes circle:nth-child(7){
    animation-delay:1.2s;
}

.network-nodes circle:nth-child(8){
    animation-delay:1.4s;
}

.network-nodes circle:nth-child(9){
    animation-delay:1.6s;
}


@keyframes pulseNode{

    0%{

        transform:scale(1);

        filter:drop-shadow(0 0 0 rgba(87,196,106,.15));

    }

    50%{

        transform:scale(1.18);

        filter:drop-shadow(0 0 12px rgba(87,196,106,.75));

    }

    100%{

        transform:scale(1);

        filter:drop-shadow(0 0 0 rgba(87,196,106,.15));

    }

}


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

.floating{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.btn{

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        background .30s ease;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-primary:hover{

    box-shadow:
        0 0 18px rgba(87,196,106,.35),
        0 12px 28px rgba(0,0,0,.25);

}

.btn-secondary:hover{

    box-shadow:
        0 0 18px rgba(53,167,255,.30),
        0 12px 28px rgba(0,0,0,.22);

}


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

.solution-card,
.about-card,
.advantage-card,
.flow-item,
.stat-card{

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

}

.solution-card:hover,
.about-card:hover,
.advantage-card:hover,
.flow-item:hover,
.stat-card:hover{

    transform:translateY(-8px);

}

/* =====================================================
   HEADER EFFECT
===================================================== */

.header{
    transition:
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        backdrop-filter .3s ease;
}

.header.scrolled,
.header.header-scrolled{

    background:rgba(9,13,19,.88);
    border-bottom:1px solid rgba(255,255,255,.07);
    box-shadow:0 14px 35px rgba(0,0,0,.20);
	-webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);

}


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

.navigation a{
    position:relative;
    transition:color .25s ease;
}

.navigation a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.navigation a:hover,
.navigation a.active{
    color:var(--primary);
}

.navigation a:hover::after,
.navigation a.active::after{
    transform:scaleX(1);
}


/* =====================================================
   TAGS
===================================================== */

.tag{
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}

.tag:hover{
    transform:translateY(-3px);
    border-color:rgba(87,196,106,.45);
    background:rgba(87,196,106,.10);
    color:var(--primary);
}


/* =====================================================
   ICON EFFECTS
===================================================== */

.solution-icon,
.advantage-icon,
.flow-icon{
    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.solution-card:hover .solution-icon,
.advantage-card:hover .advantage-icon,
.flow-item:hover .flow-icon{
    transform:scale(1.08) rotate(3deg);
    background:rgba(87,196,106,.16);
    box-shadow:0 0 22px rgba(87,196,106,.18);
}


/* =====================================================
   KEYBOARD FOCUS
===================================================== */

.keyboard-navigation a:focus,
.keyboard-navigation button:focus{
    outline:3px solid rgba(87,196,106,.65);
    outline-offset:4px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible){
    outline:none;
}


/* =====================================================
   BACKGROUND MOVEMENT
===================================================== */

.background-glow{
    animation:backgroundGlow 10s ease-in-out infinite alternate;
}

@keyframes backgroundGlow{

    from{
        transform:translate3d(0,0,0) scale(1);
        opacity:.75;
    }

    to{
        transform:translate3d(20px,-14px,0) scale(1.05);
        opacity:1;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
		animation-delay:0s !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .reveal{
        opacity:1;
        transform:none;
    }

    .network-links path{
        stroke-dasharray:none;
    }

}

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

.network-svg.network-paused *,
.network-svg.network-paused *::before,
.network-svg.network-paused *::after{
    animation-play-state:paused !important;
}

.hero-network{
    will-change:transform;
}

.network-svg{
    will-change:transform;
}