/* =========================================================
   BIRTHDAY ADVENTURE
   ANIMATION SYSTEM v1.0
   ========================================================= */


/* ------------------------------
   Fade In
------------------------------ */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn .8s ease forwards;

}


/* ------------------------------
   Fade Out
------------------------------ */

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

.fade-out{

    animation:fadeOut .8s ease forwards;

}


/* ------------------------------
   Floating
------------------------------ */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

    animation:floating 3s ease-in-out infinite;

}


/* ------------------------------
   Bounce
------------------------------ */

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.bounce{

    animation:bounce 1.2s infinite;

}


/* ------------------------------
   Pop In
------------------------------ */

@keyframes popIn{

    0%{

        opacity:0;

        transform:scale(.5);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

.pop-in{

    animation:popIn .5s ease forwards;

}


/* ------------------------------
   Shake
------------------------------ */

@keyframes shake{

    0%,100%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-5px);

    }

    40%{

        transform:translateX(5px);

    }

    60%{

        transform:translateX(-5px);

    }

    80%{

        transform:translateX(5px);

    }

}

.shake{

    animation:shake .5s;

}


/* ------------------------------
   Heart Beat
------------------------------ */

@keyframes heartbeat{

    0%,100%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.1);

    }

    50%{

        transform:scale(.95);

    }

    75%{

        transform:scale(1.08);

    }

}

.heartbeat{

    animation:heartbeat 1.3s infinite;

}


/* ------------------------------
   Rotate
------------------------------ */

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate360 4s linear infinite;

}

/* =====================================
   MODULE 4
   CAKE POP
===================================== */

.cake{

    cursor:pointer;

    transition:
        transform .25s,
        opacity .25s;

}

.cake:hover{

    transform:scale(1.08);

}

.cake-pop{

    transform:scale(1.45);

    opacity:0;

}

/* ==========================================
   TIMER WARNING
========================================== */

.danger{

    color:#ff3b30;

    animation:pulseTimer .6s infinite;

}

@keyframes pulseTimer{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/* =====================================
   VICTORY MODE
===================================== */

.victory{

    animation: victoryGlow 2s infinite;

}

@keyframes victoryGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.08);

    }

    100%{

        filter:brightness(1);

    }

}

/* ==========================================
RESULT OVERLAY
========================================== */

#result-overlay{

    animation:fadeOverlay .45s;

}

@keyframes fadeOverlay{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================================
SCORE POP
========================================== */

.score-pop{

    animation:scorePop .25s ease;

}

@keyframes scorePop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.3);

    }

    100%{

        transform:scale(1);

    }

}

.result-card{

    animation:bounceResult .45s;

}

@keyframes bounceResult{

    0%{

        transform:scale(.8);

        opacity:0;

    }

    70%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================
   SCENE 0 : ENVELOPE OPENING
   STEP 1D
========================================== */


/* ==========================================
   SEAL POP
========================================== */

#opening-screen.opening-active .letter-seal{

    animation:
        sealOpen .45s ease forwards;

}


@keyframes sealOpen{

    0%{

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

    }

    45%{

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

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(.75);

        opacity:0;

    }

}


/* ==========================================
   ENVELOPE FLAP OPEN
========================================== */

#opening-screen.opening-active .envelope-flap{

    animation:
        flapOpen .9s ease forwards;

    transform-origin:
        50% 48%;

}


@keyframes flapOpen{

    0%{

        transform:
            translateX(-50%)
            rotateX(0deg);

    }

    100%{

        transform:
            translateX(-50%)
            rotateX(180deg);

    }

}


/* ==========================================
   LETTER COMES OUT
========================================== */

#opening-screen.opening-active .envelope-letter{

    animation:
        letterRise 1.25s
        cubic-bezier(.22,.61,.36,1)
        .45s
        forwards;

}


@keyframes letterRise{

    0%{

        transform:
            translateX(-50%)
            translateY(18%)
            scale(.96);

        opacity:1;

    }

    60%{

        transform:
            translateX(-50%)
            translateY(-18%)
            scale(1.02);

        opacity:1;

    }

    100%{

        transform:
            translateX(-50%)
            translateY(-30%)
            scale(1.04);

        opacity:1;

    }

}


/* ==========================================
   ENVELOPE BODY SOFT FADE
========================================== */

#opening-screen.opening-active .envelope-body{

    animation:
        envelopeBodyFade 1.25s ease
        1.05s
        forwards;

}


@keyframes envelopeBodyFade{

    0%{

        opacity:1;

    }

    100%{

        opacity:.15;

    }

}


/* ==========================================
   INSTRUCTION FADE
========================================== */

#opening-screen.opening-active .envelope-instruction{

    animation:
        instructionFade .45s ease
        forwards;

}


@keyframes instructionFade{

    0%{

        opacity:1;

    }

    100%{

        opacity:0;

    }

}


/* ==========================================
   WHOLE SCENE FADE
========================================== */

#opening-screen.envelope-finished{

    animation:
        envelopeSceneFade .75s ease
        forwards;

}


@keyframes envelopeSceneFade{

    0%{

        opacity:1;

    }

    100%{

        opacity:0;

    }

}