/* --- Animations Module --- */

/* 掃描線動畫 */
@keyframes scan-line {
    0% {
        top: 10%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 90%;
        opacity: 0;
    }
}

.scan-line-anim {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #ef4444;
    box-shadow: 0 0 4px #ef4444;
    animation: scan-line 2s infinite linear;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

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

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(-5%);
    }

    50% {
        transform: translateY(5%);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.animate-pulse-ring {
    animation: pulse-ring 2s infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.2s ease-in-out 3;
}

@keyframes pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

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

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pop {
    animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes working {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    25% {
        transform: rotate(-15deg) translate(-10px, 10px);
    }

    50% {
        transform: rotate(0deg) translate(0, 0);
    }

    75% {
        transform: rotate(-15deg) translate(-10px, 10px);
    }

    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}

.animate-working {
    animation: working 1s ease-in-out forwards;
}

/* 3D Spin */
@keyframes spin-3d {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.animate-spin-slow-3d {
    animation: spin-3d 10s linear infinite;
}