:root {
    --decoration-color-1: rgba(9, 132, 227, 0.05);
    --decoration-color-2: rgba(45, 52, 54, 0.03);
    --decoration-color-3: rgba(178, 190, 195, 0.07);
}

/* Minimalist background decorations */
.decoration {
    position: fixed;
    z-index: -1;
    pointer-events: none;
}

/* Geometric shapes */
.decoration-circle {
    border-radius: 50%;
    background: var(--decoration-color-1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.decoration-square {
    border-radius: 4px;
    background: var(--decoration-color-2);
    transform: rotate(45deg);
}

.decoration-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--decoration-color-3), transparent);
}

/* Positioned elements */
.decoration-1 {
    width: 150px;
    height: 150px;
    top: 15%;
    right: 10%;
    opacity: 0.6;
    animation: float 20s infinite ease-in-out;
}

.decoration-2 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 5%;
    opacity: 0.4;
    animation: float 15s infinite ease-in-out reverse;
}

.decoration-3 {
    width: 200px;
    height: 1px;
    top: 30%;
    left: 0;
    animation: fadeInOut 8s infinite ease-in-out;
}

.decoration-4 {
    width: 60px;
    height: 60px;
    top: 70%;
    right: 15%;
    opacity: 0.3;
    animation: float 18s infinite ease-in-out 2s;
}

.decoration-5 {
    width: 120px;
    height: 1px;
    bottom: 15%;
    right: 10%;
    animation: fadeInOut 10s infinite ease-in-out 1s;
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(20px) rotate(5deg);
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.7;
    }
}

/* Background elements that are already in HTML */
.bg-element {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
}

.bg-element-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: 5%;
    border-radius: 50%;
    background: var(--decoration-color-1);
    animation: float 25s infinite ease-in-out;
}

.bg-element-2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    left: 8%;
    border-radius: 4px;
    background: var(--decoration-color-2);
    transform: rotate(30deg);
    animation: float 20s infinite ease-in-out reverse;
}