.bg-decorations {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
}

.bg-decorations .deco-shape {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.deco-circle {
    border-radius: 50%;
}

.deco-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.deco-blob-2 {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.deco-blob-3 {
    border-radius: 55% 45% 65% 35% / 45% 55% 35% 65%;
}

.deco-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 0;
}

.deco-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 0;
}

/* ---- Color themes ---- */

.deco-indigo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
}
.dark .deco-indigo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.09), rgba(139, 92, 246, 0.09));
}

.deco-violet {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(196, 181, 253, 0.10));
}
.dark .deco-violet {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.07), rgba(196, 181, 253, 0.07));
}

.deco-emerald {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.09), rgba(16, 185, 129, 0.09));
}
.dark .deco-emerald {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.06), rgba(16, 185, 129, 0.06));
}

.deco-cyan {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.09), rgba(6, 182, 212, 0.09));
}
.dark .deco-cyan {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(6, 182, 212, 0.06));
}

.deco-amber {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.09), rgba(245, 158, 11, 0.09));
}
.dark .deco-amber {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(245, 158, 11, 0.06));
}

.deco-rose {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.09), rgba(236, 72, 153, 0.09));
}
.dark .deco-rose {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.06), rgba(236, 72, 153, 0.06));
}

/* ---- Position & size ---- */

.deco-70 { width: 70px; height: 70px; }
.deco-90 { width: 90px; height: 90px; }
.deco-100 { width: 100px; height: 100px; }
.deco-120 { width: 120px; height: 120px; }
.deco-150 { width: 150px; height: 150px; }
.deco-200 { width: 200px; height: 200px; }

/* Orb — soft blur for ambient shapes */
.deco-orb {
    filter: blur(50px);
    border-radius: 50%;
}

/* ---- Animations ---- */

@keyframes deco-float-1 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(-14px) translateX(10px) rotate(0.8deg); }
    50% { transform: translateY(-6px) translateX(-12px) rotate(-0.4deg); }
    75% { transform: translateY(-18px) translateX(6px) rotate(0.5deg); }
}

@keyframes deco-float-2 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    20% { transform: translateY(-8px) translateX(16px) rotate(0.6deg); }
    40% { transform: translateY(-20px) translateX(4px) rotate(-0.3deg); }
    60% { transform: translateY(-12px) translateX(-14px) rotate(0.4deg); }
    80% { transform: translateY(-4px) translateX(-6px) rotate(-0.2deg); }
}

@keyframes deco-float-3 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-16px) translateX(-12px) rotate(1.2deg); }
    66% { transform: translateY(-24px) translateX(8px) rotate(-0.8deg); }
}

@keyframes deco-float-4 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    50% { transform: translateY(-12px) translateX(22px) rotate(0.6deg); }
}

@keyframes deco-float-5 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-20px) translateX(-8px) rotate(1.5deg); }
    66% { transform: translateY(-8px) translateX(14px) rotate(-0.5deg); }
}

@keyframes deco-float-6 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-10px) translateX(18px); }
}

@keyframes deco-float-7 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(-6px) translateX(-18px) rotate(-1deg); }
    50% { transform: translateY(-16px) translateX(-4px) rotate(0.5deg); }
    75% { transform: translateY(-10px) translateX(10px) rotate(-0.3deg); }
}

@keyframes deco-ambient {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.6; }
}

.deco-anim-1 { animation: deco-float-1 24s ease-in-out infinite; }
.deco-anim-2 { animation: deco-float-2 30s ease-in-out infinite; }
.deco-anim-3 { animation: deco-float-3 20s ease-in-out infinite; }
.deco-anim-4 { animation: deco-float-4 26s ease-in-out infinite; }
.deco-anim-5 { animation: deco-float-5 28s ease-in-out infinite; }
.deco-anim-6 { animation: deco-float-6 22s ease-in-out infinite; }
.deco-anim-7 { animation: deco-float-7 32s ease-in-out infinite; }
.deco-anim-ambient { animation: deco-ambient 18s ease-in-out infinite; }

.deco-delay-1 { animation-delay: -3s; }
.deco-delay-2 { animation-delay: -8s; }
.deco-delay-3 { animation-delay: -13s; }
.deco-delay-4 { animation-delay: -5s; }
.deco-delay-5 { animation-delay: -10s; }
.deco-delay-6 { animation-delay: -16s; }
.deco-delay-7 { animation-delay: -2s; }
.deco-delay-8 { animation-delay: -7s; }
.deco-delay-9 { animation-delay: -11s; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bg-decorations .deco-shape {
        animation: none !important;
    }
}