/* =====================================
   Nytaria.DE Global Animation System
   Funktioniert auf allen Seiten
===================================== */


/* Grundanimation beim Laden */

body{

    animation: pageFade .8s ease;

}


@keyframes pageFade{

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

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

}



/* =========================
   Logo Animation
========================= */


.logo,
.footer-logo,
.small-logo{


    animation:
    floatingLogo 4s ease-in-out infinite;


}



@keyframes floatingLogo{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-12px);

    }


}







/* =========================
   Buttons
========================= */


.btn{


    position:relative;

    overflow:hidden;


    transition:

    .3s ease;


}



.btn:hover{


    transform:

    translateY(-5px)
    scale(1.05);


    box-shadow:


    0 0 20px
    rgba(122,44,255,.8),


    0 0 50px
    rgba(176,108,255,.4);


}




.btn::before{


    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:100%;

    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.4),

    transparent

    );


    transition:.6s;


}




.btn:hover::before{


    left:120%;


}







/* =========================
   Navigation
========================= */


nav a{


transition:.3s ease;


}



nav a:hover{


transform:

translateY(-4px);


background:

rgba(122,44,255,.3);


box-shadow:

0 0 20px

rgba(122,44,255,.6);


}






/* =========================
   Karten
========================= */


.card{


transition:

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


}




.card:hover{


transform:

translateY(-10px);


border-color:

#7a2cff;


box-shadow:


0 20px 50px

rgba(122,44,255,.25);


}








/* =========================
   Überschriften Glow
========================= */


h1,h2,h3{


transition:.3s ease;


}




h1:hover,
h2:hover,
h3:hover{


text-shadow:


0 0 15px #7a2cff,


0 0 35px #b06cff;


}








/* =========================
   Scroll Reveal
========================= */


.section,
.card,
.hero-content,
.community{


animation:

showUp .8s ease forwards;


}




@keyframes showUp{


from{


opacity:0;


transform:

translateY(40px);


}



to{


opacity:1;


transform:

translateY(0);


}


}








/* =========================
   Server Status Punkt
========================= */


.dot{


animation:

pulse 2s infinite;


}




@keyframes pulse{


0%{


box-shadow:

0 0 0 0

rgba(122,44,255,.8);


}



70%{


box-shadow:

0 0 0 20px

rgba(122,44,255,0);


}



100%{


box-shadow:

0 0 0 0

rgba(122,44,255,0);


}



}