.modern-input-group {
    position: relative;
    margin: .5rem 0 2rem;
}

.modern-input-group input {
    height: 52px !important;
    padding: 14pt !important;
    border-radius: 8px;
    border: 1px solid #bfc9d4;
    width: 100%;
}

.modern-input-group label {
    position: absolute;
    left: 14px;
    top: 15px;
    pointer-events: none;
    transition: .4s;
    color: #888ea8;
    padding: 0 6px;
}

.modern-input-group input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 5px var(--color-primary);
}

.modern-input-group input:focus~label,
.modern-input-group input:not(:placeholder-shown)~label {
    top: -10px;
    font-size: 13px;
    font-weight: bold;
}

body.dark .modern-input-group input:focus~label,
body.dark .modern-input-group input:not(:placeholder-shown)~label {
    background: #060818;
}

.nebula-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    top: 50%;
    left: 10px;
    filter: blur(0.8px);
    mix-blend-mode: screen;
    transition: opacity 0.3s ease;
}

.modern-input-group input:focus~.nebula-particle {
    animation: nebula-float 2s forwards ease-out;
}

@keyframes nebula-float {
    0% {
        transform: translate(0, -50%) scale(0.8);
        opacity: 0;
        background: var(--color-primary);
    }

    20% {
        opacity: 0.8;
    }

    100% {
        transform: translate(calc(var(--x) * 140px), calc(var(--y) * 35px)) scale(1.1);
        opacity: 0;
        background: #6df2ff;
    }
}