/* ===== ANIMATIONS & EFFECTS - ALSense ===== */

/* ===== MOVING COLOR BLOBS BACKGROUND ===== */
.color-blobs {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.blob {
    position: absolute;
    width: 85vw;
    height: 85vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.9;
    will-change: transform;
    mix-blend-mode: screen;
    /* Variables CSS para animación */
    --tx: 0vw; 
    --ty: 0vh; 
    --sc: 1; 
    --dur: 12s;
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--sc));
    transition-property: transform;
    transition-duration: var(--dur, 12s);
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Color gradients for blobs */
.blob-turquoise {
    background: radial-gradient(circle at 50% 50%, rgba(63, 184, 175, 0.95) 0%, rgba(63, 184, 175, 0.55) 40%, rgba(63, 184, 175, 0) 70%);
}

.blob-aqua {
    background: radial-gradient(circle at 50% 50%, rgba(127, 199, 175, 0.9) 0%, rgba(127, 199, 175, 0.5) 45%, rgba(127, 199, 175, 0) 75%);
}

.blob-lime {
    background: radial-gradient(circle at 50% 50%, rgba(218, 219, 167, 0.9) 0%, rgba(218, 219, 167, 0.5) 40%, rgba(218, 219, 167, 0) 70%);
}

.blob-coral {
    background: radial-gradient(circle at 50% 50%, rgba(255, 158, 157, 0.95) 0%, rgba(255, 158, 157, 0.55) 40%, rgba(255, 158, 157, 0) 70%);
}

.blob-pink {
    background: radial-gradient(circle at 50% 50%, rgba(255, 61, 127, 0.9) 0%, rgba(255, 61, 127, 0.5) 40%, rgba(255, 61, 127, 0) 70%);
}

/* Legacy particle animation (not used but kept for reference) */
@keyframes particlesFloat {
    0% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-20px) translateX(10px); }
    66% { transform: translateY(-40px) translateX(-5px); }
    100% { transform: translateY(-60px) translateX(5px); }
}