/* ==========================================================
   Birthday Website
   Animation CSS
   Author : Huy + ChatGPT
   ========================================================== */

/* ==========================================================
   ANIMATION STATE
   ========================================================== */

.animate{


    will-change:transform, opacity;

}

.is-visible{

    opacity:1;

}



/* ==========================================================
   FLOAT
   ========================================================== */

.float{

    animation:float 5s ease-in-out infinite;

}

/* ==========================================================
   PULSE
   ========================================================== */

.pulse{

    animation:pulse 2s infinite;

}

/* ==========================================================
   SPIN
   ========================================================== */

.spin{

    animation:spin 15s linear infinite;

}

/* ==========================================================
   BLINK
   ========================================================== */

.blink{

    animation:blink 1.5s infinite;

}

/* ==========================================================
   GLOW
   ========================================================== */

.glow{

    animation:glow 2.5s ease-in-out infinite;

}

/* ==========================================================
   KEYFRAMES
   ========================================================== */

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes pulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

}

@keyframes glow{

    0%,100%{

        filter:drop-shadow(0 0 8px rgba(255,209,102,.2));

    }

    50%{

        filter:drop-shadow(0 0 28px rgba(255,209,102,.6));

    }

}

/* ==========================================================
   Loading
   ========================================================== */

.fade-out{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

.loading-progress-bar{

    transition:width .2s linear;

}

@keyframes flameFlicker{

    from{

        transform:
            scale(.95,.98)
            rotate(-2deg);

    }

    50%{

        transform:
            scale(1.02,1.08)
            rotate(1deg);

    }

    to{

        transform:
            scale(.98,1.12)
            rotate(2deg);

    }

}