/* Custom Styles over Tailwind */

/* Custom Divider (Line + Icon + Line) */
.custom-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.custom-divider .line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    opacity: 0.6;
}

/* Shake Animation for incorrect password */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Particles Animation (Lock Screen Background) */
.particle {
    position: absolute;
    background: rgba(212, 175, 55, 0.4); /* Gold color with opacity */
    border-radius: 50%;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(1.5);
        opacity: 0;
    }
}