/* Particle Effects Enhancement for AI Halo */

/* Ensure proper layering for particle canvas */
.ai-halo {
    isolation: isolate; /* Create new stacking context */
    overflow: hidden; /* Ensure particles stay within bounds */
}

/* Enhanced particle interaction states */
.ai-halo.particle-hover::before {
    filter: blur(16px) saturate(160%);
    opacity: 0.7;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-halo.particle-focus::before {
    filter: blur(18px) saturate(200%);
    opacity: 0.9;
    background:
            radial-gradient(circle at 25% 60%, rgba(147, 112, 255, 0.5) 0%, transparent 60%),
            radial-gradient(circle at 75% 40%, rgba(255, 63, 163, 0.4) 0%, transparent 60%),
            radial-gradient(circle at 50% 30%, rgba(90, 120, 255, 0.35) 0%, transparent 60%),
            radial-gradient(circle at 30% 80%, rgba(255, 100, 200, 0.3) 0%, transparent 50%);
    animation: pulseGlow 3s ease-in-out infinite alternate,
    particleDance 8s ease-in-out infinite;
}

/* Particle dance animation for focus state */
@keyframes particleDance {
    0%, 100% {
        background-position: 25% 60%, 75% 40%, 50% 30%, 30% 80%;
    }
    25% {
        background-position: 30% 55%, 80% 35%, 45% 25%, 25% 85%;
    }
    50% {
        background-position: 20% 65%, 70% 45%, 55% 35%, 35% 75%;
    }
    75% {
        background-position: 35% 50%, 85% 50%, 40% 20%, 20% 90%;
    }
}

/* Enhanced border animation for particle states */
.ai-halo.particle-hover::after {
    filter: blur(2px) saturate(200%) brightness(110%);
    animation: spinBorder 6s linear infinite, borderPulse 2s ease-in-out infinite alternate;
}

.ai-halo.particle-focus::after {
    filter: blur(1px) saturate(250%) brightness(130%);
    background: conic-gradient(
            from var(--angle),
            rgba(90, 120, 255, 0.9) 0deg,
            rgba(147, 112, 255, 1) 60deg,
            rgba(255, 63, 163, 0.9) 120deg,
            rgba(255, 100, 200, 0.8) 180deg,
            rgba(130, 95, 255, 0.9) 240deg,
            rgba(90, 120, 255, 0.9) 300deg,
            rgba(90, 120, 255, 0.9) 360deg
    );
    animation: spinBorder 4s linear infinite, focusBorderPulse 1.5s ease-in-out infinite;
}

/* Focus-specific border animation */
@keyframes focusBorderPulse {
    0%, 100% {
        opacity: 0.9;
        filter: blur(1px) saturate(250%) brightness(130%);
    }
    50% {
        opacity: 1;
        filter: blur(0.5px) saturate(300%) brightness(150%);
    }
}

/* Input enhancements for particle states */
.ai-halo.particle-hover .ai-input {
    background: rgba(5, 30, 65, 0.7);
    backdrop-filter: blur(15px) saturate(160%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-halo.particle-focus .ai-input {
    background: rgba(10, 35, 70, 0.8);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 0 20px rgba(147, 112, 255, 0.1);
}

/* Subtle shimmer effect for particles */
.ai-halo::before {
    background:
            radial-gradient(circle at 20% 50%, rgba(147, 112, 255, 0.4) 0%, transparent 50%),
            radial-gradient(circle at 80% 50%, rgba(255, 63, 163, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 50% 20%, rgba(90, 120, 255, 0.25) 0%, transparent 50%);
    background-size: 200% 200%, 200% 200%, 200% 200%;
    animation: pulseGlow 4s ease-in-out infinite alternate,
    shimmerParticles 12s ease-in-out infinite;
}

@keyframes shimmerParticles {
    0%, 100% {
        background-position: 0% 50%, 100% 50%, 50% 0%;
    }
    33% {
        background-position: 100% 80%, 0% 20%, 80% 100%;
    }
    66% {
        background-position: 20% 0%, 80% 100%, 0% 50%;
    }
}

/* Particle trail effect on typing */
.ai-halo.typing {
    position: relative;
}

.ai-halo.typing::before {
    animation: pulseGlow 2s ease-in-out infinite alternate,
    typingParticles 1s ease-in-out infinite;
}

@keyframes typingParticles {
    0%, 100% {
        filter: blur(20px) saturate(200%);
        opacity: 0.8;
    }
    50% {
        filter: blur(15px) saturate(300%);
        opacity: 1;
    }
}

/* Responsive particle adjustments */
@media (max-width: 768px) {
    .ai-halo::before {
        filter: blur(15px) saturate(180%);
        opacity: 0.6;
    }

    .ai-halo.particle-hover::before {
        filter: blur(12px) saturate(140%);
        opacity: 0.6;
    }

    .ai-halo.particle-focus::before {
        filter: blur(14px) saturate(170%);
        opacity: 0.8;
    }
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ai-halo::before,
    .ai-halo::after {
        animation: none !important;
    }

    .ai-halo.particle-hover::before,
    .ai-halo.particle-focus::before {
        animation: none !important;
    }

    .ai-halo.particle-hover::after,
    .ai-halo.particle-focus::after {
        animation: spinBorder 12s linear infinite;
    }
}

/* Performance optimization for particle rendering */
.ai-halo canvas {
    will-change: auto;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Smooth state transitions */
.ai-halo {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-halo.particle-hover,
.ai-halo.particle-focus {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}