.screen.active {
    animation: fadeIn .35s ease;
}

.modal.active .modal-card,
.modal.active .letter {
    animation: pop .45s ease;
}

.big-icon {
    animation: float 1.3s ease-in-out infinite alternate;
}

.shake {
    animation: shake .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes float {
    from {
        transform: translateY(0) rotate(-4deg);
    }
    to {
        transform: translateY(-8px) rotate(4deg);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-8px);
    }
    75% {
        transform: translateX(8px);
    }
}
@keyframes finalLetterOut {
    to {
        opacity: 0;
        transform: translateY(-30px) scale(.94);
    }
}

@keyframes dateLetterIn {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes puzzleSolved {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.035);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes envelopeFloat{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes pulseHint{

    0%{
        opacity:1;
    }

    50%{
        opacity:.4;
    }

    100%{
        opacity:1;
    }

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

    50% {
        transform: translateY(-7px);
    }
}
@keyframes mysteryPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .55;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes artifactAppear {
    from {
        transform: scale(.4) rotate(-12deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}
/*@keyframes paperDrop {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(70px) scale(.95) rotate(-4deg);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0) scale(1) rotate(-1.5deg);*/
/*    }*/
/*}*/

@keyframes cursorBlink {
    0%, 45% {
        opacity: 1;
    }
    46%, 100% {
        opacity: 0;
    }
}

@keyframes buttonsAppear {
    to {
        opacity: 1;
    }
}
/*@keyframes envelopeOpen {*/
/*    0% {*/
/*        opacity: 1;*/
/*        transform: translateY(0) scale(1) rotate(0);*/
/*    }*/
/*    60% {*/
/*        opacity: 1;*/
/*        transform: translateY(-20px) scale(1.04) rotate(-2deg);*/
/*    }*/
/*    100% {*/
/*        opacity: 0;*/
/*        transform: translateY(-80px) scale(.85) rotate(8deg);*/
/*    }*/
/*}*/

/*@keyframes paperReveal {*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0) scale(1) rotate(-1.5deg);*/
/*    }*/
/*}*/
@keyframes letterOpen {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.92) rotate(-1deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}
@keyframes ticketAppear {
    from {
        opacity: 0;
        transform: translateY(45px) scale(.92) rotate(-2deg);
    }

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

@keyframes ticketRowIn {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

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

@keyframes ticketNotePulse {
    0%, 100% {
        transform: scale(1);
        opacity: .85;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}