/**
 * KnowYaKind - Visual Effects System
 * Category-specific animations, theme-based color schemes, and dynamic backgrounds
 */

/* ========================================
   ACCESSIBILITY: Respect reduced motion preference
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   CSS CUSTOM PROPERTIES - Theme-Based Color Schemes
   ======================================== */

/* Default Theme */
:root {
    /* Base colors */
    --vfx-bg-primary: #0a0a0a;
    --vfx-bg-secondary: #111111;
    --vfx-bg-tertiary: #1a1a1a;
    
    /* Accent colors */
    --vfx-accent-primary: #17a2b8;
    --vfx-accent-secondary: #20c997;
    --vfx-accent-tertiary: #6366f1;
    
    /* Particle colors */
    --vfx-particle-primary: rgba(23, 162, 184, 0.8);
    --vfx-particle-secondary: rgba(32, 201, 151, 0.8);
    --vfx-particle-success: rgba(16, 185, 129, 0.8);
    --vfx-particle-error: rgba(239, 68, 68, 0.8);
}

/* Category-Specific Themes */
[data-category="blanks"] {
    --vfx-accent-primary: #3b82f6;
    --vfx-accent-secondary: #60a5fa;
    --vfx-accent-tertiary: #93c5fd;
    --vfx-particle-primary: rgba(59, 130, 246, 0.8);
    --vfx-particle-secondary: rgba(96, 165, 250, 0.8);
}

[data-category="colors"] {
    --vfx-accent-primary: #ec4899;
    --vfx-accent-secondary: #f472b6;
    --vfx-accent-tertiary: #f9a8d4;
    --vfx-particle-primary: rgba(236, 72, 153, 0.8);
    --vfx-particle-secondary: rgba(244, 114, 182, 0.8);
}

[data-category="animals"] {
    --vfx-accent-primary: #10b981;
    --vfx-accent-secondary: #34d399;
    --vfx-accent-tertiary: #6ee7b7;
    --vfx-particle-primary: rgba(16, 185, 129, 0.8);
    --vfx-particle-secondary: rgba(52, 211, 153, 0.8);
}

[data-category="food"] {
    --vfx-accent-primary: #f59e0b;
    --vfx-accent-secondary: #fbbf24;
    --vfx-accent-tertiary: #fcd34d;
    --vfx-particle-primary: rgba(245, 158, 11, 0.8);
    --vfx-particle-secondary: rgba(251, 191, 36, 0.8);
}

[data-category="nature"] {
    --vfx-accent-primary: #14b8a6;
    --vfx-accent-secondary: #2dd4bf;
    --vfx-accent-tertiary: #5eead4;
    --vfx-particle-primary: rgba(20, 184, 166, 0.8);
    --vfx-particle-secondary: rgba(45, 212, 191, 0.8);
}

[data-category="technology"] {
    --vfx-accent-primary: #6366f1;
    --vfx-accent-secondary: #818cf8;
    --vfx-accent-tertiary: #a5b4fc;
    --vfx-particle-primary: rgba(99, 102, 241, 0.8);
    --vfx-particle-secondary: rgba(129, 140, 248, 0.8);
}

[data-category="sports"] {
    --vfx-accent-primary: #ef4444;
    --vfx-accent-secondary: #f87171;
    --vfx-accent-tertiary: #fca5a5;
    --vfx-particle-primary: rgba(239, 68, 68, 0.8);
    --vfx-particle-secondary: rgba(248, 113, 113, 0.8);
}

[data-category="emotions"] {
    --vfx-accent-primary: #8b5cf6;
    --vfx-accent-secondary: #a78bfa;
    --vfx-accent-tertiary: #c4b5fd;
    --vfx-particle-primary: rgba(139, 92, 246, 0.8);
    --vfx-particle-secondary: rgba(167, 139, 250, 0.8);
}

[data-category="actions"] {
    --vfx-accent-primary: #f97316;
    --vfx-accent-secondary: #fb923c;
    --vfx-accent-tertiary: #fdba74;
    --vfx-particle-primary: rgba(249, 115, 22, 0.8);
    --vfx-particle-secondary: rgba(251, 146, 60, 0.8);
}

[data-category="places"] {
    --vfx-accent-primary: #06b6d4;
    --vfx-accent-secondary: #22d3ee;
    --vfx-accent-tertiary: #67e8f9;
    --vfx-particle-primary: rgba(6, 182, 212, 0.8);
    --vfx-particle-secondary: rgba(34, 211, 238, 0.8);
}

/* ========================================
   DYNAMIC BACKGROUNDS
   ======================================== */

.vfx-dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    transition: opacity 1s ease;
}

/* Animated gradient backgrounds */
.vfx-bg-gradient-animated {
    background: radial-gradient(
        circle at 20% 50%,
        var(--vfx-accent-primary) 0%,
        transparent 50%
    ),
    radial-gradient(
        circle at 80% 80%,
        var(--vfx-accent-secondary) 0%,
        transparent 50%
    );
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    opacity: 0.1;
}

/* Particle field background */
.vfx-bg-particles {
    background-image: 
        radial-gradient(2px 2px at 20% 30%, var(--vfx-accent-primary), transparent),
        radial-gradient(2px 2px at 60% 70%, var(--vfx-accent-secondary), transparent),
        radial-gradient(1px 1px at 50% 50%, var(--vfx-accent-tertiary), transparent),
        radial-gradient(1px 1px at 80% 10%, var(--vfx-accent-primary), transparent);
    background-size: 200% 200%, 150% 150%, 100% 100%, 180% 180%;
    background-position: 0% 0%, 20% 20%, 40% 40%, 60% 60%;
    animation: particleFloat 30s ease-in-out infinite;
    opacity: 0.15;
}

/* Wave pattern background */
.vfx-bg-waves {
    background: 
        linear-gradient(90deg, transparent 0%, var(--vfx-accent-primary) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: waveFlow 10s linear infinite;
    opacity: 0.05;
}

/* Geometric pattern background */
.vfx-bg-geometric {
    background-image:
        linear-gradient(30deg, var(--vfx-accent-primary) 12%, transparent 12.5%, transparent 87%, var(--vfx-accent-primary) 87.5%, var(--vfx-accent-primary)),
        linear-gradient(150deg, var(--vfx-accent-primary) 12%, transparent 12.5%, transparent 87%, var(--vfx-accent-primary) 87.5%, var(--vfx-accent-primary)),
        linear-gradient(30deg, var(--vfx-accent-secondary) 12%, transparent 12.5%, transparent 87%, var(--vfx-accent-secondary) 87.5%, var(--vfx-accent-secondary)),
        linear-gradient(150deg, var(--vfx-accent-secondary) 12%, transparent 12.5%, transparent 87%, var(--vfx-accent-secondary) 87.5%, var(--vfx-accent-secondary));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px;
    animation: geometricShift 20s linear infinite;
    opacity: 0.08;
}

/* ========================================
   CATEGORY-SPECIFIC ANIMATIONS
   ======================================== */

/* Blanks Category - Smooth fill animation */
[data-category="blanks"] .vfx-prompt-enter {
    animation: blanksFillIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes blanksFillIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(10px);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Colors Category - Rainbow fade animation */
[data-category="colors"] .vfx-prompt-enter {
    animation: colorFade 1s ease-in-out;
}

@keyframes colorFade {
    0% {
        opacity: 0;
        filter: hue-rotate(0deg) saturate(0);
    }
    50% {
        filter: hue-rotate(180deg) saturate(2);
    }
    100% {
        opacity: 1;
        filter: hue-rotate(360deg) saturate(1);
    }
}

/* Animals Category - Bounce animation */
[data-category="animals"] .vfx-prompt-enter {
    animation: animalBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes animalBounce {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
    70% {
        transform: scale(0.95) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Food Category - Pop and sizzle animation */
[data-category="food"] .vfx-prompt-enter {
    animation: foodPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes foodPop {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(50px);
    }
    60% {
        transform: scale(1.1) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Nature Category - Grow animation */
[data-category="nature"] .vfx-prompt-enter {
    animation: natureGrow 1s ease-out;
}

@keyframes natureGrow {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Technology Category - Digital glitch animation */
[data-category="technology"] .vfx-prompt-enter {
    animation: techGlitch 0.7s steps(5);
}

@keyframes techGlitch {
    0% {
        opacity: 0;
        transform: translateX(-20px);
        filter: blur(5px);
    }
    20% {
        transform: translateX(10px);
    }
    40% {
        transform: translateX(-5px);
    }
    60% {
        transform: translateX(5px);
    }
    80% {
        transform: translateX(-2px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* Sports Category - Fast swipe animation */
[data-category="sports"] .vfx-prompt-enter {
    animation: sportsSwipe 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes sportsSwipe {
    0% {
        opacity: 0;
        transform: translateX(-100%) skewX(-10deg);
    }
    60% {
        transform: translateX(5%) skewX(5deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0);
    }
}

/* Emotions Category - Pulse with glow */
[data-category="emotions"] .vfx-prompt-enter {
    animation: emotionPulse 1s ease-out;
}

@keyframes emotionPulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
        box-shadow: 0 0 0 0 var(--vfx-accent-primary);
    }
    50% {
        box-shadow: 0 0 30px 10px var(--vfx-accent-primary);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--vfx-accent-primary);
    }
}

/* Actions Category - Quick snap animation */
[data-category="actions"] .vfx-prompt-enter {
    animation: actionSnap 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes actionSnap {
    0% {
        opacity: 0;
        transform: scale(1.5) rotate(5deg);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Places Category - Slide and fade */
[data-category="places"] .vfx-prompt-enter {
    animation: placesSlide 0.8s ease-out;
}

@keyframes placesSlide {
    0% {
        opacity: 0;
        transform: translateX(-50px) translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* ========================================
   GENERAL ANIMATIONS
   ======================================== */

/* Enhanced fade animations */
.vfx-fade-in {
    animation: vfxFadeIn 0.6s ease-out;
}

.vfx-fade-out {
    animation: vfxFadeOut 0.4s ease-in forwards;
}

@keyframes vfxFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vfxFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Slide animations */
.vfx-slide-in-left {
    animation: slideInLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vfx-slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vfx-slide-in-up {
    animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vfx-slide-in-down {
    animation: slideInDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale animations */
.vfx-scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vfx-scale-out {
    animation: scaleOut 0.3s ease-in forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Rotate animations */
.vfx-rotate-in {
    animation: rotateIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Shake animation for errors */
.vfx-shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* Pulse animation for success */
.vfx-pulse-success {
    animation: pulseSuccess 0.6s ease-out;
}

@keyframes pulseSuccess {
    0% {
        box-shadow: 0 0 0 0 var(--vfx-particle-success);
    }
    50% {
        box-shadow: 0 0 30px 15px var(--vfx-particle-success);
    }
    100% {
        box-shadow: 0 0 0 0 var(--vfx-particle-success);
    }
}

/* Pulse animation for errors */
.vfx-pulse-error {
    animation: pulseError 0.6s ease-out;
}

@keyframes pulseError {
    0% {
        box-shadow: 0 0 0 0 var(--vfx-particle-error);
    }
    50% {
        box-shadow: 0 0 30px 15px var(--vfx-particle-error);
    }
    100% {
        box-shadow: 0 0 0 0 var(--vfx-particle-error);
    }
}

/* Celebration animation */
.vfx-celebrate {
    animation: celebrate 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    75% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ========================================
   BACKGROUND ANIMATIONS
   ======================================== */

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes particleFloat {
    0%, 100% {
        background-position: 0% 0%, 20% 20%, 40% 40%, 60% 60%;
    }
    25% {
        background-position: 20% 10%, 40% 30%, 60% 50%, 80% 70%;
    }
    50% {
        background-position: 40% 20%, 60% 40%, 80% 60%, 100% 80%;
    }
    75% {
        background-position: 20% 30%, 40% 50%, 60% 70%, 80% 90%;
    }
}

@keyframes waveFlow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

@keyframes geometricShift {
    0% {
        background-position: 0 0, 0 0, 40px 70px, 40px 70px;
    }
    100% {
        background-position: 80px 140px, 80px 140px, 120px 210px, 120px 210px;
    }
}

/* ========================================
   INTERACTION EFFECTS
   ======================================== */

/* Button hover effects with category colors */
.vfx-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vfx-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--vfx-accent-primary);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
    opacity: 0.3;
}

.vfx-button:hover::before {
    width: 300px;
    height: 300px;
}

.vfx-button:active {
    transform: scale(0.95);
}

/* Card hover effects */
.vfx-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.vfx-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        transparent 0%,
        var(--vfx-accent-primary) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.vfx-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.vfx-card:hover::after {
    opacity: 0.1;
}

/* Glow effect */
.vfx-glow {
    box-shadow: 
        0 0 10px var(--vfx-accent-primary),
        0 0 20px var(--vfx-accent-primary),
        0 0 30px var(--vfx-accent-secondary);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 0 10px var(--vfx-accent-primary),
            0 0 20px var(--vfx-accent-primary),
            0 0 30px var(--vfx-accent-secondary);
    }
    50% {
        box-shadow: 
            0 0 20px var(--vfx-accent-primary),
            0 0 30px var(--vfx-accent-primary),
            0 0 40px var(--vfx-accent-secondary);
    }
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

.vfx-loading-dots {
    display: inline-flex;
    gap: 8px;
}

.vfx-loading-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vfx-accent-primary);
    animation: loadingDots 1.4s ease-in-out infinite;
}

.vfx-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.vfx-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loadingDots {
    0%, 80%, 100% {
        transform: scale(0.5);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spinner */
.vfx-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--vfx-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Progress bar pulse */
.vfx-progress-pulse {
    position: relative;
    overflow: hidden;
}

.vfx-progress-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    to {
        left: 100%;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.vfx-transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vfx-transition-bounce {
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vfx-blur-in {
    animation: blurIn 0.5s ease-out;
}

@keyframes blurIn {
    from {
        filter: blur(20px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.vfx-zoom-pulse {
    animation: zoomPulse 2s ease-in-out infinite;
}

@keyframes zoomPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Text effects */
.vfx-text-shimmer {
    background: linear-gradient(
        90deg,
        var(--vfx-accent-primary),
        var(--vfx-accent-secondary),
        var(--vfx-accent-primary)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .vfx-bg-gradient-animated,
    .vfx-bg-particles,
    .vfx-bg-waves,
    .vfx-bg-geometric {
        animation-duration: 20s; /* Slower animations */
    }
    
    /* Simplify particle effects */
    .vfx-bg-particles {
        background-size: 150% 150%, 120% 120%, 100% 100%, 150% 150%;
    }
}