/*==================================================
ANIMATION VARIABLES
====================================================*/

:root{

    --anim-fast:150ms;

    --anim-button:200ms;

    --anim-card:250ms;

    --anim-accordion:300ms;

    --anim-section:500ms;

    --anim-hero:700ms;

    --anim-bg:1000ms;

    --ease-default:cubic-bezier(.4,0,.2,1);

    --ease-out:cubic-bezier(.16,1,.3,1);

}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

.hero-title{

    animation:

    fadeUp

    var(--anim-hero)

    var(--ease-out)

    both;

}

.hero-description{

    animation:

    fadeUp

    calc(var(--anim-hero) + 100ms)

    var(--ease-out)

    both;

}

.hero-buttons{

    animation:

    fadeUp

    calc(var(--anim-hero) + 200ms)

    var(--ease-out)

    both;

}

.hero-image{

    animation:

    fadeRight

    calc(var(--anim-hero) + 100ms)

    var(--ease-out)

    both;

}


/*==================================================
FADE UTILITIES
====================================================*/

.fade-up{

    opacity:0;

    transform:translateY(30px);

}

.fade-left{

    opacity:0;

    transform:translateX(-30px);

}

.fade-right{

    opacity:0;

    transform:translateX(30px);

}

.zoom-in{

    opacity:0;

    transform:scale(.94);

}


/*==================================================
ACTIVE STATE

Applied by GSAP / JavaScript

====================================================*/

.is-visible{

    opacity:1 !important;

    transform:none !important;

}



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

.section-hidden{

    opacity:0;

    transform:translateY(60px);

}

.section-visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity var(--anim-section) var(--ease-out),

        transform var(--anim-section) var(--ease-out);

}


/*==================================================
STAGGER HELPERS

Delay Classes
====================================================*/

.delay-1{

    transition-delay:.08s;

}

.delay-2{

    transition-delay:.16s;

}

.delay-3{

    transition-delay:.24s;

}

.delay-4{

    transition-delay:.32s;

}

.delay-5{

    transition-delay:.40s;

}


/*==================================================
SERVICE CARD
====================================================*/

.service-card{

    transition:

        transform var(--anim-card) var(--ease-default),

        box-shadow var(--anim-card) var(--ease-default),

        border-color var(--anim-card) var(--ease-default);

}


/*==================================================
INDUSTRY CARD
====================================================*/

.industry-card{

    transition:

        transform var(--anim-card) var(--ease-default),

        box-shadow var(--anim-card) var(--ease-default);

}


/*==================================================
PROCESS CARD
====================================================*/

.process-step{

    transition:

        transform var(--anim-card) var(--ease-default),

        box-shadow var(--anim-card) var(--ease-default);

}


/*==================================================
STATISTICS
====================================================*/

.stat-item{

    transition:

        transform var(--anim-card) var(--ease-default),

        opacity var(--anim-card) var(--ease-default);

}

.stat-item:hover{

    transform:translateY(-6px);

}


/*==================================================
CLIENT LOGO
====================================================*/

.client-logo{

    transition:

        filter var(--anim-button),

        transform var(--anim-button);

}

.client-logo:hover{

    transform:scale(1.05);

}



/*==================================================
INITIAL GSAP STATES
====================================================*/

.gsap-fade{

    opacity:0;

}

.gsap-up{

    opacity:0;

    transform:translateY(20px);

}

.gsap-left{

    opacity:0;

    transform:translateX(-20px);

}

.gsap-right{

    opacity:0;

    transform:translateX(20px);

}

.gsap-scale{

    opacity:0;

    transform:scale(.96);

}


/*==================================================
STATISTICS
====================================================*/

.stat-number{

    transition:

    color var(--anim-button);

}

.stat-item:hover .stat-number{

    color:var(--accent);

}


/*==================================================
PROCESS
====================================================*/

.process-step{

    will-change:

    transform,

    opacity;

}


/*==================================================
CLIENT LOGOS
====================================================*/

.client-logo{

    will-change:

    transform,

    filter;

}


/*==================================================
FAQ
====================================================*/

.faq-answer{

    overflow:hidden;

    max-height:0;

    opacity:0;

    transition:

        max-height var(--anim-accordion) var(--ease-default),

        opacity var(--anim-accordion) var(--ease-default);

}

.faq-item.active .faq-answer{

    max-height:500px;

    opacity:1;

}


/*==================================================
BUTTON RIPPLE PREPARATION
====================================================*/

.btn{

    position:relative;

    overflow:hidden;

}



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

.btn{

    transition:

        transform var(--anim-button) var(--ease-default),

        box-shadow var(--anim-button) var(--ease-default),

        background-color var(--anim-button) var(--ease-default);

}

.btn:hover{

    transform:translateY(-2px);

}


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

@keyframes scrollBounce{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

.hero-scroll{

    animation:

    scrollBounce

    2.5s

    ease-in-out

    infinite;

}


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

@keyframes floatSlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating-element{

    animation:

        floatSlow

        8s

        ease-in-out

        infinite;

}


/*==================================================
BACK TO TOP
====================================================*/

.back-to-top{

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        opacity var(--anim-button),

        transform var(--anim-button),

        visibility var(--anim-button);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*==================================================
CLIENT CAROUSEL
====================================================*/

.client-track{

    animation:

        clientScroll

        30s

        linear

        infinite;

}

.client-track:hover{

    animation-play-state:paused;

}


@keyframes clientScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


/*==================================================
PAGE LOADED STATE
====================================================*/

body.page-loaded{

    opacity:1;

}

body{

    opacity:0;

    transition:opacity .35s ease;

}


/*==================================================
ANIMATION UTILITIES
====================================================*/

.animate-none{

    animation:none !important;

}

.transition-none{

    transition:none !important;

}


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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==================================================
PRINT
====================================================*/

@media print{

    *{

        animation:none !important;

        transition:none !important;

    }

}