/* ============================================
   BACKGROUND BLOBS — розмиті кола паралаксу
   ============================================ */

.bg-blobs-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

/* Blob 1: Рожевий/Пурпуровий */
.blob-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #A855F7, #6366F1);
    top: -100px;
    left: -100px;
}

/* Blob 2: Блакитний/Морський */
.blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #71FFD7, #06B6D4);
    top: 40%;
    right: -150px;
}

/* Blob 3: Фіолетовий глибокий */
.blob-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #8B5CF6, #4C1D95);
    bottom: 10%;
    left: 15%;
}

/* Blob 4: Акцентний світлий */
.blob-4 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #C084FC, #71FFD7);
    top: 20%;
    left: 40%;
    opacity: 0.2;
}

/* Cursor Following Glow */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(113, 255, 215, 0.6) 0%, rgba(113, 255, 215, 0) 75%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    mix-blend-mode: soft-light;
    filter: blur(80px);
}

/* Mobile: Hide glow to prevent clutter and save battery */
@media (max-width: 767px) {
    .bg-blob {
        filter: blur(60px);
        opacity: 0.2;
    }

    .blob-4,
    .blob-3,
    .cursor-glow {
        display: none;
    }
}