/*Animations*/
*{
  --tail1Start: calc( -32px - env(safe-area-inset-bottom) );
  --tail1End: calc( -26px - env(safe-area-inset-bottom) );
  --tail2Start: calc( -56px - env(safe-area-inset-bottom) );
  --tail2End: calc( -48px - env(safe-area-inset-bottom) );
}

@keyframes fadeIn {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeRight {
    from {
        opacity: 0.0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1.0;
        transform: translateX(0px);
    }
}
@-webkit-keyframes fadeRight {
    from {
        opacity: 0.0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1.0;
        transform: translateX(0px);
    }
}

@keyframes growIn {
    from {
        transform: scale(.7);
    }
    to {
        transform: scale(1);
    }
}
@-webkit-keyframes growIn {
    from {
        -webkit-transform: scale(.7);
    }
    to {
        -webkit-transform: scale(1);
    }
}

@keyframes mascotGrowUp {
    from {
        transform: scale(0) translateY(100%);
    }
    to {
        transform: scale(1) translateY(-100%);
    }
}
@-webkit-keyframes mascotGrowUp {
    from {
        -webkit-transform: scale(0) translateY(100%);
    }
    to {
        -webkit-transform: scale(1) translateY(-100%);
    }
}

@keyframes mascotSpeakBob {
    0% {
        transform: translateY(-95%) scale(1.075);
    }
    50% {
        transform: translateY(-105%) scale(1.075);
    }
    100% {
        transform: translateY(-100%) scale(1.075);
    }
}
@-webkit-keyframes mascotSpeakBob {
    0% {
        -webkit-transform: translateY(-95%) scale(1.075);
    }
    50% {
        -webkit-transform: translateY(-105%) scale(1.075);
    }
    100% {
        -webkit-transform: translateY(-100%) scale(1.075);
    }
}

@keyframes growInTailBottom {
    from {
        transform: translateY(var(--tail1Start)) scaleY(0);
    }
    to {
        transform: translateY(var(--tail1End)) scaleY(1);
    }
}
@-webkit-keyframes growInTailBottom {
    from {
        -webkit-transform: translateY(var(--tail1Start)) scaleY(0);
    }
    to {
        -webkit-transform: translateY(var(--tail1End)) scaleY(1);
    }
}

@keyframes growInTailBottom2 {
    from {
        transform: translateY(var(--tail2Start)) scaleY(0);
    }
    to {
        transform: translateY(var(--tail2End)) scaleY(1);
    }
}
@-webkit-keyframes growInTailBottom2 {
    from {
        -webkit-transform: translateY(var(--tail2Start)) scaleY(0);
    }
    to {
        -webkit-transform: translateY(var(--tail2End)) scaleY(1);
    }
}

@keyframes IMGfadeIn {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}
@-webkit-keyframes IMGfadeIn {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

@keyframes breathingCircleGrow {
    from {
        width: 45%;
		    height: 45%;
    }
    to {
        width: 95%;
		    height: 95%;
    }
}
@-webkit-keyframes breathingCircleGrow {
    from {
        width: 45%;
		    height: 45%;
    }
    to {
        width: 95%;
		    height: 95%;
    }
}

@keyframes breathingCircleShrink {
    from {
        width: 95%;
		    height: 95%;
    }
    to {
        width: 45%;
		    height: 45%;
    }
}
@-webkit-keyframes breathingCircleShrink {
    from {
        width: 95%;
		    height: 95%;
    }
    to {
        width: 45%;
		    height: 45%;
    }
}

@keyframes timerBarFlow {
  from {
    background-position: 200% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}

@-webkit-keyframes timerBarFlow {
  from {
    background-position: 200% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}