/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

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

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(120deg);
    }

    66% {
        transform: translateY(-10px) rotate(240deg);
    }
}

/* Utility Classes for Animations */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

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

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

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

/* Glass and Floating Effects */
.glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9);
}

.dark .glass-effect {
    background: rgba(31, 41, 55, 0.9);
}

.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.floating-icon {
    position: absolute;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

/* Form and Input Styling */
.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    transition: color 0.3s;
}

.input-with-icon {
    padding-left: 44px;
}

.input-group:focus-within .input-icon {
    color: #EF4444;
}

/* The :focus-within pseudo-class targets the parent `.input-group` when any of its children (the input) is focused. */
.security-badge {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.login-form {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease-in-out; /* Add transition for hover effect */
}

.dark .login-form {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.9) 100%);
    border: 1px solid rgba(75, 85, 99, 0.2);
}