/* =====================================
   UnknownMC.DE Animation System
   Modern Minecraft Network Design
===================================== */


:root{

    --unknown-purple:#B026FF;
    --unknown-dark:#7A2CFF;
    --unknown-glow:rgba(176,38,255,.65);

}



/* =========================
   Seiten Start Animation
========================= */


body{

    animation:pageEnter .7s ease forwards;

}


@keyframes pageEnter{

    from{

        opacity:0;

        transform:translateY(25px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}





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


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

    animation:logoFloat 5s ease-in-out infinite;

    filter:drop-shadow(0 0 15px var(--unknown-purple));

}



@keyframes logoFloat{

    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-10px);

    }

}





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


.btn{

    position:relative;

    overflow:hidden;

    transition:
    transform .25s ease,
    box-shadow .25s ease;

}



.btn:hover{

    transform:
    translateY(-6px)
    scale(1.04);


    box-shadow:

    0 0 25px #B026FF,

    0 0 60px rgba(122,44,255,.5);

}



.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );


    transition:.7s;

}



.btn:hover::before{

    left:120%;

}





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


nav a{

    transition:.3s ease;

}



nav a:hover{

    transform:translateY(-5px);


    background:

    rgba(176,38,255,.25);


    box-shadow:

    0 0 25px rgba(176,38,255,.5);

}





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


.card{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}



.card:hover{

    transform:

    translateY(-12px);


    border-color:#B026FF;


    box-shadow:

    0 20px 60px rgba(176,38,255,.35);

}





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


.member{

    transition:

    transform .35s ease,

    box-shadow .35s ease;

}



.member:hover{

    transform:

    translateY(-12px);


    box-shadow:

    0 0 45px rgba(176,38,255,.45);

}





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


h1,
h2,
h3{

    transition:.3s ease;

}



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

    text-shadow:

    0 0 15px #B026FF,

    0 0 35px #7A2CFF;

}





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


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

    animation:

    revealUp .8s ease both;

}



@keyframes revealUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}





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


.dot{

    animation:statusPulse 2s infinite;

}



@keyframes statusPulse{


    0%{

        box-shadow:

        0 0 0 0

        rgba(176,38,255,.8);

    }



    70%{

        box-shadow:

        0 0 0 18px

        rgba(176,38,255,0);

    }



    100%{

        box-shadow:

        0 0 0 0

        rgba(176,38,255,0);

    }

}





/* =========================
   Wiki Animation
========================= */


.wiki-box a{

    transition:.3s ease;

}



.wiki-box a:hover{

    transform:

    translateY(-8px)

    scale(1.04);


    box-shadow:

    0 0 35px rgba(176,38,255,.55);

}





/* =========================
   Glow Effekt
========================= */


.glow{

    animation:glowPulse 3s infinite;

}



@keyframes glowPulse{


    0%,100%{

        filter:

        drop-shadow(

        0 0 8px #B026FF

        );

    }



    50%{

        filter:

        drop-shadow(

        0 0 28px #7A2CFF

        );

    }

}





/* =========================
   Mobile Optimierung
========================= */


@media(max-width:600px){


    .card:hover,
    .member:hover,
    .btn:hover{

        transform:

        translateY(-5px);

    }

}





/* =========================
   Weniger Animation für Nutzer
========================= */


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


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

        animation-duration:

        .01ms !important;


        animation-iteration-count:

        1 !important;

    }

}