.card{

    animation:fadeUp .6s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.clock{

    transition:opacity .2s ease;
    
}

/* ========================================
   GOAL TOGGLE
======================================== */

@keyframes goalComplete{

    0%{

        transform:scale(.85);

    }

    50%{

        transform:scale(1.3);

    }

    100%{

        transform:scale(1.2);

    }

}

/* ========================================
   DELETE TASK
======================================== */

@keyframes deleteTask{

    0%{

        opacity:1;

        transform:translateX(0);

        max-height:60px;

        margin-bottom:12px;

    }

    100%{

        opacity:0;

        transform:translateX(-30px);

        max-height:0;

        margin-bottom:0;

        padding-top:0;

        padding-bottom:0;

    }

}

/* ========================================
   XANDRO LAUNCH ANIMATIONS
======================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translate(-50%,40px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}

@keyframes brandingLift{

    from{

        transform:translate(-50%,-50%);

    }

    to{

        transform:translate(-50%,-62%);

    }

}

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-8px);

    }

    40%{

        transform:translateX(8px);

    }

    60%{

        transform:translateX(-6px);

    }

    80%{

        transform:translateX(6px);

    }

    100%{

        transform:translateX(0);

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ========================================
   UTILITY ANIMATIONS
======================================== */

.fade-in{

    animation:

        fadeIn .6s ease forwards;

}

.fade-out{

    animation:

        fadeOut .4s ease forwards;

}

.slide-up{

    animation:

        slideUp .7s cubic-bezier(.22,.61,.36,1) forwards;

}

.branding-lift{

    animation:

        brandingLift .8s cubic-bezier(.22,.61,.36,1) forwards;

}

.shake{

    animation:

        shake .35s ease;

}

/* ========================================
   BOOT TIMELINE
======================================== */

.logo-show{

    animation:

        fadeIn .8s ease forwards;

}

.tagline-show{

    animation:

        fadeIn .8s ease forwards;

    animation-delay:.5s;

}

.card-show{

    animation:

        slideUp .8s cubic-bezier(.22,.61,.36,1) forwards;

}

.boot-finished{

    animation:

        fadeOut .5s ease forwards;

}

/* ========================================
   FADE OUT
======================================== */

.fade-out{

    opacity:0;

    transition:opacity .45s ease;

}

/* ========================================
   BOOT FADE OUT
======================================== */

#boot-screen.fade-out{

    opacity:0;

    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1);

}