/* =====================================================
   JJAPTOON Notice UI v3
   animation.css
===================================================== */

/* ===========================
   Keyframes
=========================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===========================
   Logo Glow
=========================== */

@keyframes logoGlow {

    0% {
        text-shadow:
            0 0 10px rgba(250,204,21,.45),
            0 0 20px rgba(250,204,21,.25);
    }

    50% {
        text-shadow:
            0 0 18px rgba(250,204,21,.9),
            0 0 45px rgba(250,204,21,.55),
            0 0 70px rgba(250,204,21,.45);
    }

    100% {
        text-shadow:
            0 0 10px rgba(250,204,21,.45),
            0 0 20px rgba(250,204,21,.25);
    }

}

.logo {

    animation:

        logoGlow 3s ease-in-out infinite;

}

/* ===========================
   Glass Float
=========================== */

@keyframes glassFloat {

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

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

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

}

.hero {

    animation:

        slideUp .7s ease both;

}

.glass {

    animation:

        fadeIn .6s ease both;

}

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

@keyframes loadingBar {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}

.loader-progress {

    animation:

        loadingBar 2.2s linear forwards;

}

/* ===========================
   Button Glow
=========================== */

@keyframes buttonGlow {

    0% {

        box-shadow:

            0 10px 25px rgba(250,204,21,.25);

    }

    50% {

        box-shadow:

            0 15px 35px rgba(250,204,21,.45);

    }

    100% {

        box-shadow:

            0 10px 25px rgba(250,204,21,.25);

    }

}

#visitBtn {

    animation:

        buttonGlow 2.6s ease infinite;

}

/* ===========================
   Pulse
=========================== */

@keyframes pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }

}

.status {

    animation:

        pulse 2s infinite;

}

/* ===========================
   Toast
=========================== */

@keyframes toastBounce {

    0% {
        transform:
            translateX(-50%) translateY(30px);
    }

    60% {
        transform:
            translateX(-50%) translateY(-5px);
    }

    100% {
        transform:
            translateX(-50%) translateY(0);
    }

}

#toast.show {

    animation:

        toastBounce .35s ease;

}

/* ===========================
   Notice Hover
=========================== */

#noticeList li {

    transition:

        transform .25s ease,

        background .25s ease,

        border-color .25s ease;

}

#noticeList li:hover {

    transform:

        translateX(8px);

}

/* ===========================
   Floating Background
=========================== */

@keyframes floatY {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

.glass::after {

    animation:

        floatY 8s ease-in-out infinite;

}

/* ===========================
   Rotate Glow
=========================== */

@keyframes rotateGlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* 파티클 또는 후광 요소 재사용용 */

.rotate {

    animation:

        rotateGlow 30s linear infinite;

}

/* ===========================
   Fade Utility
=========================== */

.fade-in {

    animation:

        fadeIn .5s ease both;

}

.slide-up {

    animation:

        slideUp .5s ease both;

}

.zoom-in {

    animation:

        zoomIn .45s ease both;

}

/* =====================================================
   Particle
===================================================== */

.particle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(circle,

            rgba(250, 204, 21, .95),

            rgba(250, 204, 21, .35),

            transparent);

    animation:

        particleFloat linear infinite;

    filter: blur(.3px);

}

@keyframes particleFloat {

    0% {

        transform:

            translateY(0) translateX(0) scale(1);

    }

    25% {

        transform:

            translateY(-60px) translateX(25px) scale(1.15);

    }

    50% {

        transform:

            translateY(-120px) translateX(-20px) scale(.95);

    }

    75% {

        transform:

            translateY(-180px) translateX(40px) scale(1.1);

    }

    100% {

        transform:

            translateY(-260px) translateX(0) scale(.85);

    }

}

.card {

    opacity: 0;

    transform: translateY(30px);

    animation: cardFade .5s ease forwards;

}

@keyframes cardFade {

    to {

        opacity: 1;

        transform: none;

    }

}

.card:nth-child(1) {

    animation-delay: .1s;

}

.card:nth-child(2) {

    animation-delay: .2s;

}

.card:nth-child(3) {

    animation-delay: .3s;

}