/* ==========================================================
   ZYTRIX MOTION ENGINE
   File: animations.css
   Version: 0.1
   Philosophy:
   Quiet.
   Intentional.
   Institutional.
   Never distracting.
==========================================================*/


/* ==========================================================
   GLOBAL
==========================================================*/

:root{

    --speed-fast:.18s;
    --speed-normal:.28s;
    --speed-slow:.45s;
    --speed-luxury:.8s;

    --ease:cubic-bezier(.2,.8,.2,1);

}


/* ==========================================================
   DEFAULT TRANSITIONS
==========================================================*/

a,
button,
.btn,
.card,
.info-card,
.metric,
.badge,
.status,
.nav-links a{

    transition:

        background var(--speed-normal) var(--ease),

        color var(--speed-normal) var(--ease),

        border-color var(--speed-normal) var(--ease),

        transform var(--speed-normal) var(--ease),

        opacity var(--speed-normal) var(--ease),

        box-shadow var(--speed-normal) var(--ease);

}



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

.fade-in{

    animation:fadeIn .9s var(--ease);

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



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

.fade-up{

    animation:fadeUp 1s var(--ease);

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.fade-down{

    animation:fadeDown .9s var(--ease);

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.scale-in{

    animation:scaleIn .65s var(--ease);

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



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

.hero-title{

    animation:heroReveal 1.2s var(--ease);

}

@keyframes heroReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/* ==========================================================
   HERO SUBTITLE
==========================================================*/

.hero-subtitle{

    animation:heroSubtitle 1.4s var(--ease);

}

@keyframes heroSubtitle{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



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

.btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 48px rgba(0,0,0,.25);

}

.btn:active{

    transform:translateY(-1px);

}



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

.card:hover,
.info-card:hover{

    transform:

        translateY(-8px);

}



/* ==========================================================
   METRIC
==========================================================*/

.metric:hover{

    transform:translateY(-6px);

}



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

.badge:hover{

    border-color:rgba(255,255,255,.18);

}



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

.navbar{

    transition:

        background .35s,

        backdrop-filter .35s,

        border-color .35s;

}

.navbar.scrolled{

    background:rgba(5,7,11,.92);

    backdrop-filter:blur(24px);

}



/* ==========================================================
   LINK
==========================================================*/

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--green);

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}



/* ==========================================================
   IMAGE
==========================================================*/

img{

    transition:

        transform .45s var(--ease),

        opacity .35s;

}

img:hover{

    transform:scale(1.02);

}



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

.glow{

    animation:softGlow 5s ease infinite;

}

@keyframes softGlow{

    0%{

        box-shadow:

        0 0 0 rgba(0,208,132,0);

    }

    50%{

        box-shadow:

        0 0 35px rgba(0,208,132,.12);

    }

    100%{

        box-shadow:

        0 0 0 rgba(0,208,132,0);

    }

}



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

.float{

    animation:float 7s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



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

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.04),

        transparent

    );

    animation:shimmer 4.5s infinite;

}

@keyframes shimmer{

    to{

        transform:translateX(100%);

    }

}



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

.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.2s;}
.delay-3{animation-delay:.3s;}
.delay-4{animation-delay:.4s;}
.delay-5{animation-delay:.5s;}
.delay-6{animation-delay:.6s;}



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

.reveal{

    opacity:0;

    transform:translateY(40px);

}

.reveal.active{

    opacity:1;

    transform:none;

    transition:

        opacity .9s,

        transform .9s;

}



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

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}