mycsslab/src/utilities/holographic-ui-elements.css

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

/**
 * MyCSSLab Holographic UI Elements
 * True 3D holographic effects and futuristic UI components
 * Version: 3.0.2
 */

/* ========================================
   HOLOGRAPHIC CORE VARIABLES
   ======================================== */

:root {
  /* Holographic color variables */
  --holographic-primary: #00d4ff;
  --holographic-secondary: #ff006e;
  --holographic-accent: #8338ec;
  --holographic-neon: #00f5ff;
  --holographic-plasma: #ff0080;
  --holographic-cyber: #00ff88;
  --holographic-hologram: #ff1493;
  --holographic-matrix: #00ff41;
  
  /* Holographic effect variables */
  --holographic-intensity: 1;
  --holographic-blur: 0px;
  --holographic-glow: 0px;
  --holographic-distortion: 0;
  --holographic-perspective: 1000px;
  
  /* Holographic animation variables */
  --holographic-duration: 3s;
  --holographic-easing: ease-in-out;
  --holographic-delay: 0s;
  --holographic-iteration: infinite;
  
  /* Holographic 3D variables */
  --holographic-rotate-x: 0deg;
  --holographic-rotate-y: 0deg;
  --holographic-rotate-z: 0deg;
  --holographic-translate-z: 0px;
  --holographic-scale: 1;
}

/* ========================================
   HOLOGRAPHIC BASE EFFECTS
   ======================================== */

.my-holographic {
  position: relative;
  background: linear-gradient(45deg, 
    rgba(255, 0, 255, 0.1) 0%, 
    rgba(0, 255, 255, 0.1) 25%, 
    rgba(255, 255, 0, 0.1) 50%, 
    rgba(255, 0, 255, 0.1) 75%, 
    rgba(0, 255, 255, 0.1) 100%);
  background-size: 400% 400%;
  animation: holographic-shift var(--holographic-duration) var(--holographic-easing) infinite;
  transform-style: preserve-3d;
  perspective: var(--holographic-perspective);
}

@keyframes holographic-shift {
  0%, 100% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% { 
    background-position: 100% 50%;
    filter: hue-rotate(180deg);
  }
}

.my-holographic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(var(--holographic-blur));
  opacity: 0.5;
  z-index: -1;
  transform: translateZ(-10px);
}

.my-holographic::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 70%);
  animation: holographic-scan 2s linear infinite;
  z-index: 1;
}

@keyframes holographic-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========================================
   HOLOGRAPHIC 3D TRANSFORMS
   ======================================== */

.my-holographic-3d {
  transform: perspective(var(--holographic-perspective)) 
            rotateX(var(--holographic-rotate-x)) 
            rotateY(var(--holographic-rotate-y)) 
            rotateZ(var(--holographic-rotate-z)) 
            translateZ(var(--holographic-translate-z)) 
            scale(var(--holographic-scale));
  transition: all var(--holographic-duration) var(--holographic-easing);
}

.my-holographic-3d:hover {
  --holographic-rotate-x: 15deg;
  --holographic-rotate-y: 15deg;
  --holographic-translate-z: 20px;
  --holographic-scale: 1.05;
}

.my-holographic-3d-float {
  animation: holographic-3d-float 4s ease-in-out infinite;
}

@keyframes holographic-3d-float {
  0%, 100% { 
    transform: perspective(var(--holographic-perspective)) 
              rotateX(0deg) rotateY(0deg) translateZ(0px) scale(1);
  }
  50% { 
    transform: perspective(var(--holographic-perspective)) 
              rotateX(10deg) rotateY(10deg) translateZ(20px) scale(1.02);
  }
}

/* ========================================
   HOLOGRAPHIC GLOW EFFECTS
   ======================================== */

.my-holographic-glow {
  box-shadow: 0 0 var(--holographic-glow) var(--holographic-primary),
              0 0 calc(var(--holographic-glow) * 2) var(--holographic-secondary),
              0 0 calc(var(--holographic-glow) * 3) var(--holographic-accent);
  animation: holographic-glow-pulse 2s ease-in-out infinite;
}

@keyframes holographic-glow-pulse {
  0%, 100% { 
    --holographic-glow: 10px;
    filter: brightness(1);
  }
  50% { 
    --holographic-glow: 20px;
    filter: brightness(1.2);
  }
}

.my-holographic-glow-strong {
  --holographic-glow: 30px;
  box-shadow: 0 0 var(--holographic-glow) var(--holographic-primary),
              0 0 calc(var(--holographic-glow) * 1.5) var(--holographic-secondary),
              0 0 calc(var(--holographic-glow) * 2) var(--holographic-accent);
}

.my-holographic-glow-weak {
  --holographic-glow: 5px;
  box-shadow: 0 0 var(--holographic-glow) var(--holographic-primary);
}

/* ========================================
   HOLOGRAPHIC DISTORTION EFFECTS
   ======================================== */

.my-holographic-distort {
  filter: contrast(1.2) saturate(1.3) hue-rotate(0deg);
  animation: holographic-distort var(--holographic-duration) var(--holographic-easing) infinite;
}

@keyframes holographic-distort {
  0%, 100% { 
    filter: contrast(1.2) saturate(1.3) hue-rotate(0deg) blur(0px);
    transform: scale(1);
  }
  50% { 
    filter: contrast(1.5) saturate(1.5) hue-rotate(180deg) blur(1px);
    transform: scale(1.02);
  }
}

.my-holographic-distort-strong {
  --holographic-distortion: 0.1;
  filter: contrast(1.5) saturate(1.5) hue-rotate(0deg) blur(2px);
  animation: holographic-distort-strong 1.5s ease-in-out infinite;
}

@keyframes holographic-distort-strong {
  0%, 100% { 
    filter: contrast(1.5) saturate(1.5) hue-rotate(0deg) blur(2px);
    transform: scale(1) skew(0deg);
  }
  50% { 
    filter: contrast(2) saturate(2) hue-rotate(180deg) blur(4px);
    transform: scale(1.05) skew(2deg);
  }
}

/* ========================================
   HOLOGRAPHIC MATRIX EFFECTS
   ======================================== */

.my-holographic-matrix {
  background: 
    linear-gradient(90deg, transparent 98%, var(--holographic-matrix) 100%),
    linear-gradient(0deg, transparent 98%, var(--holographic-matrix) 100%);
  background-size: 20px 20px;
  animation: holographic-matrix-fall 2s linear infinite;
  position: relative;
  overflow: hidden;
}

@keyframes holographic-matrix-fall {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 20px, 0 20px; }
}

.my-holographic-matrix::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(0, 255, 65, 0.1) 0%, transparent 50%);
  animation: holographic-matrix-glow 3s ease-in-out infinite;
}

@keyframes holographic-matrix-glow {
  0%, 100% { 
    opacity: 0.3;
    filter: hue-rotate(0deg);
  }
  50% { 
    opacity: 1;
    filter: hue-rotate(120deg);
  }
}

/* ========================================
   HOLOGRAPHIC CYBERPUNK EFFECTS
   ======================================== */

.my-holographic-cyberpunk {
  background: linear-gradient(45deg, 
    var(--holographic-primary) 0%, 
    var(--holographic-secondary) 25%, 
    var(--holographic-accent) 50%, 
    var(--holographic-neon) 75%, 
    var(--holographic-plasma) 100%);
  background-size: 200% 200%;
  animation: holographic-cyberpunk-shift 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

@keyframes holographic-cyberpunk-shift {
  0%, 100% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% { 
    background-position: 100% 50%;
    filter: hue-rotate(180deg) brightness(1.3);
  }
}

.my-holographic-cyberpunk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  animation: holographic-cyberpunk-scan 1.5s linear infinite;
}

@keyframes holographic-cyberpunk-scan {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(100%) skewX(-15deg); }
}

/* ========================================
   HOLOGRAPHIC NEON EFFECTS
   ======================================== */

.my-holographic-neon {
  color: var(--holographic-neon);
  text-shadow: 
    0 0 5px var(--holographic-neon),
    0 0 10px var(--holographic-neon),
    0 0 15px var(--holographic-neon),
    0 0 20px var(--holographic-neon);
  animation: holographic-neon-flicker 3s ease-in-out infinite;
}

@keyframes holographic-neon-flicker {
  0%, 100% { 
    text-shadow: 
      0 0 5px var(--holographic-neon),
      0 0 10px var(--holographic-neon),
      0 0 15px var(--holographic-neon),
      0 0 20px var(--holographic-neon);
    filter: brightness(1);
  }
  50% { 
    text-shadow: 
      0 0 2px var(--holographic-neon),
      0 0 5px var(--holographic-neon),
      0 0 8px var(--holographic-neon),
      0 0 12px var(--holographic-neon);
    filter: brightness(1.2);
  }
}

.my-holographic-neon-border {
  border: 2px solid var(--holographic-neon);
  box-shadow: 
    inset 0 0 10px var(--holographic-neon),
    0 0 10px var(--holographic-neon);
  animation: holographic-neon-border-pulse 2s ease-in-out infinite;
}

@keyframes holographic-neon-border-pulse {
  0%, 100% { 
    box-shadow: 
      inset 0 0 10px var(--holographic-neon),
      0 0 10px var(--holographic-neon);
  }
  50% { 
    box-shadow: 
      inset 0 0 20px var(--holographic-neon),
      0 0 20px var(--holographic-neon);
  }
}

/* ========================================
   HOLOGRAPHIC HOLOGRAM EFFECTS
   ======================================== */

.my-holographic-hologram {
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 20, 147, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 245, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(0, 255, 136, 0.3) 0%, transparent 50%);
  background-size: 300px 300px;
  animation: holographic-hologram-float 4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

@keyframes holographic-hologram-float {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% { 
    background-position: 100% 100%, -100% 100%, 100% -100%;
    filter: hue-rotate(180deg) brightness(1.2);
  }
}

.my-holographic-hologram::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  animation: holographic-hologram-scan 2s linear infinite;
}

@keyframes holographic-hologram-scan {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* ========================================
   HOLOGRAPHIC RESPONSIVE SYSTEM
   ======================================== */

@media (max-width: 768px) {
  .my-holographic-responsive {
    --holographic-duration: 2s;
    --holographic-perspective: 500px;
    --holographic-glow: 5px;
  }
}

@media (min-width: 1024px) {
  .my-holographic-responsive {
    --holographic-duration: 4s;
    --holographic-perspective: 1500px;
    --holographic-glow: 20px;
  }
}

/* ========================================
   HOLOGRAPHIC ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .my-holographic,
  .my-holographic-3d-float,
  .my-holographic-glow-pulse,
  .my-holographic-distort,
  .my-holographic-distort-strong,
  .my-holographic-matrix,
  .my-holographic-cyberpunk,
  .my-holographic-neon,
  .my-holographic-hologram {
    animation: none;
  }
  
  .my-holographic-3d {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .my-holographic-responsive {
    --holographic-intensity: 0.5;
    --holographic-glow: 2px;
  }
}

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

.my-holographic-auto {
  animation: holographic-shift var(--holographic-duration) var(--holographic-easing) infinite;
}

.my-holographic-smooth {
  --holographic-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.my-holographic-fast {
  --holographic-duration: 1s;
}

.my-holographic-slow {
  --holographic-duration: 5s;
}

.my-holographic-intense {
  --holographic-intensity: 1.5;
  --holographic-glow: 30px;
  --holographic-blur: 5px;
}

.my-holographic-subtle {
  --holographic-intensity: 0.5;
  --holographic-glow: 5px;
  --holographic-blur: 1px;
}