/*======================================================================
    VYZARA
    File : animations.css
    Version : 1.0
    Part : 01

    CONTENTS

    01. Fade
    02. Slide
    03. Hero Pulse
    04. Floating
    05. Rotation
    06. Glow
    07. Shine
    08. Scroll Indicator
======================================================================*/



/*======================================================================
    FADE IN
======================================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*======================================================================
    FADE UP
======================================================================*/

@keyframes fadeUp{

    0%{

        opacity:0;

        transform:translateY(50px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}



/*======================================================================
    FADE DOWN
======================================================================*/

@keyframes fadeDown{

    0%{

        opacity:0;

        transform:translateY(-40px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}



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

@keyframes fadeLeft{

    0%{

        opacity:0;

        transform:translateX(60px);

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}



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

@keyframes fadeRight{

    0%{

        opacity:0;

        transform:translateX(-60px);

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}



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

@keyframes heroPulse{

    0%{

        transform:scale(.96);

        opacity:.18;

    }

    50%{

        transform:scale(1);

        opacity:.38;

    }

    100%{

        transform:scale(.96);

        opacity:.18;

    }

}



/*======================================================================
    FLOAT
======================================================================*/

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}



/*======================================================================
    SLOW FLOAT
======================================================================*/

@keyframes floatingSlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}



/*======================================================================
    ROTATE
======================================================================*/

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*======================================================================
    GLOW
======================================================================*/

@keyframes glow{

    0%{

        box-shadow:

            0 0 15px rgba(210,166,121,.12);

    }

    50%{

        box-shadow:

            0 0 45px rgba(210,166,121,.30);

    }

    100%{

        box-shadow:

            0 0 15px rgba(210,166,121,.12);

    }

}



/*======================================================================
    TEXT GLOW
======================================================================*/

@keyframes textGlow{

    0%{

        text-shadow:

            0 0 0 rgba(210,166,121,0);

    }

    50%{

        text-shadow:

            0 0 20px rgba(210,166,121,.35);

    }

    100%{

        text-shadow:

            0 0 0 rgba(210,166,121,0);

    }

}



/*======================================================================
    SHIMMER
======================================================================*/

@keyframes shimmer{

    0%{

        transform:

            translateX(-180%)

            skewX(-25deg);

    }

    100%{

        transform:

            translateX(220%)

            skewX(-25deg);

    }

}



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

@keyframes scrollIndicator{

    0%{

        opacity:0;

        transform:translateY(-12px);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(18px);

    }

}



/*======================================================================
    BLUR REVEAL
======================================================================*/

@keyframes blurReveal{

    from{

        opacity:0;

        filter:blur(18px);

        transform:translateY(40px);

    }

    to{

        opacity:1;

        filter:blur(0);

        transform:translateY(0);

    }

}



/*======================================================================
    SCALE IN
======================================================================*/

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*======================================================================
    BREATHING
======================================================================*/

@keyframes breathing{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}
/*======================================================================
    GLOBAL ANIMATIONS
======================================================================*/

.loader{

    animation:

        fadeIn .6s ease;

}

.loader__logo{

    animation:

        floating 5s ease-in-out infinite,

        glow 3s ease-in-out infinite;

}

.loader__text{

    animation:

        fadeUp 1s ease .35s both;

}



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

.header{

    animation:

        fadeDown .8s ease both;

}



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

.hero__eyebrow{

    animation:

        fadeUp .8s ease .15s both;

}

.hero__title{

    animation:

        blurReveal 1s ease .35s both;

}

.hero__description{

    animation:

        fadeUp .8s ease .55s both;

}

.hero__actions{

    animation:

        fadeUp .8s ease .75s both;

}

.hero__highlights{

    animation:

        fadeUp .8s ease .95s both;

}



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

.hero__visual{

    animation:

        scaleIn 1s ease .45s both;

}

.hero__glass{

    animation:

        floating 7s ease-in-out infinite;

}

.hero__glass::before{

    animation:

        shimmer 6s linear infinite;

}

.hero__logo{

    animation:

        breathing 5s ease-in-out infinite;

}

.hero__circle--one{

    animation:

        heroPulse 8s linear infinite,

        rotate360 45s linear infinite;

}

.hero__circle--two{

    animation:

        heroPulse 10s linear infinite,

        rotate360 55s linear infinite reverse;

}

.hero__circle--three{

    animation:

        heroPulse 12s linear infinite,

        rotate360 65s linear infinite;

}



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

.hero__scroll span{

    animation:

        scrollIndicator 2s ease infinite;

}



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

.btn{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.btn:hover{

    transform:

        translateY(-4px);

}

.btn:active{

    transform:

        translateY(-1px) scale(.98);

}



/*======================================================================
    GLASS COMPONENTS
======================================================================*/

.glass-card,

.hero__glass,

.content-card{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.glass-card:hover,

.hero__glass:hover,

.content-card:hover{

    transform:

        translateY(-10px);

}



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

.philosophy-card,

.ecosystem-card,

.experience-card,

.why-card,

.methodology-step,

.credibility-card{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.philosophy-card:hover,

.ecosystem-card:hover,

.experience-card:hover,

.why-card:hover,

.methodology-step:hover,

.credibility-card:hover{

    transform:

        translateY(-12px);

}



/*======================================================================
    IMAGES
======================================================================*/

.experience-card img,

.founder__image img{

    transition:

        transform .8s ease,

        filter .8s ease;

}

.experience-card:hover img,

.founder__image:hover img{

    transform:

        scale(1.08);

}



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

.navbar__link,

.footer__column a,

.ecosystem-card__link,

.experience-card__link{

    transition:

        color .35s ease,

        transform .35s ease;

}



/*======================================================================
    SECTION TITLES
======================================================================*/

.section-title{

    transition:

        color .4s ease;

}

.section-title:hover{

    animation:

        textGlow 1.5s ease;

}



/*======================================================================
    CHIPS
======================================================================*/

.chip,

.hero__highlight{

    transition:

        transform .35s ease,

        border-color .35s ease,

        background .35s ease;

}

.chip:hover,

.hero__highlight:hover{

    transform:

        translateY(-3px);

}



/*======================================================================
    BADGES
======================================================================*/

.badge,

.section-eyebrow{

    transition:

        letter-spacing .35s ease,

        transform .35s ease;

}

.badge:hover,

.section-eyebrow:hover{

    transform:

        translateY(-2px);

}



/*======================================================================
    FOOTER
======================================================================*/

.footer__logo{

    transition:

        transform .45s ease;

}

.footer__logo:hover{

    transform:

        scale(1.04);

}



/*======================================================================
    CTA
======================================================================*/

.cta__wrapper{

    animation:

        fadeUp .9s ease both;

}



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

.hero__glass,

.hero__logo,

.hero__circle,

.experience-card img,

.founder__image img,

.btn,

.glass-card{

    will-change:

        transform;

}
/*======================================================================
    SCROLL REVEAL
======================================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease,

        filter .8s ease;

    filter:blur(10px);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

    filter:blur(0);

}

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-scale{

    opacity:0;

    transform:scale(.9);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}



/*======================================================================
    STAGGER DELAYS
======================================================================*/

.delay-100{

    transition-delay:.1s;

}

.delay-200{

    transition-delay:.2s;

}

.delay-300{

    transition-delay:.3s;

}

.delay-400{

    transition-delay:.4s;

}

.delay-500{

    transition-delay:.5s;

}

.delay-600{

    transition-delay:.6s;

}



/*======================================================================
    NAVBAR
======================================================================*/

.navbar__link::after{

    transition:

        width .35s ease,

        background .35s ease;

}

.navbar__link:hover{

    transform:translateY(-2px);

}



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

.mobile-menu{

    transition:

        right .45s ease,

        opacity .45s ease;

}

.mobile-menu.active{

    animation:

        fadeLeft .45s ease;

}



/*======================================================================
    ICON ANIMATION
======================================================================*/

.ecosystem-card__number,

.methodology-step__number{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        background .45s ease;

}

.ecosystem-card:hover .ecosystem-card__number,

.methodology-step:hover .methodology-step__number{

    transform:

        rotate(8deg) scale(1.08);

}



/*======================================================================
    CTA BUTTON GROUP
======================================================================*/

.cta__actions .btn:first-child{

    animation:

        glow 4s ease-in-out infinite;

}



/*======================================================================
    SHIMMER EFFECT
======================================================================*/

.btn--primary::before,

.hero__glass::before,

.glass-card::before{

    pointer-events:none;

}



/*======================================================================
    HOVER LIFT
======================================================================*/

.lift{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.lift:hover{

    transform:translateY(-10px);

}



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

.fade-in{

    animation:

        fadeIn .8s ease both;

}

.fade-up{

    animation:

        fadeUp .8s ease both;

}

.fade-down{

    animation:

        fadeDown .8s ease both;

}

.fade-left{

    animation:

        fadeLeft .8s ease both;

}

.fade-right{

    animation:

        fadeRight .8s ease both;

}

.scale-in{

    animation:

        scaleIn .8s ease both;

}



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

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

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



/*======================================================================
    GPU ACCELERATION
======================================================================*/

.hero__glass,

.hero__circle,

.hero__logo,

.btn,

.glass-card,

.content-card,

.experience-card,

.ecosystem-card,

.philosophy-card,

.why-card,

.methodology-step,

.credibility-card,

.founder__image img{

    transform:translateZ(0);

    backface-visibility:hidden;

    perspective:1000px;

}



/*======================================================================
    END OF FILE
======================================================================*/