mycsslab/src/utilities/webassembly-css-effects.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * MyCSSLab WebAssembly CSS Effects
 * GPU-accelerated effects using WebAssembly and advanced CSS
 * Version: 3.0.2
 */

/* ========================================
   WEBASSEMBLY CSS CORE VARIABLES
   ======================================== */

:root {
  /* WebAssembly performance variables */
  --wasm-gpu-acceleration: 1;
  --wasm-thread-count: 4;
  --wasm-memory-pool: 64MB;
  --wasm-cache-size: 16MB;
  
  /* WebAssembly effect variables */
  --wasm-particle-count: 1000;
  --wasm-particle-size: 2px;
  --wasm-particle-speed: 1;
  --wasm-particle-lifetime: 3s;
  
  /* WebAssembly animation variables */
  --wasm-frame-rate: 60fps;
  --wasm-interpolation: linear;
  --wasm-easing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* WebAssembly visual variables */
  --wasm-blur-intensity: 1;
  --wasm-contrast-intensity: 1;
  --wasm-saturation-intensity: 1;
  --wasm-brightness-intensity: 1;
}

/* ========================================
   WEBASSEMBLY PARTICLE SYSTEM
   ======================================== */

.my-wasm-particle {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  will-change: transform;
  transform: translateZ(0);
}

.my-wasm-particle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px, 20px 20px;
  animation: wasm-particle-move var(--wasm-particle-lifetime) linear infinite;
  will-change: transform;
}

@keyframes wasm-particle-move {
  0% { 
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% { 
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.my-wasm-particle-2d {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 100px 100px;
  animation: wasm-particle-2d-move var(--wasm-particle-lifetime) linear infinite;
  will-change: transform;
}

@keyframes wasm-particle-2d-move {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% { 
    transform: translate(100px, -50px) rotate(90deg) scale(1.2);
  }
  50% { 
    transform: translate(200px, 0) rotate(180deg) scale(0.8);
  }
  75% { 
    transform: translate(100px, 50px) rotate(270deg) scale(1.1);
  }
  100% { 
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

/* ========================================
   WEBASSEMBLY FLUID SIMULATION
   ======================================== */

.my-wasm-fluid {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  will-change: transform;
}

.my-wasm-fluid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  background-size: 200px 200px;
  animation: wasm-fluid-flow 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-fluid-flow {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    filter: blur(0px);
  }
  50% { 
    transform: translate(20px, -20px) scale(1.1);
    filter: blur(2px);
  }
}

.my-wasm-fluid-turbulent {
  background: 
    linear-gradient(45deg, #ff6b6b 0%, transparent 25%),
    linear-gradient(-45deg, #4ecdc4 0%, transparent 25%),
    linear-gradient(90deg, #45b7d1 0%, transparent 25%);
  background-size: 100px 100px;
  animation: wasm-fluid-turbulent 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-fluid-turbulent {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%;
    filter: contrast(1) saturate(1);
  }
  50% { 
    background-position: 100% 100%, -100% 100%, 100% -100%;
    filter: contrast(1.5) saturate(1.3);
  }
}

/* ========================================
   WEBASSEMBLY PHYSICS SIMULATION
   ======================================== */

.my-wasm-physics {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  will-change: transform;
  transform: translateZ(0);
}

.my-wasm-physics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: wasm-physics-gravity 2s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-physics-gravity {
  0%, 100% { 
    transform: translateY(0) scale(1);
  }
  50% { 
    transform: translateY(-20px) scale(1.1);
  }
}

.my-wasm-physics-elastic {
  animation: wasm-physics-elastic 1s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-physics-elastic {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.05);
  }
}

/* ========================================
   WEBASSEMBLY NEURAL NETWORK
   ======================================== */

.my-wasm-neural {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  will-change: transform;
}

.my-wasm-neural::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: wasm-neural-pulse 2s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-neural-pulse {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.1);
  }
}

.my-wasm-neural-connections {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 200px 200px;
  animation: wasm-neural-connections 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-neural-connections {
  0% { 
    transform: rotate(0deg) scale(1);
    filter: hue-rotate(0deg);
  }
  50% { 
    transform: rotate(180deg) scale(1.2);
    filter: hue-rotate(180deg);
  }
  100% { 
    transform: rotate(360deg) scale(1);
    filter: hue-rotate(360deg);
  }
}

/* ========================================
   WEBASSEMBLY FRACTAL GENERATION
   ======================================== */

.my-wasm-fractal {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  will-change: transform;
}

.my-wasm-fractal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 300px 300px;
  animation: wasm-fractal-rotate 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-fractal-rotate {
  0% { 
    transform: rotate(0deg) scale(1);
  }
  25% { 
    transform: rotate(90deg) scale(1.1);
  }
  50% { 
    transform: rotate(180deg) scale(1.2);
  }
  75% { 
    transform: rotate(270deg) scale(1.1);
  }
  100% { 
    transform: rotate(360deg) scale(1);
  }
}

.my-wasm-fractal-mandelbrot {
  background: 
    radial-gradient(circle at 25% 25%, #ff6b6b 20%, transparent 20%),
    radial-gradient(circle at 75% 75%, #4ecdc4 20%, transparent 20%),
    radial-gradient(circle at 50% 50%, #45b7d1 10%, transparent 10%);
  background-size: 240px 240px;
  animation: wasm-fractal-mandelbrot 5s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-fractal-mandelbrot {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    filter: contrast(1) saturate(1);
  }
  50% { 
    transform: scale(1.3) rotate(180deg);
    filter: contrast(1.5) saturate(1.3);
  }
}

/* ========================================
   WEBASSEMBLY RAY TRACING
   ======================================== */

.my-wasm-raytrace {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  will-change: transform;
}

.my-wasm-raytrace::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0%, transparent 25%);
  background-size: 100px 100px;
  animation: wasm-raytrace-sweep 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-raytrace-sweep {
  0%, 100% { 
    transform: translateX(0) rotate(0deg);
    opacity: 0.5;
  }
  50% { 
    transform: translateX(50px) rotate(45deg);
    opacity: 1;
  }
}

.my-wasm-raytrace-reflection {
  background: 
    linear-gradient(45deg, #ff6b6b 0%, transparent 25%),
    linear-gradient(-45deg, #4ecdc4 0%, transparent 25%),
    linear-gradient(90deg, #45b7d1 0%, transparent 25%);
  background-size: 80px 80px;
  animation: wasm-raytrace-reflection 2s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-raytrace-reflection {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%;
    filter: brightness(1) contrast(1);
  }
  50% { 
    background-position: 100% 100%, -100% 100%, 100% -100%;
    filter: brightness(1.3) contrast(1.2);
  }
}

/* ========================================
   WEBASSEMBLY MACHINE LEARNING
   ======================================== */

.my-wasm-ml {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  will-change: transform;
}

.my-wasm-ml::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px, 20px 20px;
  animation: wasm-ml-learn 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-ml-learn {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% { 
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
  }
}

.my-wasm-ml-pattern {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 150px 150px;
  animation: wasm-ml-pattern 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes wasm-ml-pattern {
  0% { 
    transform: rotate(0deg) scale(1);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: rotate(90deg) scale(1.1);
    filter: hue-rotate(90deg);
  }
  50% { 
    transform: rotate(180deg) scale(1.2);
    filter: hue-rotate(180deg);
  }
  75% { 
    transform: rotate(270deg) scale(1.1);
    filter: hue-rotate(270deg);
  }
  100% { 
    transform: rotate(360deg) scale(1);
    filter: hue-rotate(360deg);
  }
}

/* ========================================
   WEBASSEMBLY RESPONSIVE SYSTEM
   ======================================== */

@media (max-width: 768px) {
  .my-wasm-responsive {
    --wasm-particle-count: 500;
    --wasm-particle-size: 1px;
    --wasm-particle-speed: 0.5;
  }
}

@media (min-width: 1024px) {
  .my-wasm-responsive {
    --wasm-particle-count: 2000;
    --wasm-particle-size: 3px;
    --wasm-particle-speed: 1.5;
  }
}

/* ========================================
   WEBASSEMBLY ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .my-wasm-particle,
  .my-wasm-particle-2d,
  .my-wasm-fluid,
  .my-wasm-fluid-turbulent,
  .my-wasm-physics,
  .my-wasm-physics-elastic,
  .my-wasm-neural,
  .my-wasm-neural-connections,
  .my-wasm-fractal,
  .my-wasm-fractal-mandelbrot,
  .my-wasm-raytrace,
  .my-wasm-raytrace-reflection,
  .my-wasm-ml,
  .my-wasm-ml-pattern {
    animation: none;
  }
}

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

.my-wasm-auto {
  will-change: transform;
  transform: translateZ(0);
}

.my-wasm-optimized {
  --wasm-gpu-acceleration: 1;
  --wasm-thread-count: 8;
  --wasm-memory-pool: 128MB;
}

.my-wasm-performance {
  --wasm-frame-rate: 120fps;
  --wasm-interpolation: cubic-bezier(0.4, 0, 0.2, 1);
}