/* A.M GORI Login - Animated wavy background using brand colors */
/* Uses: #00552F, #003D22, #62B83F, #2563eb, #3b82f6 */

.login-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background: linear-gradient(135deg, #E8F5ED 0%, #F5F8F6 40%, #f0fdf4 70%, #e8f5f0 100%);
}

.login-bg-waves {
    position: absolute;
    inset: 0;
}

.login-bg-wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 45%;
    min-height: 180px;
    opacity: 0.18;
}

.login-bg-wave-1 {
    bottom: 0;
    animation: loginWave1 14s linear infinite;
}

.login-bg-wave-2 {
    bottom: 5%;
    animation: loginWave2 18s linear infinite reverse;
}

.login-bg-wave-3 {
    bottom: 10%;
    animation: loginWave1 22s linear infinite;
    opacity: 0.12;
}

@keyframes loginWave1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes loginWave2 {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.login-bg-blobs {
    position: absolute;
    inset: -20%;
}

.login-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    will-change: transform;
}

.login-bg-blob-1 {
    width: 60vmax;
    height: 60vmax;
    background: radial-gradient(circle, rgba(0, 85, 47, 0.35) 0%, transparent 70%);
    top: -20%;
    left: -10%;
    animation: loginBlob1 18s ease-in-out infinite;
}

.login-bg-blob-2 {
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(circle, rgba(98, 184, 63, 0.3) 0%, transparent 70%);
    top: 40%;
    right: -15%;
    animation: loginBlob2 22s ease-in-out infinite;
}

.login-bg-blob-3 {
    width: 45vmax;
    height: 45vmax;
    background: radial-gradient(circle, rgba(26, 122, 94, 0.25) 0%, transparent 70%);
    bottom: -15%;
    left: 20%;
    animation: loginBlob3 20s ease-in-out infinite;
}

.login-bg-blob-4 {
    width: 40vmax;
    height: 40vmax;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    top: 20%;
    left: 50%;
    animation: loginBlob4 25s ease-in-out infinite;
}

@keyframes loginBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(5%, 8%) scale(1.05); }
    50% { transform: translate(-8%, -5%) scale(0.95); }
    75% { transform: translate(10%, -8%) scale(1.02); }
}

@keyframes loginBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-12%, 5%) scale(1.08); }
    66% { transform: translate(5%, -10%) scale(0.92); }
}

@keyframes loginBlob3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(8%, -6%) scale(1.04); }
    50% { transform: translate(-5%, 12%) scale(0.96); }
    75% { transform: translate(-10%, -5%) scale(1.06); }
}

@keyframes loginBlob4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-8%, -8%) scale(1.1); }
    40% { transform: translate(10%, 6%) scale(0.9); }
    60% { transform: translate(5%, -10%) scale(1.05); }
    80% { transform: translate(-6%, 8%) scale(0.98); }
}