mycsslab/src/utilities/generative-art-css.css

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

/**
 * MyCSSLab Generative Art CSS
 * Procedural art and design systems created with pure CSS
 * Version: 3.0.2
 */

/* ========================================
   GENERATIVE ART CORE VARIABLES
   ======================================== */

:root {
  /* Generative color palettes */
  --gen-art-palette-1: #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57;
  --gen-art-palette-2: #667eea, #764ba2, #f093fb, #f5576c, #4facfe;
  --gen-art-palette-3: #43e97b, #38f9d7, #ffecd2, #fcb69f, #a8edea;
  --gen-art-palette-4: #ff9a9e, #fecfef, #fecfef, #fecfef, #fecfef;
  --gen-art-palette-5: #a8c0ff, #3f2b96, #ff9a9e, #fecfef, #fecfef;
  
  /* Generative animation variables */
  --gen-art-duration: 10s;
  --gen-art-easing: ease-in-out;
  --gen-art-delay: 0s;
  
  /* Generative pattern variables */
  --gen-art-pattern-size: 100px;
  --gen-art-pattern-complexity: 5;
  --gen-art-pattern-density: 0.5;
  
  /* Generative noise variables */
  --gen-art-noise-intensity: 0.1;
  --gen-art-noise-scale: 1;
  --gen-art-noise-speed: 1;
}

/* ========================================
   GENERATIVE GRADIENT ART
   ======================================== */

.my-gen-gradient-1 {
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  animation: gen-gradient-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-gradient-2 {
  background: 
    linear-gradient(45deg, #ff6b6b 0%, transparent 25%),
    linear-gradient(-45deg, #4ecdc4 0%, transparent 25%),
    linear-gradient(90deg, #45b7d1 0%, transparent 25%),
    linear-gradient(180deg, #96ceb4 0%, transparent 25%);
  background-size: 200% 200%;
  animation: gen-gradient-flow var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-gradient-3 {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  animation: gen-gradient-rotate var(--gen-art-duration) var(--gen-art-easing) infinite;
}

@keyframes gen-gradient-shift {
  0%, 100% { 
    filter: hue-rotate(0deg) saturate(1);
  }
  50% { 
    filter: hue-rotate(180deg) saturate(1.5);
  }
}

@keyframes gen-gradient-flow {
  0%, 100% { 
    background-position: 0% 0%;
  }
  50% { 
    background-position: 100% 100%;
  }
}

@keyframes gen-gradient-rotate {
  0% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}

/* ========================================
   GENERATIVE PATTERN ART
   ======================================== */

.my-gen-pattern-1 {
  background-image: 
    radial-gradient(circle at 25% 25%, #ff6b6b 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, #4ecdc4 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, #45b7d1 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px, 20px 20px;
  animation: gen-pattern-move var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-pattern-2 {
  background-image: 
    linear-gradient(45deg, #ff6b6b 25%, transparent 25%),
    linear-gradient(-45deg, #4ecdc4 25%, transparent 25%),
    linear-gradient(45deg, #45b7d1 25%, transparent 25%),
    linear-gradient(-45deg, #96ceb4 25%, transparent 25%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  animation: gen-pattern-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-pattern-3 {
  background-image: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 60px 60px;
  animation: gen-pattern-rotate var(--gen-art-duration) var(--gen-art-easing) infinite;
}

@keyframes gen-pattern-move {
  0%, 100% { 
    background-position: 0 0, 0 0, 0 0;
  }
  50% { 
    background-position: 25px 25px, 15px 15px, 10px 10px;
  }
}

@keyframes gen-pattern-shift {
  0%, 100% { 
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  }
  50% { 
    background-position: 20px 20px, 20px 40px, 40px 0px, 0px 20px;
  }
}

@keyframes gen-pattern-rotate {
  0% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}

/* ========================================
   GENERATIVE NOISE ART
   ======================================== */

.my-gen-noise-1 {
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
  filter: contrast(1.2) saturate(1.1) blur(0.5px);
  animation: gen-noise-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-noise-2 {
  background: 
    linear-gradient(45deg, rgba(255, 107, 107, 0.1) 0%, transparent 25%),
    linear-gradient(-45deg, rgba(78, 205, 196, 0.1) 0%, transparent 25%),
    linear-gradient(90deg, rgba(69, 183, 209, 0.1) 0%, transparent 25%);
  background-size: 200% 200%;
  filter: contrast(1.5) saturate(1.3) blur(1px);
  animation: gen-noise-flow var(--gen-art-duration) var(--gen-art-easing) infinite;
}

@keyframes gen-noise-shift {
  0%, 100% { 
    filter: contrast(1.2) saturate(1.1) blur(0.5px) hue-rotate(0deg);
  }
  50% { 
    filter: contrast(1.5) saturate(1.3) blur(1px) hue-rotate(180deg);
  }
}

@keyframes gen-noise-flow {
  0%, 100% { 
    background-position: 0% 0%;
    filter: contrast(1.2) saturate(1.1);
  }
  50% { 
    background-position: 100% 100%;
    filter: contrast(1.5) saturate(1.3);
  }
}

/* ========================================
   GENERATIVE GEOMETRIC ART
   ======================================== */

.my-gen-geometric-1 {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 100px 100px;
  animation: gen-geometric-rotate var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.my-gen-geometric-2 {
  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: 80px 80px;
  animation: gen-geometric-scale var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.my-gen-geometric-3 {
  background: 
    linear-gradient(45deg, #ff6b6b 25%, transparent 25%),
    linear-gradient(-45deg, #4ecdc4 25%, transparent 25%),
    linear-gradient(45deg, #45b7d1 25%, transparent 25%);
  background-size: 60px 60px;
  animation: gen-geometric-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@keyframes gen-geometric-rotate {
  0% { 
    transform: rotate(0deg) scale(1);
  }
  50% { 
    transform: rotate(180deg) scale(1.1);
  }
  100% { 
    transform: rotate(360deg) scale(1);
  }
}

@keyframes gen-geometric-scale {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.2);
  }
}

@keyframes gen-geometric-shift {
  0%, 100% { 
    background-position: 0 0, 0 0, 0 0;
  }
  50% { 
    background-position: 30px 30px, -30px 30px, 30px -30px;
  }
}

/* ========================================
   GENERATIVE WAVE ART
   ======================================== */

.my-gen-wave-1 {
  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: gen-wave-flow var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.my-gen-wave-2 {
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%);
  background-size: 200px 200px;
  animation: gen-wave-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@keyframes gen-wave-flow {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  50% { 
    background-position: 100% 100%, -100% 100%, 100% -100%;
  }
}

@keyframes gen-wave-shift {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%;
  }
  50% { 
    background-position: 100% 100%, -100% -100%;
  }
}

/* ========================================
   GENERATIVE FRACTAL ART
   ======================================== */

.my-gen-fractal-1 {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 200px 200px;
  animation: gen-fractal-rotate var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.my-gen-fractal-2 {
  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: 160px 160px;
  animation: gen-fractal-scale var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@keyframes gen-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);
  }
}

@keyframes gen-fractal-scale {
  0%, 100% { 
    transform: scale(1);
  }
  25% { 
    transform: scale(1.1);
  }
  50% { 
    transform: scale(1.2);
  }
  75% { 
    transform: scale(1.1);
  }
}

/* ========================================
   GENERATIVE PARTICLE ART
   ======================================== */

.my-gen-particle-1 {
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px, 20px 20px;
  animation: gen-particle-move var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-particle-2 {
  background: 
    linear-gradient(45deg, rgba(255, 107, 107, 0.3) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(78, 205, 196, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 183, 209, 0.3) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gen-particle-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
}

@keyframes gen-particle-move {
  0%, 100% { 
    background-position: 0 0, 0 0, 0 0;
  }
  50% { 
    background-position: 25px 25px, 15px 15px, 10px 10px;
  }
}

@keyframes gen-particle-shift {
  0%, 100% { 
    background-position: 0 0, 0 0, 0 0;
  }
  50% { 
    background-position: 20px 20px, -20px 20px, 20px -20px;
  }
}

/* ========================================
   GENERATIVE MANDALA ART
   ======================================== */

.my-gen-mandala-1 {
  background: 
    conic-gradient(from 0deg at 50% 50%, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
  background-size: 300px 300px;
  animation: gen-mandala-rotate var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: circle(50%);
}

.my-gen-mandala-2 {
  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: gen-mandala-scale var(--gen-art-duration) var(--gen-art-easing) infinite;
  clip-path: circle(50%);
}

@keyframes gen-mandala-rotate {
  0% { 
    transform: rotate(0deg) scale(1);
  }
  50% { 
    transform: rotate(180deg) scale(1.1);
  }
  100% { 
    transform: rotate(360deg) scale(1);
  }
}

@keyframes gen-mandala-scale {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.2);
  }
}

/* ========================================
   GENERATIVE RESPONSIVE ART
   ======================================== */

@media (max-width: 768px) {
  .my-gen-responsive {
    --gen-art-pattern-size: 50px;
    --gen-art-duration: 5s;
  }
}

@media (min-width: 1024px) {
  .my-gen-responsive {
    --gen-art-pattern-size: 150px;
    --gen-art-duration: 15s;
  }
}

/* ========================================
   GENERATIVE ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .my-gen-gradient-1,
  .my-gen-gradient-2,
  .my-gen-gradient-3,
  .my-gen-pattern-1,
  .my-gen-pattern-2,
  .my-gen-pattern-3,
  .my-gen-noise-1,
  .my-gen-noise-2,
  .my-gen-geometric-1,
  .my-gen-geometric-2,
  .my-gen-geometric-3,
  .my-gen-wave-1,
  .my-gen-wave-2,
  .my-gen-fractal-1,
  .my-gen-fractal-2,
  .my-gen-particle-1,
  .my-gen-particle-2,
  .my-gen-mandala-1,
  .my-gen-mandala-2 {
    animation: none;
  }
}

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

.my-gen-art-auto {
  background: var(--gen-art-palette-1);
  animation: gen-gradient-shift var(--gen-art-duration) var(--gen-art-easing) infinite;
}

.my-gen-art-slow {
  animation-duration: calc(var(--gen-art-duration) * 2);
}

.my-gen-art-fast {
  animation-duration: calc(var(--gen-art-duration) * 0.5);
}

.my-gen-art-pause {
  animation-play-state: paused;
}

.my-gen-art-play {
  animation-play-state: running;
}