/* Animaatiot */
@keyframes float {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.3;
    }
    50% { 
        transform: translate(20px, 20px) scale(1.05); 
        opacity: 0.5;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Animoidut elementit */
.shape {
    position: absolute;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
    border-radius: 50%;
    mix-blend-mode: multiply;
    will-change: transform;
}

.shape:nth-child(1) {
    width: 600px;
    height: 600px;
    top: -300px;
    left: -200px;
    animation: float 20s ease-in-out infinite;
    background: radial-gradient(circle, rgba(255, 102, 102, 0.1) 0%, transparent 70%);
}

.shape:nth-child(2) {
    width: 800px;
    height: 800px;
    bottom: -400px;
    right: -300px;
    animation: float 25s ease-in-out infinite reverse;
    background: radial-gradient(circle, rgba(255, 102, 102, 0.08) 0%, transparent 70%);
}

.shape:nth-child(3) {
    width: 400px;
    height: 400px;
    top: 20%;
    left: 60%;
    animation: float 22s ease-in-out infinite 2s;
    background: radial-gradient(circle, rgba(255, 102, 102, 0.05) 0%, transparent 70%);
}

/* Transitiot */
.login-container {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-container:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 25px 50px var(--glass-shadow),
        0 0 0 1px var(--glass-border);
}

.form-group input {
    transition: all 0.2s ease;
}

.login-button {
    transition: all 0.2s ease;
}

.website-button {
    transition: all 0.2s ease;
}

.website-url {
    transition: opacity 0.2s ease;
}

.website-url:hover {
    opacity: 1;
}

/* Loading tila */
#loginForm.checking, 
.login-container.checking {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo::before {
    transition: transform 0.3s ease;
}