.login-bg {
    background-image: url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.animated-gradient {
    background: linear-gradient(-45deg, #dc2626, #991b1b, #d97706, #b45309);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.input-animated:focus + .input-label {
    transform: translateY(-2.2rem) scale(0.85);
    color: #dc2626;
}

.input-animated:not(:placeholder-shown) + .input-label {
    transform: translateY(-2.2rem) scale(0.85);
}

.input-label {
    transform-origin: 0 0;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: transparent;
    padding: 0 4px;
    z-index: 10;
}

.glow-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    .glow-button::after {
        content: "";
        position: absolute;
        top: -750%;
        left: -50%;
        width: 200%;
        /*height: 200%;*/
        aspect-ratio: 1 / 1;
        background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.4) 60deg, transparent 120deg);
        z-index: -1;
        animation: rotate 4s linear infinite;
    }

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.floating-shapes::before,
.floating-shapes::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: -1;
}

.floating-shapes::before {
    background: radial-gradient(circle at center, rgba(220, 38, 38, 0.3), rgba(220, 38, 38, 0.1));
    top: -150px;
    right: -100px;
    animation: float-shape-1 15s ease-in-out infinite alternate;
}

.floating-shapes::after {
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
    bottom: -150px;
    left: -100px;
    animation: float-shape-2 20s ease-in-out infinite alternate;
}

@keyframes float-shape-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    100% {
        transform: translate(50px, 50px) rotate(45deg);
        border-radius: 60% 40% 30% 70% / 50% 60% 30% 40%;
    }
}

@keyframes float-shape-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    100% {
        transform: translate(-50px, -50px) rotate(-45deg);
        border-radius: 60% 40% 30% 70% / 50% 60% 30% 40%;
    }
}

.input-animated {
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(4px);
}

    .input-animated:focus {
        background-color: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
    }