/* =========================================
   ITACHI_ARABIC_STREEK
   GLOBAL ANIMATIONS
========================================= */


/* PAGE */

body {
    animation: pageEnter 0.7s ease both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* CONTAINER */

.container {
    animation: containerEnter 0.7s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes containerEnter {

    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
    }

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

}


/* CARD */

.card {
    animation: cardEnter 0.65s cubic-bezier(.2,.8,.2,1) .1s both;
}

@keyframes cardEnter {

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

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

}


/* LOGO */

.logo {
    animation: logoEnter .7s cubic-bezier(.2,.8,.2,1) .1s both;
}

@keyframes logoEnter {

    from {
        opacity: 0;
        transform: translateY(-15px) scale(.95);
    }

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

}


/* LOGO BOX */

.logo-box {
    animation:
        logoBoxEnter .65s ease both,
        logoFloat 3s ease-in-out 1s infinite;
}

@keyframes logoBoxEnter {

    from {
        opacity: 0;
        transform: scale(.7) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


/* GLOW */

.glow {
    animation: glowFloat 7s ease-in-out infinite;
}

@keyframes glowFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -15px) scale(1.08);
    }

}


/* TABS */

.tabs {
    animation: tabsEnter .5s ease .25s both;
}

@keyframes tabsEnter {

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

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

}


/* TAB */

.tab {
    transition:
        transform .2s ease,
        background .25s ease,
        color .25s ease;
}

.tab:hover {
    transform: translateY(-1px);
}

.tab:active {
    transform: scale(.95);
}


/* FIELDS */

.field {
    animation: fieldEnter .5s cubic-bezier(.2,.8,.2,1) both;
}

.field:nth-child(1) {
    animation-delay: .3s;
}

.field:nth-child(2) {
    animation-delay: .38s;
}

.field:nth-child(3) {
    animation-delay: .46s;
}

@keyframes fieldEnter {

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

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

}


/* INPUT */

.input {
    transition:
        transform .2s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.input:hover {
    background: rgba(255,255,255,.035);
}

.input:focus {
    transform: translateY(-1px);
}


/* MAIN BUTTON */

.main-button {
    animation: buttonEnter .5s ease .5s both;

    transition:
        transform .18s ease,
        box-shadow .25s ease,
        opacity .2s ease;
}

@keyframes buttonEnter {

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

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

}

.main-button:hover {
    transform: translateY(-2px);
}

.main-button:active {
    transform: scale(.96);
}


/* SOCIAL BUTTONS */

.social-button {
    transition:
        transform .2s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.social-button:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.08);
}

.social-button:active {
    transform: scale(.94);
}


/* FOOTER */

.footer {
    animation: footerEnter .5s ease .7s both;
}

@keyframes footerEnter {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* SUCCESS MESSAGE */

.message.success {
    animation: messageEnter .35s ease both;
}

@keyframes messageEnter {

    from {
        opacity: 0;
        transform: translateY(-5px) scale(.98);
    }

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

}


/* ERROR MESSAGE */

.message.error {
    animation: errorShake .35s ease both;
}

@keyframes errorShake {

    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }

}


/* REDUCED MOTION */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}